This is a Healthy web app used with ReactJS + TailwindCSS + Vite.
This project uses many tools like:
- Vite with React, TypeScript.
- Tailwind CSS v3 and a Prettier plugin that automatically sorts classes.
- Use ESLint, and Prettier on VSCode and before you commit with Husky and lint-staged.
- React Router V6 for client side routing
- React Query and axios for communication with the API
To run this project, you will need to install NodeJs ^14.18.1 and npm ^6.14.15
cd path-to-project
npm install
npm run dev
And then open http://localhost:3000 to view it in the browser.
npm run build
test-healthy-web-app
├── node_modules
├── public
└── src
├── assets # images, css
├── components
├── base # components: button, typography
├── common # common components
├── icons # all svg icons
├── configs # all configuration
├── data # test data
├── layouts # route layouts
├── pages # all pages base on route
├── utils # utility functions
├── App.tsx
├── index.css
├── main.tsx
├── .browserslistrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .prettierignore
├── .prettierrc.js
├── index.html
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── tsconfig.eslint.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
- Responsive UI
- Make Record Button component has blend mode like design
- Typography components