Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aimarbustamante/weather-app

Web application where you can check the weather for various cities around the world with dynamic information fetched from an API.
https://github.com/aimarbustamante/weather-app

api axios axios-react cssmodules cssmodules-react react typescript vite weather weather-api weather-app web-app zod

Last synced: 7 days ago
JSON representation

Web application where you can check the weather for various cities around the world with dynamic information fetched from an API.

Awesome Lists containing this project

README 

        
# 🌦️ Weather App



![mockup-browser](public/image/mockup-browser.png)



## 📖 Project Description

Weather App is a web application where you can check the weather for various cities around the world with dynamic information fetched from an API.



## 🎨 Project Features

- **City Search**: Search for weather information in many cities around the world.

- **Current Weather**: View the current weather conditions including temperature and it's minimum and maximum temperature.

- **Error Handling**: Displays user-friendly error messages when there are issues with fetching data.

- **Responsive Design**: Optimized for both desktop and mobile devices.



## 🚀 Technologies Used

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB) 

![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

![CSS_Modules](https://img.shields.io/badge/CSS%20Modules-000?style=for-the-badge&logo=cssmodules&logoColor=white)

![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=FFD62E)

![Axios](https://img.shields.io/badge/axios-671ddf?&style=for-the-badge&logo=axios&logoColor=white)

![Zod](https://img.shields.io/badge/Zod-000000?style=for-the-badge&logo=zod&logoColor=3068B7)



## 📄 Additional Resources



![Google_Fonts](https://img.shields.io/badge/Google%20Fonts-4285F4?style=for-the-badge&logo=googlefonts&logoColor=white)



- **Typography**: Utilized Google Fonts for the project's typography.



## 🌐 API Used

The API used for this project is [OpenWeather](https://openweathermap.org/).



## 📚 What I Learned

This is the first project where I learned to securely consume an API, ensuring the JSON response matches the defined types. I also learned various methods to type API results, such as using Types, Type Guards, Zod, or Vailbot. While I am using Zod in this project, other methods are available in the code as examples. Additionally, I learned how to style the project using CSS Modules.



## 🖼️ Screenshots



![mockup-browser-2](public/image/mockup-browser-2.png)

![mockup-browser](public/image/mockup-browser.png)



### Error message if user donsen't adds a city and country

![mockup-browser-3](public/image/mockup-browser-3.png)



### Error message if city donsen't exists

![mockup-browser-4](public/image/mockup-browser-4.png)



## 📬 Contact Information



[![My_Portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://aimarbusta.dev/)

[![LinkedIn](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/aimarbustamante/)

[![Instagram](https://img.shields.io/badge/Instagram-E4405F?style=for-the-badge&logo=instagram&logoColor=white)](https://www.instagram.com/aimarbusta.dev/) 

[![Email](https://img.shields.io/badge/Microsoft_Outlook-0078D4?style=for-the-badge&logo=microsoft-outlook&logoColor=white)](mailto:[email protected]) 

[![WhatsApp](https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge&logo=whatsapp&logoColor=white)](https://wa.me/65167602) 

[![Frontend_Mentor](https://img.shields.io/badge/Frontend_Mentor-3F54A3?style=for-the-badge&logo=frontendmentor&logoColor=white)](https://www.frontendmentor.io/profile/AimarBustamante)