You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Technology Stacks

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

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

TypeName
Project Managerpnpm
Build ToolVite
Static Type CheckerTypeScript
UI LibrariesReact
MUI
HTTP ClientAxios
Client RouterReact Router
CI/CD
Code LinterESLint
Code FormatterPerttier
Commit Lintercommitlint

Develop Locally

Prerequisites

Please install/update the following software before moving on:

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 Typography component for texts instead of p, span, h1, h2, h3, etc.










  • No labels