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 this repository
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
styleprop or CSS files:- Use MUI
sxprop instead of supporting theme-aware styling. - Use MUI system shorthand props for spacing, such as
p,mx,mb, for spacing.
- Use MUI
- Avoid using
divorspanfor 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.