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.

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.

Technologies Used

• React
• Next.js
• TypeScript
• Tailwind CSS
• Three.js
• GSAP
• Aqicn API
• Unsplash API
• Mapbox

Design

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.