Weather Dashboard - API Integration Demo

A modern weather application built with React, Vite, and Tailwind CSS that demonstrates API integration capabilities. This project showcases real-time weather data fetching, local storage management, and responsive UI design.

🌟 Features

• API Integration: Connects to OpenWeatherMap API for real-time weather data
• Mock Data Support: Includes demo mode with simulated weather data for testing
• Search Functionality: Search weather by city name with autocomplete suggestions
• Popular Cities: Quick access to weather for major Indian cities
• Search History: Stores and displays recent searches with local storage
• Temperature Conversion: Toggle between Celsius and Fahrenheit
• Responsive Design: Mobile-first design with Tailwind CSS
• Modern UI: Glass morphism effects and smooth animations
• Error Handling: Graceful error handling with user-friendly messages

🏗️ Architecture

Data Flow

User Input → Search Form → API Call → Weather Data → State Update → UI Render
     ↓
Local Storage ← Search History ← Weather Response

Component Structure

App.jsx (Main container)
├── SearchForm.jsx (City input and popular cities)
├── WeatherCard.jsx (Weather display with temperature conversion)
├── LoadingSpinner.jsx (Loading state indicator)
├── ErrorMessage.jsx (Error handling display)
└── Search History (Stored searches with localStorage)

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Git

Installation

1. Clone the repository

   git clone https://github.com/Kanchan3D/weather-app.git
   cd weather-app

2. Install dependencies

   npm install

3. Install Tailwind CSS

   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

4. Configure Tailwind CSS Update tailwind.config.js:

   /** @type {import('tailwindcss').Config} */
   export default {
     content: [
       "./index.html",
       "./src/**/*.{js,ts,jsx,tsx}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }

5. Start the development server

   npm run dev

6. Open your browser Navigate to http://localhost:5173

🔧 Configuration

API Setup (Optional)

To use real weather data instead of mock data:

1. Get a free API key from OpenWeatherMap
2. Replace the demo API key in src/App.jsx:

   const API_KEY = 'your_actual_api_key_here'

Environment Variables

Create a .env file in the root directory:

VITE_WEATHER_API_KEY=your_openweathermap_api_key

Then update the API key usage in the code:

const API_KEY = import.meta.env.VITE_WEATHER_API_KEY || 'demo'

📱 Usage

1. Search for Weather: Enter any city name in the search bar
2. Quick Access: Click on popular Indian cities for instant weather data
3. View Details: See temperature, humidity, wind speed, and pressure
4. Convert Temperature: Click the temperature unit toggle (°C/°F)
5. Browse History: View and revisit your recent searches
6. Clear History: Remove all stored search history

🌐 API Integration Details

OpenWeatherMap API

• Endpoint: https://api.openweathermap.org/data/2.5/weather
• Method: GET
• Parameters:
  • q: City name
  • appid: API key
  • units: metric (for Celsius)

Mock Data Features

• Realistic temperature ranges (5-35°C)
• Random weather conditions (Clear, Clouds, Rain, Snow, Mist)
• Indian city mapping with proper country names
• Simulated wind speed and pressure data

🎨 UI/UX Features

• Glass Morphism: Modern translucent design elements
• Gradient Backgrounds: Beautiful blue gradient themes
• Responsive Grid: Adaptive layout for all screen sizes
• Smooth Animations: CSS transitions and hover effects
• Loading States: Visual feedback during API calls
• Error States: Clear error messages with retry options

🗂️ Project Structure

weather-app/
├── public/
│   ├── vite.svg
│   └── index.html
├── src/
│   ├── components/
│   │   ├── WeatherCard.jsx
│   │   ├── SearchForm.jsx
│   │   ├── ErrorMessage.jsx
│   │   └── LoadingSpinner.jsx
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── package.json
├── vite.config.js
├── tailwind.config.js
└── README.md

🧪 Testing

Run the application in different scenarios:

1. Demo Mode: Default mode with mock data
2. Real API: With actual OpenWeatherMap API key
3. Error Handling: Try invalid city names
4. Responsive Design: Test on different screen sizes
5. Local Storage: Verify search history persistence

🚧 Challenges Faced & Solutions

1. API Rate Limiting

• Challenge: OpenWeatherMap free tier has request limits
• Solution: Implemented mock data system for development and demo purposes

2. State Management

• Challenge: Managing multiple states (loading, error, data, history)
• Solution: Used React hooks with clear state separation and proper cleanup

3. Local Storage

• Challenge: Persisting search history across sessions
• Solution: Implemented localStorage with JSON serialization and error handling

4. Responsive Design

• Challenge: Creating a mobile-first responsive layout
• Solution: Used Tailwind CSS utility classes with responsive breakpoints

5. Temperature Conversion

• Challenge: Real-time temperature unit conversion
• Solution: Implemented client-side conversion with state management

🔮 Future Enhancements

• 5-day weather forecast
• Geolocation-based weather
• Weather maps integration
• Push notifications for weather alerts
• Dark/light theme toggle
• Weather comparison between cities
• Export weather data as PDF/CSV
• Social sharing features

🛠️ Technologies Used

• Frontend Framework: React 18
• Build Tool: Vite
• Styling: Tailwind CSS
• API: OpenWeatherMap API
• Storage: Browser localStorage
• Icons: SVG icons
• Deployment: Ready for Vercel/Netlify

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📧 Contact

• Developer: Kanchan3D
• GitHub: @Kanchan3D
• Repository: weather-app

🙏 Acknowledgments

• OpenWeatherMap for providing the weather API
• Tailwind CSS for the utility-first CSS framework
• Vite for the fast build tool
• React team for the excellent framework

---

Built with ❤️ using React + Vite + Tailwind CSS