Air Quality App

The Air Quality App enables users to retrieve real-time information about the air quality in their local city by simply entering their location in the search bar. It promptly provides users with accurate data on their local air quality, along with detailed descriptions explaining the meaning of each measurement.

Link to project: https://c4d-react-aqi.netlify.app/

---

Installation & Setup

To run the setup locally:

1. Clone/Fork the repo:

   git clone ...

2. Change to app directory:

   cd {project-directory}

3. Install NPM Modules:

   npm install

4. Register your AQI API key at
   https://aqicn.org/api/

5. Then copy your API key into .env.example file in root
   after VITE_API_KEY= parameter.

6. Rename the file .env.example to .env.

7. Run Vite:

   npm run dev

---

Goals of this project:

With recent wildfire events and how it's affecting air qualities in places around the world, the goal of this project is to create an WebApp that allows users to quickly find relavant Air Quality Information based on their city!

Technologies Used: React, Vite, TailwindCSS, DaisyUI

Data & API Source: Worldwide Air Quality

Inspired by Mayanwolfe's project here

Techincal Goals:

This project is used to test out Modern Web Framework Technologies such as:

• React
  • Components & JSX
• TailwindCSS
  • Utility First Fundamentals
    • Box Model: Border, Padding, Margin, etc.
    • Color
      • Attributes like Background,Font,Text-Color following WCAG contrast
      • Using React props & variables to control coloring
    • Responsive design (devices from 360px and up)
  • DaisyUI
    • Themes (Light & Dark Mode)
    • Components: Cards, Tables, etc.

---

Future Implementations:

• Adding Map View based on Geo Location
  • (similar to Map Tile Widget here)
• Modal Alert messages on certain cities

---

Other Projects:

Checkout my other projects here!

Kanban Board WebApp:
https://github.com/Code4Dopamine/FS-Kanban

[MS Thesis] Tactile Body-Globe (Tactile Visualization): https://github.com/Code4Dopamine/Tactile-Visualization

Pix2Pix - ML:
https://github.com/Code4Dopamine/Pix2Pix-PracticalML