A Next.js project bootstrapped with create-next-app.
AQM is a single-page web application to display live air quality monitoring data of a few cities in India.
I built this project as an assignment for a job interview. Did I get it?
Yes, I got the interview 😉 and guess what?! I got the job 🤓
Click here to see the initial wireframe.
The below images are linked to full size images :)
Built with
- ReactJS + NextJs
Dependencies
| Library | Description |
|---|---|
| react-apexcharts | Generate and show AQI history as line graph |
| clsx | Easy naming classes |
| react-awesome-modal | Show single city in a pop-up modal |
| react-time-ago | Show time as text like few seconds ago |
| sass | Easy writing css classes |
| websocket | Connect and listen to city-ws web socket |
DevDependencies
| Library | Description |
|---|---|
| tailwind | CSS utils library for quick designing |
- Real-time Updates
- Simple UI
- Fully responsive
- Neat Graphs
- Color based status
- Download Graphs as PNG, SVG or CSV
First, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
Total time: 9 h 49 m 30 s
A detailed list of how much time I spent on which task from most to least.
| Task | Time |
|---|---|
| Developing Frontend | 3h 45 m 06 s |
| Creating History Chart | 52 m 13 s |
| README | 56 m 17 s |
| Draw Wire frames | 35 m 22 s |
| Integrating Websocket | 31 m 59 s |
| Deploy Hello World Program | 17 m 49 s |
| Deploy Final App | 13m 03 s |
| Initiate App + Repo | 11 m 08 s |
| Installing SASS + Tailwind | 9 m 16 s |
| Code Review | 08 m 52 s |
| Algorithms | Time |
|---|---|
| Merging New & Current List | 49 m 34 s |
| Showing Live City in Modal | 25 m 28 s |
| Updating Updated Time | 22m 56 s |
| Storing AQI History | 11 m 26 s |
| Select cities for comparison | 10 m 06 s |
| Converting AQI Data | 05 m 28 s |
| Limit History Items | 03 m 27 s |