Air Checker

Air Checker

📗 Table of Contents

• Air Checker
• 📗 Table of Contents
• 📖Air Checker
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
  • 😎 Loom walkthrough
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 👥 Author
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • ❓ FAQ
  • 📝 License

📖Air Checker

Air Checker is a web application designed for real-time monitoring of air quality in various locations across El Salvador. Developed using React.js, Redux, and Redux-Toolkit, the application displays air quality data that includes the Air Quality Index (AQI) and concentrations of several pollutants, such as Carbon Monoxide and Nitrogen Dioxide. State management is executed through Redux, utilizing async-thunk middleware for API calls and adopting the latest hooks-based React approach for functional components.

The application is mobile-friendly and has been tested with unit tests constructed using Jest and the React Testing Library. To ensure scalability and maintainability, modular and reusable components have been integrated throughout the application. Styling with CSS has been employed to provide a modern, responsive design, enhancing user interaction.

🛠 Built With

HTML, CSS, JavaScript, React.js, Redux Toolkit, Axios, Jest.

Tech Stack

Client

• HTML
• CSS
• JavaScript
• React.js
• Redux Toolkit
• Axios
• Jest

Package Manager

• npm

Linters

• ESLint
• Stylelint

Key Features

• Mobile-friendly design: The application was designed with a responsive layout, ensuring a great user experience across all devices, including smartphones and tablets.
• Scalable and maintainable architecture: The use of modular and reusable components within the application ensures it can be easily scaled and maintained in the future.
• Comprehensive testing: The application's functionality has been rigorously tested using Jest and the React Testing Library, ensuring robust and reliable performance for users.

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

😎 Loom walkthrough

• Loom walkthrough Link

(back to top)

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

• A web browser to view output e.g. Google Chrome.
• An IDE e.g Visual studio code.
• node should be installed in your local machine, node website.
• Install the npm package manager use this to install both node and npm.
• A terminal.

Setup

Clone this repository to your desired folder or download the Zip folder:

https://github.com/Alejandroq12/air-checker

• Navigate to the location of the folder in your machine:

you@your-Pc-name:~$ cd air-checker

Install

To install all dependencies, run:

npm install

Usage

To run the project, follow these instructions:

• After cloning this repo to your local machine.
• You must use npm start command in terminal to run this at the localhost.

Run tests

To run tests, run the following command:

• Track CSS linter errors run:

npx stylelint "**/*.{css,scss}"

• Track JavaScript linter errors run:

npx eslint "**/*.{js,jsx}"

Run tests with Jest

npm test

Deployment

You can deploy this project using: Render,

• I used Render Pages to deploy my website.
• For more information about deployment on Netlify see "Netlify".

(back to top)

👥 Author

👤 Julio Quezada

• GitHub: Alejandroq12
• Twitter: @JulioAle54
• LinkedIn: Julio Quezada

(back to top)

🔭 Future Features

• I will implement more pages
• I will create statistics according to each city

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project give me a star ⭐️

(back to top)

🙏 Acknowledgments

This application was inspired by the original design idea by Nelson Sakwa on Behance. The Creative Commons license of the design requires the appropriate credit to the original author.

DESIGN LINK

(back to top)

❓ FAQ

• Did you created this project from zero?

  • Of course, as if it were a real life job scenario.

(back to top)

📝 License

This project is LICENSE licensed.

(back to top)