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: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/aimarbustamante/weather-app
• Owner: AimarBustamante
• Created: 2024-07-20T00:11:22.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-07-20T00:26:29.000Z (10 months ago)
• Last Synced: 2025-02-01T18:12:09.430Z (4 months ago)
• Topics: api, axios, axios-react, cssmodules, cssmodules-react, react, typescript, vite, weather, weather-api, weather-app, web-app, zod
• Language: TypeScript
• Homepage: https://weather-app-004.netlify.app/
• Size: 1.65 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

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)