Frontend (dashboard)

DIAPER Single Page Application (SPA) built with React and MUI.

Before diving into codes, getting familiar with these documents is highly recommended. 

Develop Locally

Prerequisites

Please install/update the following software before moving on:

• Git
• Node.js v18 (LTS)
• VS Code with the following extensions
  • ESLint
  • Prettier

Setup

• Clone frontend-web GitHub repository. You need to get access as this is not a public repository.

  git clone https://github.com/infant-nutrition-project/frontend-web.git

• Install/update pnpm v8 (Faster, more disk space efficient package manager than npm).

• Run 

  pnpm run dev

Debug

• Run pnpm lint to check any error

Coding Styles

• Following rules configured in ESLint and Prettier.
• One file should be no longer than 300 lines.
• Avoid class components. Use functional components whenever possible.
• JavaScript files are not allowed. All code must be in TypeScript with all properties and function signatures typed.
  • Typing is not required for local variables/consts when the type can be correctly inferred by Language Server.
• Avoid styling through style prop or CSS files:
  • Use MUI sx prop instead of supporting theme-aware styling.
  • Use MUI system shorthand props for spacing, such as p, mx, mb, for spacing.
• Avoid using div or span for layouts!
  • Use MUI Stack component for a CSS flex-box container.
  • Use MUI Box component for a general container.
  • You may also use other MUI Layout components.
• Use MUI Typography component for texts instead of p, span, h1, h2, h3, etc.