...
Development hints
Prerequisites
...
...
Setup
...
Clone, Install, Run
Code Block git clone https://github.com/infant-nutrition-project/frontend-web.git
...
Install/update pnpm v8 (Faster, more disk space efficient package manager than npm
).
...
cd frontend-web pnpm install pnpm run dev
Check coding style
...
Code Block
...
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.
- Use MUI
- Avoid using
div
orspan
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.