Weather Web

A modern, responsive weather application built with React, TypeScript, and Tailwind CSS. This project serves as a robust boilerplate for building weather-related applications with a focus on performance, aesthetics, and user experience.

Features

• Real-time Weather: Current temperature, weather conditions, and "feels like" temperature.
• Detailed Forecasts: 24-hour hourly forecast and 7-day daily forecast.
• Weather Details: Humidity, wind speed, UV index, and visibility.
• Interactive Charts: Visual temperature trends using Recharts.
• Air Quality: Real-time air quality index (AQI) based on location.
• Personalization:
  • Toggle between Celsius and Fahrenheit.
  • Toggle between km/h and mph.
  • Light and Dark mode support.
  • Favorite cities management.
• Animations: Smooth transitions and interactions powered by Framer Motion.
• Responsive Design: Optimized for mobile, tablet, and desktop devices.
• Glassmorphism UI: Modern UI design using shadcn/ui and custom glass effects.

Tech Stack

• Framework: React (Vite)
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Charts: Recharts
• Animations: Framer Motion
• Icons: Lucide React
• State Management: TanStack Query (React Query)
• Routing: React Router

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or bun

Installation

1. Clone the repository:

   git clone https://github.com/Itz-Anya/Weather-App.git

2. Install dependencies:

   npm install
   # or
   bun install

3. Start the development server:

   npm run dev
   # or
   bun dev

4. Open http://localhost:8080 in your browser.

Credits

Created with ❤️ by Anya & Murali . Join us at Sylveon Lab.

License

This project is licensed under the MIT License.