ace53thntu / test-healthy-web-app

This is a test of Em Dinh

Healthy web app

This is a Healthy web app used with ReactJS + TailwindCSS + Vite.

What is inside?

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

Prerequirements

To run this project, you will need to install NodeJs ^14.18.1 and npm ^6.14.15

Getting started

Install dependencies

cd path-to-project
npm install

Development

npm run dev

And then open http://localhost:3000 to view it in the browser.

• Top page
• My Record
• Column Page

Production

npm run build

Folder Structure

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

TODO

• Responsive UI
• Make Record Button component has blend mode like design
• Typography components