Loading...

Weather app

#React#TypeScript#Tailwind

Monday, November 4, 2024

View Live Demo

This Weather Dashboard is a sophisticated, modern application developed with React and TypeScript, offering users a comprehensive platform for accessing real-time weather data, forecasts, and location-based insights. By leveraging the OpenWeatherMap API, it fetches accurate weather information tailored to the user's current location or specified cities, including details like temperature, humidity, wind speed, and atmospheric conditions. The app includes advanced features such as managing favorite cities for quick access, hourly temperature forecasts for planning ahead, and an auto-refresh mechanism to ensure data stays up-to-date without manual intervention. Its responsive design ensures seamless usability on desktops, tablets, and mobiles, with a clean interface that incorporates dark/light mode toggles for better accessibility. The project structure is well-organized, separating concerns into API utilities, reusable components, custom hooks, and pages, which demonstrates best practices in modular development. Built with Vite for fast bundling and Tailwind CSS for styling, it emphasizes performance and maintainability. Screenshots in the repository highlight the app's visual appeal in both themes, making it an excellent showcase of integrating external APIs with frontend technologies for practical, everyday utility.

Technologies: React, TypeScript, Vite, Tailwind CSS, React Router, Sonner for toast notifications, OpenWeatherMap API.

Key Features:

  • Real-time weather data fetched based on user location.
  • Search and display weather for specific cities.
  • Favorite cities management for personalized tracking.
  • Hourly temperature forecasts with detailed visualizations.
  • Comprehensive weather details including humidity, wind, and more.
  • Auto-refresh functionality to keep data current.
  • Fully responsive design with dark/light mode support.
screenshot
Pooya Samimi

© 2025 Pooya Samimi