DIAPER Single Page Application (SPA) built with React and MUI.
Before diving into codes, getting familiar with these documents is highly recommended.Â
Type | Name |
---|---|
Project Manager | pnpm |
Build Tool | Vite |
Static Type Checker | TypeScript |
UI Libraries | React MUI |
HTTP Client | Axios |
Client Router | React Router |
CI/CD | |
Code Linter | ESLint |
Code Formatter | Perttier |
Commit Linter | commitlint |
Develop Locally
Prerequisites
Please install/update the following software before moving on:
- Git
- Node.js v18 (LTS)
- VS Code with the following extensions
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.
- Use MUIÂ
- 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.