Weather Radar TypeScript is a web application that provides real-time temperature data for different cities around the world. It allows users to search for cities and instantly receive up-to-date weather information, offering a simple and intuitive interface for tracking weather conditions globally.
You can check out the live version of the Weather Radar TypeScript app deployed on Vercel by clicking the link below:
Weather Radar TypeScript - Live Demo
- External API Integration: Fetches real-time weather data from the OpenWeatherMap API to provide users with accurate and up-to-date weather information.
- Responsive Design: Ensures optimal user experience across various devices, from desktop to mobile.
- Data Validation with Zod: Utilizes Zod for type-safe validation and simplification of API responses, ensuring that the application handles data consistently and correctly.
- Error Handling: Comprehensive error handling is implemented across the app, providing users with meaningful feedback in case of any issues.
The project was developed using:
- React: A JavaScript library for building user interfaces.
- Vite: A fast build tool for modern web applications.
- TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
- Custom Hooks: Utilized to manage the state of the API response efficiently, encapsulating logic for fetching and handling data.
- Zod: A TypeScript-first schema declaration and validation library that simplifies API response handling and ensures type safety.
- OpenWeatherMap API: Integrated for real-time weather data, providing users with current weather conditions and forecasts.
- CSS Modules: Employed for modular and scoped CSS, allowing for better organization and avoiding class name collisions.
- Spinkit: A CSS spinner library by Tobias Ahlin, used to enhance the user experience with visually appealing loading indicators.
- Axios: For making HTTP requests to the OpenWeatherMap API, ensuring efficient data retrieval.
- vercel: A platform for deploying and hosting web applications quickly and efficiently. It offers automatic deployment, preview of changes, and a global CDN to enhance performance.
-
Clone the repository:
git clone https://github.com/habidbesp/Weather-Radar-TypeScript.git
-
Navigate to the project directory:
cd Weather-Radar-TypeScript -
Install dependencies:
npm install
-
Run the project in development mode:
npm run dev
-
Open in your browser: http://localhost:5173
This application was developed as part of the Udemy course:
"React: Hooks y State hasta TypeScript, Zod, Zustand, React Query, Next.js, React Router, MERN y PERN"
Taught by: Juan Pablo De la Torre Valdez
More about the course
Contributions are welcome! If you have suggestions, ideas, or improvements, feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.