Frontend Documentation - OtagoPolytechnic/Air-Quality-Monitoring-System GitHub Wiki

The frontend is how the CO₂ site looks. This new site is based off the old site Carbon. Our goal is to recreate the site from scratch using industry standard tools but keep the feel and use of the old Carbon site. For this we are using Vite instead of PHP.

The frontend is not currently deployed on any server but local host.

To set up the site locally you will need to change from the root to frontend using the command cd frontend. Once in the frontend folder you will need to install the dependencies by running npm install or npm i for short. Once all the depnedances are installed you can run the site locally by running npm run dev.

In the frontend folder where the package.json and the REAME.md files are located you will need to create a file called .env and put in the following line VITE_BACKEND_API_KEY='http://co2-app.op-bit.nz'

React

React-Dom

Recharts

React-Google-Charts

React-Dom-Router

Vite

Prettier

Commitizen

Jest (Unit testing)

Eslint

@vitejs/plugin-react uses Babel for Fast Refresh

@vitejs/plugin-react-swc uses SWC for Fast Refresh

To run the tests, you will need to make sure you are in the frontend folder if you are not then run the command cd frontend. Once in the frontend you will need to run npm run test to run all the local tests.

To test the cypress tests follow the backend documentation project setup until the seed and enter npm run seed:cypress. Follow the rest of the backend documentation setup. Then in the frontend enter npx cypress open.

npm install prettier commitizen cz-conventional-changelog pretty-quick --save-dev

• /frontend/ cz npm run cz runs commitizen and walks you through commiting a change

• /frontend/ eslint npm run lint runs eslint command the frontend project

• /frontend/ prettier:check npm run prettier:check runs the check command the frotnend project

• /frontend/ prettier:write npm run prettier:write runs the write command the frotnend project