To show the list and user info that fetch from backend, the frontend can refresh the data and get the info by axios and render the data on the screen.
Using React.js to build up the whole frontend application.
Divide the pages and services via domain.
├── public
└── src
├── api
├── assets
├── components
├── hooks
├── pages
├── routes
├── services
├── styles
├── types
└── utils
This application uses Domain Driven Design to build up the folder structure.
- public -> store static files, like icon, etc.
- src/api -> request layer using axios.
- src/assets -> include some static files.
- src/components -> has some common components inside.
- src/hooks -> some common hooks.
- src/pages -> each pages.
- src/routes -> the routes of the pages.
- src/services -> the services of each page.
- src/styles -> global style and some scss and css variables.
- src/types -> the definition of types from each page.
- src/utils -> common utils function used in the project.
Each page will have corresponding files in pages/, services/ and types/.
When there is a bug that is not related to the common components, utils or hooks, you need to search the files mentioned above to find the bug and fix it.
- Install Dependencies
pnpm install
# alias: pnpm i- Config dot environment file
cp ./.env ./.env.dev.local- Start development server
pnpm dev
# pnpm run dev