Technology Stacks

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

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

Getting Started

• Prerequisites: Please install/update the following software before moving on:

  • Git

  • Node.js v18 (LTS)

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

  • VS Code with the following extensions

    • ESLint

    • Prettier

• Clone, Install, Run

  • git clone https://github.com/infant-nutrition-project/frontend-web.git
    cd frontend-web
    pnpm install
    pnpm run dev

• Check coding style

• • pnpm lint

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.