WeatherPro 🌦️

A sleek, animated weather dashboard built with React.js and Node.js that provides real-time weather data and forecasts for cities worldwide.

🌟 Live Demo

View Live Demo

✨ Key Features

City Search: Search for weather data in any city worldwide with autocomplete suggestions
Real-time Weather: Display current temperature, humidity, wind speed, pressure, and visibility
5-Day Forecast: Comprehensive weather forecast with daily highs/lows and conditions
Favorite Cities: Save up to 5 favorite cities in localStorage for quick access
Temperature Units: Toggle between Celsius and Fahrenheit
Responsive Design: Fully responsive layout optimized for mobile, tablet, and desktop
Weather-based Backgrounds: Dynamic gradient backgrounds that change based on weather conditions
Developer Portfolio: Integrated About section showcasing developer profile
Modern UI: Clean, professional design with smooth animations and transitions

📸 Screenshots

🛠️ Tech Stack

Frontend: React.js, TypeScript, Tailwind CSS
Backend: Node.js, Express.js
API: OpenWeatherMap API
State Management: TanStack Query (React Query)
Styling: Tailwind CSS with custom gradients
Icons: Lucide React
Deployment: Ready for Vercel, Netlify, or similar platforms

📁 Project Structure

weather-dashboard/
├── client/                 # Frontend React Application
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── lib/           # Utility functions and API client
│   │   └── hooks/         # Custom React hooks
├── server/                # Backend Node.js API
│   ├── index.ts          # Express server setup
│   ├── routes.ts         # API routes and weather data fetching
│   └── storage.ts        # Storage interface (in-memory)
├── shared/               # Shared TypeScript schemas
└── README.md            # Project documentation

🚀 How to Run Locally

Clone the repository

git clone https://github.com/yourusername/weather-dashboard
cd weather-dashboard

Install dependencies
```
npm install
```
Start the development server
```
npm run dev
```
Open your browser
Navigate to http://localhost:5000 to view the application.

🌐 Features in Detail

Weather Search

Type any city name to get instant autocomplete suggestions
Select from dropdown or press Enter to search
Supports cities worldwide with country and state information

Favorite Cities

Click "Add Current" to save the current city to favorites
Quick access to saved cities with one click
Manage up to 5 favorite locations
Persistent storage using browser localStorage

Responsive Design

Mobile-first approach with touch-friendly interfaces
Horizontal scrolling forecast cards on mobile devices
Adaptive grid layouts for different screen sizes
Optimized typography and spacing for all devices

Weather Backgrounds

Dynamic gradient backgrounds that change based on weather conditions
Clear skies: Bright blue and yellow gradients
Rainy weather: Dark blue and gray tones
Cloudy conditions: Neutral gray gradients
Snow: Light blue and white themes

📱 Mobile Optimization

Touch-friendly interface with large tap targets
Horizontal scrolling for forecast cards
Optimized text sizes and spacing
Fast loading with optimized assets

🎨 Customization

The app uses Tailwind CSS for styling, making it easy to customize:

Modify colors in client/src/index.css
Update weather backgrounds in the CSS weather classes
Customize component styles in individual component files

📊 API Integration

Uses OpenWeatherMap API for:

Current weather data
5-day weather forecasts
City geocoding and search suggestions
Real-time weather updates

🔒 Privacy & Data

No user data is stored on servers
Favorite cities saved locally in browser storage
Weather data fetched in real-time from OpenWeatherMap
No tracking or analytics

📄 License

MIT License - feel free to use this project for learning or commercial purposes.

🙏 Acknowledgments

Weather data provided by OpenWeatherMap
Icons by Lucide React
Built with React and Node.js

Created by [Your Name] - Full-Stack Web Developer
Portfolio | GitHub | LinkedIn

shivansh-16/Weather-Pro