https://github.com/vasaofficial/earthsensor

Find out the air quality of a city near you :earth_africa:
https://github.com/vasaofficial/earthsensor

aqi weather-information

Last synced: 7 months ago
JSON representation

Find out the air quality of a city near you :earth_africa:

• Host: GitHub
• URL: https://github.com/vasaofficial/earthsensor
• Owner: VasaOfficial
• Created: 2023-03-31T16:56:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-26T14:45:31.000Z (almost 2 years ago)
• Last Synced: 2023-12-16T14:39:30.201Z (almost 2 years ago)
• Topics: aqi, weather-information
• Language: TypeScript
• Homepage: https://earth-sensor.vercel.app
• Size: 8.03 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  

  ![earthsensor](https://github.com/VasaOfficial/EarthSensor/assets/113908218/33b8867c-735d-4461-9a5e-c0f05c654807)






  EarthSensor provides air pollution and weather information for cities around the world.





  The app fetches data from the Aqicn REST API and presents it in a user-friendly format using graphs.



![Screenshot_2-min](https://github.com/VasaOfficial/EarthSensor/assets/113908218/0c48491d-f3f3-42fa-bf76-0a0a43693180)

About


EarthSensor is a web application that allows users to search for a city and retrieve detailed information about its current air quality and weather conditions. The app visualizes the data using graphs and provides a 3D globe, built with ThreeJS, displaying stations with AQI (air quality index) levels higher than the norm.

This project was a way for me to learn a few cool libraries and frameworks that I have been eyeing out for a while. I wanted to try NextJS 13 and its routing, its SEO friendly ways and its SSR. It was a fun challenge to learn it and I feel confident in my skill with NextJS 13.

I had a lot of fun learning about THREE.JS and how to model dynamic data using vectors and geometries.

This project was also a great opportunity to include Tailwind CSS in order to make styling a bit faster, especially since I already had a lot to process learning WebGL. I also expanded my knowlege with React and Typescript with this project.

Features


- Search for a city to access real-time air quality and weather information.

- Interactive 3D globe visualization highlighting stations with higher AQI levels.

- User-friendly graphs presenting air pollution data in a visually appealing manner.

Live Demo


Check out the live demo of EarthSensor [here](https://earth-sensor.vercel.app/).

Technologies Used


- React

- Next.js

- TypeScript

- Tailwind CSS

- Three.js

- GSAP

- Aqicn API

- Unsplash API

- Mapbox

Design


![Untitled-2023-07-03-1330-min](https://github.com/VasaOfficial/EarthSensor/assets/113908218/cb56ac9d-46ce-4d77-bf62-ac337a0212d1)

Installation


To run EarthSensor locally, follow these steps:

1. Clone the repository: `git clone https://github.com/VasaOfficial/EarthSensor.git`

2. Install the dependencies: `cd earth-sensor && npm install`

3. Add `.env` and based on the env.mjs file add your API keys.

4. Start the development server: `npm run dev`

5. Open `http://localhost:3000` in your browser.

Contributing


Contributions are welcome! If you'd like to contribute to EarthSensor, please follow these steps:

1. Fork the repository.

2. Create a new branch: `git checkout -b feature/my-feature`.

3. Commit your changes: `git commit -am 'Add some feature'`.

4. Push to the branch: `git push origin feature/my-feature`.

5. Open a pull request.

Acknowledgements


Special thanks to the creators and contributors of the libraries, frameworks, and APIs used in this project.

License


Distributed under the MIT License.