dev89s / air-quality-mobile

A Web based App that gets the weather from OpenWeather API and displays as a list of famous cities (implemented using React/&Redux). And also uses Air Quality/Polution API to show details of air qualtiy for each city.

Weather and Air Quality

📗 Table of Contents

• � Table of Contents
• 📖 Weather and Air Quality
• 🛠 Built With
  • Tech Stack
  • Key Features
• 🚀 Live Demo

• 💻 Getting Started
  • Prerequisites
  • Setup
  • Install
  • Test
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgments
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 Weather and Air Quality

Weather and Air Quality is a Single Page App (SPA) implemeted using React and Redux that has 2 pages:

1. The Cities page/Home page which displays a list of all available Cities. Users can see the temperature of each city on the homepage in each cities card.
2. The Details/Air quality page that displays a list of air quality measures along with the quality verification (Good/Fair/Moderate/Poor/Very Poor).
3. It uses an OpenWeather API to fetch data.

🛠 Built With

Tech Stack

Technology

• HTML
• CSS
• Javascript

Tools

• VSCode
• Git
• node
• npm
• React
• Redux
• webpack
• jest

Key Features

• Cities' List which displays the name of the city, Temperature, Sunny/Cloudy status, etc.
• Air Quality Measures which displays different cities' air quality measuures, and their verification.

(back to top)

🚀 Live Demo

• An implementation of this portfolio is live on Render.com website

(back to top)

🎬 Representation

• A representation of the project by Author. Watch here

(back to top)

💻 Getting Started

Prerequisites

In order to reproduce the Math-Magicians and be able to make changes for your own purpose you need the following tools:

• Visual Studio Code
• git-scm
• A Github account
• NodeJS (which also includes npm package manager)

Setup

1. Make a new directory and go inside the directory using cd command in terminal
2. Use "git" to clone this repository into your local drive:

  git clone https://github.com/dev89s/air-quality-mobile.git

Install

  npm install

Usage

• Feel free to experiment with the project.
• To build the project:

  npm run build

• The index.html file in dist folder is the output file that you want to open in the browser.
• To add tests or examine different tests that are alreadt available go to:

  [root_dir]/src/modules/[modulename].test.js

Test

  npm test

Deployment

You can deploy this project by opening a new github repo and initialize the local git repo and connect it through: $ git remote add origin main [your github repo link] command. Then you can push the project into that repository and if you go to the repository in your account, you'll see the code in the account.

(back to top)

👥 Authors

👤 Sasan Moshirabadi

• GitHub: @dev89s
• LinkedIn: @sasan-moshirabadi

(back to top)

🔭 Future Features

• More Weather details: the desgin will be updated.
• Desktop Version: Desktop version will be added later.

(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 consider giving a star to the project and if you want to go furthur make a donation to any one the top 8 charities in Hawaii islands at the link below:

• Hawaii Donation

(back to top)

🙏 Acknowledgments

I would like to thank Microverse online web development school for providing the material and guidance that helped me created this app.

(back to top)

❓ FAQ (OPTIONAL)

• Is mobile first web design a necessity these days?

  • Since 2014 mobile web users have surpassed desktop users and the rate of the new users being introduced to web by mobile devices will only increase by time.

• Does the project support all platforms?

  • Yes! Since it is based on web technology, any device that has a web browser will be able to see the website once it is online.

(back to top)

📝 License

This project is MIT licensed.

(back to top)