🌤️ Module 4 Project: Weather Dashboard

Core Features (Must Have)

• 🔍 City Search - Search for cities with debounced input
• 🌡️ Current Weather - Temperature, conditions, humidity, wind speed
• 📅 5-Day Forecast - Daily high/low temperatures and conditions
• 💾 Caching - Cache weather data to reduce API calls
• ⚠️ Error Handling - Graceful error messages and retry options
• ⏳ Loading States - Skeleton screens and spinners
• 📱 Responsive Design - Mobile-friendly layout

Advanced Features (Should Have)

• ⭐ Favorites - Save favorite cities to localStorage
• 🔄 Auto-Refresh - Update weather data every 10 minutes
• 🌍 Geolocation - Get weather for user's current location
• 🎨 Dynamic Backgrounds - Change UI based on weather conditions
• 📊 Weather Charts - Visualize temperature trends

Bonus Features (Nice to Have)

• 🌓 Dark Mode - Toggle between light and dark themes
• 🌡️ Unit Toggle - Switch between Celsius and Fahrenheit
• 🌐 Multiple Languages - i18n support
• 📍 Map View - Show city on a map
• 🔔 Weather Alerts - Notifications for severe weather

✅ Module 4 Concepts

• useEffect - Fetching data, cleanup, dependency arrays
• Data Fetching - Async/await, loading states, error handling
• Custom Hooks - useWeather, useFavorites, useDebounce
• Advanced Patterns - Debouncing, caching, race conditions
• API Integration - Service layer, TypeScript types, environment variables

Your completed weather dashboard will look something like this:

┌─────────────────────────────────────────────┐
│  🌤️ Weather Dashboard                      │
│  ┌───────────────────────────────────────┐ │
│  │ 🔍 Search cities...                   │ │
│  └───────────────────────────────────────┘ │
│                                             │
│  ┌─────────────────────────────────────┐   │
│  │ 📍 San Francisco, CA                │   │
│  │                                     │   │
│  │    ☀️                              │   │
│  │    22°C                            │   │
│  │    Sunny                           │   │
│  │                                     │   │
│  │    💧 Humidity: 65%                │   │
│  │    💨 Wind: 12 km/h                │   │
│  │    👁️ Visibility: 10 km            │   │
│  └─────────────────────────────────────┘   │
│                                             │
│  📅 5-Day Forecast                          │
│  ┌───┬───┬───┬───┬───┐                     │
│  │Mon│Tue│Wed│Thu│Fri│                     │
│  │☀️ │⛅│🌧️│⛈️ │☀️ │                     │
│  │24°│22°│19°│18°│23°│                     │
│  └───┴───┴───┴───┴───┘                     │
│                                             │
│  ⭐ Favorites: NYC, London, Tokyo          │
└─────────────────────────────────────────────┘

💡 Learning Approach

This project guide is structured to walk you through building the app step by step. Each section includes:

• Clear objectives - What you'll build in this section
• Code examples - Complete, working code you can use
• Explanations - Why we're doing things this way
• Challenges - Optional extensions to try on your own

Tip: Try to implement features yourself first, then check the provided solutions!

# Create a new Vite project with React and TypeScript
npm create vite@latest weather-dashboard -- --template react-ts

# Navigate into the project
cd weather-dashboard

# Install dependencies
npm install

# Start the development server
npm run dev

# Optional: Install date formatting library
npm install date-fns

# Optional: Install icons (if you want to use React Icons)
npm install react-icons

Remove the default Vite boilerplate:

• Delete src/App.css
• Delete src/index.css (we'll create our own)
• Clear the content of src/App.tsx

/* src/index.css */
:root {
    --primary: #667eea;
    --primary-dark: #5a67d8;
    --secondary: #764ba2;
    --success: #48bb78;
    --danger: #f56565;
    --warning: #ed8936;
    --info: #4299e1;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f7fafc;
    --text-primary: #2d3748;
    --text-secondary: #718096;
    --border: #e2e8f0;
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    --radius: 8px;
    --spacing: 1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.card {
    background: var(--bg-primary);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
}

.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Loading spinner */
.spinner {
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 2rem auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error message */
.error {
    background: #fff5f5;
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 1rem;
    border-radius: var(--radius);
    margin: 1rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }
    
    .card {
        padding: 1rem;
    }
}

// src/App.tsx
import { useState } from 'react';
import './index.css';

function App() {
    return (
        <div className="container">
            <header>
                <h1 style={{ 
                    textAlign: 'center', 
                    margin: '2rem 0',
                    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    fontSize: '2.5rem'
                }}>
                    🌤️ Weather Dashboard
                </h1>
            </header>
            
            <main>
                <div className="card">
                    <p>Weather dashboard coming soon...</p>
                </div>
            </main>
        </div>
    );
}

export default App;

✅ Checkpoint

At this point, you should have:

• ✅ A working Vite + React + TypeScript project
• ✅ Basic styles defined in index.css
• ✅ A clean App.tsx with a header
• ✅ The development server running at localhost:5173

You should see "Weather Dashboard" heading in your browser! 🎉

1. Go to OpenWeatherMap.org
2. Click "Sign In" → "Create an Account"
3. Fill in your details and verify your email
4. Go to "API keys" tab in your account
5. Copy your default API key (or generate a new one)

Note: It can take up to 2 hours for your API key to activate, but usually it's instant.

Create a .env file in your project root:

# .env
VITE_WEATHER_API_KEY=your_api_key_here
VITE_WEATHER_API_URL=https://api.openweathermap.org/data/2.5

Create a .env.example for your repository:

# .env.example
VITE_WEATHER_API_KEY=
VITE_WEATHER_API_URL=https://api.openweathermap.org/data/2.5

Add .env to your .gitignore:

# .gitignore
.env
.env.local
.env.*.local

// src/config/env.ts
export const config = {
    weatherApiKey: import.meta.env.VITE_WEATHER_API_KEY,
    weatherApiUrl: import.meta.env.VITE_WEATHER_API_URL || 'https://api.openweathermap.org/data/2.5',
    isDevelopment: import.meta.env.DEV,
    isProduction: import.meta.env.PROD,
} as const;

// Validate required environment variables
if (!config.weatherApiKey) {
    throw new Error('VITE_WEATHER_API_KEY is required in .env file');
}

⚠️ Important Notes

• Free tier limits: 60 calls/minute, 1,000,000 calls/month
• Units: Add &units=metric for Celsius, &units=imperial for Fahrenheit
• Default: Temperature is in Kelvin if no units specified
• API key: Never commit your actual API key to version control!

✅ Checkpoint

At this point, you should have:

• ✅ An OpenWeatherMap account with an API key
• ✅ .env file with your API key (not committed to git)
• ✅ .env.example file (safe to commit)
• ✅ config/env.ts file that validates the API key

Ready to start making API calls! 🚀

weather-dashboard/
├── src/
│   ├── components/
│   │   ├── SearchBar.tsx
│   │   ├── CurrentWeather.tsx
│   │   ├── ForecastCard.tsx
│   │   ├── ForecastList.tsx
│   │   ├── FavoritesList.tsx
│   │   ├── ErrorDisplay.tsx
│   │   └── LoadingSpinner.tsx
│   ├── hooks/
│   │   ├── useWeather.ts
│   │   ├── useDebounce.ts
│   │   ├── useFavorites.ts
│   │   └── useGeolocation.ts
│   ├── services/
│   │   ├── weatherService.ts
│   │   └── cacheService.ts
│   ├── types/
│   │   ├── weather.ts
│   │   └── index.ts
│   ├── utils/
│   │   ├── formatters.ts
│   │   └── weatherIcons.ts
│   ├── config/
│   │   └── env.ts
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── .env
├── .env.example
├── .gitignore
├── package.json
├── tsconfig.json
└── vite.config.ts

# From your project root, create all folders
mkdir -p src/components src/hooks src/services src/types src/utils src/config

💡 Organization Philosophy

• components/ - Reusable UI components
• hooks/ - Custom hooks for logic reuse
• services/ - API calls and business logic
• types/ - TypeScript type definitions
• utils/ - Helper functions
• config/ - Configuration and constants

// src/types/weather.ts

// Current weather data from API
export interface WeatherData {
    coord: {
        lon: number;
        lat: number;
    };
    weather: Array<{
        id: number;
        main: string;
        description: string;
        icon: string;
    }>;
    main: {
        temp: number;
        feels_like: number;
        temp_min: number;
        temp_max: number;
        pressure: number;
        humidity: number;
    };
    wind: {
        speed: number;
        deg: number;
    };
    clouds: {
        all: number;
    };
    dt: number;
    sys: {
        country: string;
        sunrise: number;
        sunset: number;
    };
    name: string;
    visibility?: number;
}

// Forecast data from API
export interface ForecastData {
    list: Array<{
        dt: number;
        main: {
            temp: number;
            feels_like: number;
            temp_min: number;
            temp_max: number;
            humidity: number;
        };
        weather: Array<{
            id: number;
            main: string;
            description: string;
            icon: string;
        }>;
        wind: {
            speed: number;
        };
        dt_txt: string;
    }>;
    city: {
        name: string;
        country: string;
        sunrise: number;
        sunset: number;
    };
}

// Processed daily forecast
export interface DailyForecast {
    date: string;
    temp: number;
    tempMin: number;
    tempMax: number;
    description: string;
    icon: string;
    humidity: number;
    windSpeed: number;
}

// City search result
export interface City {
    name: string;
    country: string;
    lat: number;
    lon: number;
}

// src/services/cacheService.ts

interface CacheEntry<T> {
    data: T;
    timestamp: number;
}

class CacheService {
    private cache = new Map<string, CacheEntry<any>>();
    private defaultTTL = 10 * 60 * 1000; // 10 minutes

    set<T>(key: string, data: T, ttl?: number): void {
        this.cache.set(key, {
            data,
            timestamp: Date.now()
        });
    }

    get<T>(key: string, ttl?: number): T | null {
        const entry = this.cache.get(key);
        
        if (!entry) return null;

        const age = Date.now() - entry.timestamp;
        const maxAge = ttl || this.defaultTTL;

        if (age > maxAge) {
            this.cache.delete(key);
            return null;
        }

        return entry.data;
    }

    has(key: string, ttl?: number): boolean {
        return this.get(key, ttl) !== null;
    }

    clear(): void {
        this.cache.clear();
    }

    delete(key: string): void {
        this.cache.delete(key);
    }
}

export const cacheService = new CacheService();

✅ Complete Weather Service

// src/services/weatherService.ts
import { config } from '@/config/env';
import { cacheService } from './cacheService';
import { WeatherData, ForecastData, DailyForecast } from '@/types/weather';

class WeatherService {
    private baseUrl = config.weatherApiUrl;
    private apiKey = config.weatherApiKey;

    private buildUrl(endpoint: string, params: Record<string, string>): string {
        const searchParams = new URLSearchParams({
            ...params,
            appid: this.apiKey,
            units: 'metric' // Use Celsius
        });

        return `${this.baseUrl}${endpoint}?${searchParams.toString()}`;
    }

    async getCurrentWeather(city: string): Promise<WeatherData> {
        const cacheKey = `weather-${city.toLowerCase()}`;
        
        // Check cache first
        const cached = cacheService.get<WeatherData>(cacheKey);
        if (cached) {
            console.log('Returning cached weather data for:', city);
            return cached;
        }

        // Fetch from API
        const url = this.buildUrl('/weather', { q: city });
        
        try {
            const response = await fetch(url);
            
            if (!response.ok) {
                if (response.status === 404) {
                    throw new Error(`City "${city}" not found`);
                }
                throw new Error(`Failed to fetch weather data: ${response.statusText}`);
            }

            const data: WeatherData = await response.json();
            
            // Cache the result
            cacheService.set(cacheKey, data);
            
            return data;
        } catch (error) {
            if (error instanceof Error) {
                throw error;
            }
            throw new Error('An unexpected error occurred');
        }
    }

    async getWeatherByCoords(lat: number, lon: number): Promise<WeatherData> {
        const cacheKey = `weather-coords-${lat}-${lon}`;
        
        // Check cache first
        const cached = cacheService.get<WeatherData>(cacheKey);
        if (cached) {
            console.log('Returning cached weather data for coordinates');
            return cached;
        }

        // Fetch from API
        const url = this.buildUrl('/weather', {
            lat: lat.toString(),
            lon: lon.toString()
        });
        
        try {
            const response = await fetch(url);
            
            if (!response.ok) {
                throw new Error(`Failed to fetch weather data: ${response.statusText}`);
            }

            const data: WeatherData = await response.json();
            
            // Cache the result
            cacheService.set(cacheKey, data);
            
            return data;
        } catch (error) {
            if (error instanceof Error) {
                throw error;
            }
            throw new Error('An unexpected error occurred');
        }
    }

    async getForecast(city: string): Promise<DailyForecast[]> {
        const cacheKey = `forecast-${city.toLowerCase()}`;
        
        // Check cache first
        const cached = cacheService.get<DailyForecast[]>(cacheKey);
        if (cached) {
            console.log('Returning cached forecast data for:', city);
            return cached;
        }

        // Fetch from API
        const url = this.buildUrl('/forecast', { q: city });
        
        try {
            const response = await fetch(url);
            
            if (!response.ok) {
                if (response.status === 404) {
                    throw new Error(`City "${city}" not found`);
                }
                throw new Error(`Failed to fetch forecast data: ${response.statusText}`);
            }

            const data: ForecastData = await response.json();
            
            // Process forecast data - group by day and get daily high/low
            const dailyForecasts = this.processForecastData(data);
            
            // Cache the result
            cacheService.set(cacheKey, dailyForecasts);
            
            return dailyForecasts;
        } catch (error) {
            if (error instanceof Error) {
                throw error;
            }
            throw new Error('An unexpected error occurred');
        }
    }

    private processForecastData(data: ForecastData): DailyForecast[] {
        // Group forecast data by day
        const dailyData = new Map<string, typeof data.list[0][]>();

        data.list.forEach(item => {
            const date = item.dt_txt.split(' ')[0]; // Get date part (YYYY-MM-DD)
            
            if (!dailyData.has(date)) {
                dailyData.set(date, []);
            }
            
            dailyData.get(date)!.push(item);
        });

        // Convert to DailyForecast array (take first 5 days)
        const forecasts: DailyForecast[] = [];
        
        Array.from(dailyData.entries()).slice(0, 5).forEach(([date, items]) => {
            // Calculate daily averages and extremes
            const temps = items.map(item => item.main.temp);
            const tempMin = Math.min(...temps);
            const tempMax = Math.max(...temps);
            const avgTemp = temps.reduce((a, b) => a + b) / temps.length;
            
            // Use midday weather data (around 12:00) if available
            const middayItem = items.find(item => item.dt_txt.includes('12:00:00')) || items[0];

            forecasts.push({
                date,
                temp: Math.round(avgTemp),
                tempMin: Math.round(tempMin),
                tempMax: Math.round(tempMax),
                description: middayItem.weather[0].description,
                icon: middayItem.weather[0].icon,
                humidity: middayItem.main.humidity,
                windSpeed: middayItem.wind.speed
            });
        });

        return forecasts;
    }
}

export const weatherService = new WeatherService();

💡 Service Layer Benefits

• Centralized API logic - All weather calls in one place
• Built-in caching - Reduces API calls and improves performance
• Error handling - Consistent error messages
• Type safety - Full TypeScript support
• Testability - Easy to mock for testing

// src/utils/formatters.ts
import { format } from 'date-fns';

export function formatTemperature(temp: number): string {
    return `${Math.round(temp)}°C`;
}

export function formatDate(dateString: string): string {
    const date = new Date(dateString);
    return format(date, 'EEE, MMM d');
}

export function formatTime(timestamp: number): string {
    return format(new Date(timestamp * 1000), 'h:mm a');
}

export function capitalizeWords(str: string): string {
    return str
        .split(' ')
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ');
}

// src/utils/weatherIcons.ts

// Map OpenWeatherMap icon codes to emojis
export function getWeatherEmoji(iconCode: string): string {
    const iconMap: Record<string, string> = {
        '01d': '☀️', // clear sky day
        '01n': '🌙', // clear sky night
        '02d': '⛅', // few clouds day
        '02n': '☁️', // few clouds night
        '03d': '☁️', // scattered clouds
        '03n': '☁️',
        '04d': '☁️', // broken clouds
        '04n': '☁️',
        '09d': '🌧️', // shower rain
        '09n': '🌧️',
        '10d': '🌦️', // rain day
        '10n': '🌧️', // rain night
        '11d': '⛈️', // thunderstorm
        '11n': '⛈️',
        '13d': '❄️', // snow
        '13n': '❄️',
        '50d': '🌫️', // mist
        '50n': '🌫️'
    };

    return iconMap[iconCode] || '🌤️';
}

export function getWeatherBackground(iconCode: string): string {
    const first2 = iconCode.slice(0, 2);
    
    const backgroundMap: Record<string, string> = {
        '01': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', // clear
        '02': 'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)', // few clouds
        '03': 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)', // scattered clouds
        '04': 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)', // broken clouds
        '09': 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', // shower rain
        '10': 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', // rain
        '11': 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)', // thunderstorm
        '13': 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)', // snow
        '50': 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'  // mist
    };

    return backgroundMap[first2] || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
}

✅ Checkpoint

At this point, you should have:

• ✅ Complete type definitions for weather data
• ✅ Cache service for storing API responses
• ✅ Weather service with getCurrentWeather, getWeatherByCoords, and getForecast methods
• ✅ Utility functions for formatting and icons

Your API layer is ready! Time to build custom hooks. 🎣

// src/hooks/useDebounce.ts
import { useState, useEffect } from 'react';

export function useDebounce<T>(value: T, delay: number): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(value);

    useEffect(() => {
        // Set up a timer to update the debounced value
        const timer = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        // Clean up the timer if value changes before delay expires
        return () => {
            clearTimeout(timer);
        };
    }, [value, delay]);

    return debouncedValue;
}

✅ Complete useWeather Hook

// src/hooks/useWeather.ts
import { useState, useEffect } from 'react';
import { weatherService } from '@/services/weatherService';
import { WeatherData, DailyForecast } from '@/types/weather';

interface UseWeatherReturn {
    weather: WeatherData | null;
    forecast: DailyForecast[];
    loading: boolean;
    error: string | null;
    fetchWeather: (city: string) => Promise<void>;
    fetchWeatherByCoords: (lat: number, lon: number) => Promise<void>;
}

export function useWeather(): UseWeatherReturn {
    const [weather, setWeather] = useState<WeatherData | null>(null);
    const [forecast, setForecast] = useState<DailyForecast[]>([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const fetchWeather = async (city: string) => {
        if (!city.trim()) return;

        setLoading(true);
        setError(null);

        try {
            const [weatherData, forecastData] = await Promise.all([
                weatherService.getCurrentWeather(city),
                weatherService.getForecast(city)
            ]);

            setWeather(weatherData);
            setForecast(forecastData);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'Failed to fetch weather data');
            setWeather(null);
            setForecast([]);
        } finally {
            setLoading(false);
        }
    };

    const fetchWeatherByCoords = async (lat: number, lon: number) => {
        setLoading(true);
        setError(null);

        try {
            const weatherData = await weatherService.getWeatherByCoords(lat, lon);
            setWeather(weatherData);

            // Fetch forecast using city name from weather data
            const forecastData = await weatherService.getForecast(weatherData.name);
            setForecast(forecastData);
        } catch (err) {
            setError(err instanceof Error ? err.message : 'Failed to fetch weather data');
            setWeather(null);
            setForecast([]);
        } finally {
            setLoading(false);
        }
    };

    return {
        weather,
        forecast,
        loading,
        error,
        fetchWeather,
        fetchWeatherByCoords
    };
}

// src/hooks/useFavorites.ts
import { useState, useEffect } from 'react';

const FAVORITES_KEY = 'weather-favorites';

export function useFavorites() {
    const [favorites, setFavorites] = useState<string[]>(() => {
        try {
            const stored = localStorage.getItem(FAVORITES_KEY);
            return stored ? JSON.parse(stored) : [];
        } catch {
            return [];
        }
    });

    // Save to localStorage whenever favorites change
    useEffect(() => {
        try {
            localStorage.setItem(FAVORITES_KEY, JSON.stringify(favorites));
        } catch (error) {
            console.error('Failed to save favorites:', error);
        }
    }, [favorites]);

    const addFavorite = (city: string) => {
        setFavorites(prev => {
            if (prev.includes(city)) return prev;
            return [...prev, city];
        });
    };

    const removeFavorite = (city: string) => {
        setFavorites(prev => prev.filter(fav => fav !== city));
    };

    const isFavorite = (city: string): boolean => {
        return favorites.includes(city);
    };

    return {
        favorites,
        addFavorite,
        removeFavorite,
        isFavorite
    };
}

// src/hooks/useGeolocation.ts
import { useState } from 'react';

interface Coordinates {
    latitude: number;
    longitude: number;
}

interface UseGeolocationReturn {
    coordinates: Coordinates | null;
    loading: boolean;
    error: string | null;
    getCurrentPosition: () => void;
}

export function useGeolocation(): UseGeolocationReturn {
    const [coordinates, setCoordinates] = useState<Coordinates | null>(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const getCurrentPosition = () => {
        if (!navigator.geolocation) {
            setError('Geolocation is not supported by your browser');
            return;
        }

        setLoading(true);
        setError(null);

        navigator.geolocation.getCurrentPosition(
            (position) => {
                setCoordinates({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude
                });
                setLoading(false);
            },
            (error) => {
                setError('Failed to get your location. Please check permissions.');
                setLoading(false);
            }
        );
    };

    return {
        coordinates,
        loading,
        error,
        getCurrentPosition
    };
}

💡 Custom Hooks Benefits

• useDebounce - Delays search queries until user stops typing
• useWeather - Encapsulates all weather fetching logic
• useFavorites - Manages favorite cities with localStorage
• useGeolocation - Gets user's current location

✅ Checkpoint

At this point, you should have:

• ✅ useDebounce hook for delaying search input
• ✅ useWeather hook for fetching weather data
• ✅ useFavorites hook for managing favorite cities
• ✅ useGeolocation hook for getting user location

All the hooks are ready! Time to build UI components. 🎨

💡 Component Responsibilities

• SearchBar - City search with debouncing
• WeatherCard - Display current weather details
• ForecastCard - Single day forecast item
• ForecastList - Container for 5-day forecast
• FavoritesList - Manage favorite cities

✅ SearchBar Features

• Debounced Input - Waits 500ms after typing stops before searching
• Manual Search - Submit button for immediate search
• Loading State - Shows spinner and disables input during search
• Validation - Button disabled when input is empty
• Accessibility - Proper ARIA labels

💡 WeatherCard Features

• Dynamic Icons - Shows different emoji based on weather condition
• Comprehensive Data - Temperature, humidity, wind, pressure, visibility
• Sunrise/Sunset Times - Formatted local times
• Favorites Integration - Add/remove from favorites
• Temperature Formatting - Rounded to nearest degree
• Feels Like - Shows perceived temperature

⚠️ Forecast Data Processing

The OpenWeatherMap 5-day forecast API returns data in 3-hour intervals, giving you 40 data points. We filter this to get one forecast per day (preferably at noon) to create a clean 5-day view.

✅ FavoritesList Features

• Empty State - Helpful message when no favorites
• Quick Access - Click any favorite to load its weather
• Remove Button - Delete favorites with X button
• Active State - Highlights currently selected city
• Event Propagation - stopPropagation prevents conflicts

✅ Component Checklist

You should now have created:

• ✅ SearchBar.tsx - City search with debouncing
• ✅ WeatherCard.tsx - Current weather display
• ✅ ForecastCard.tsx - Single day forecast
• ✅ ForecastList.tsx - 5-day forecast container
• ✅ FavoritesList.tsx - Favorite cities management
• ✅ LoadingSpinner.tsx - Loading state
• ✅ ErrorMessage.tsx - Error handling
• ✅ App.css - Complete styling

💡 Design Principles Applied

• Component Composition - Small, focused components
• Props Interface - Clear TypeScript interfaces
• Conditional Rendering - Show/hide based on state
• Event Handling - User interactions
• Accessibility - ARIA labels and semantic HTML
• Responsive Design - Mobile-first approach

💡 App Component Responsibilities

• 🔄 Manage overall application state
• 🌐 Coordinate API calls using custom hooks
• 🎯 Handle user interactions (search, favorites, geolocation)
• 📊 Pass data to child components via props
• ⚠️ Manage global loading and error states
• 💾 Sync favorites with localStorage

✅ App Component Features

• State Management - Tracks selected city
• Hook Integration - Uses all custom hooks
• Auto-fetch - Loads weather when city changes
• Conditional Rendering - Shows loading/error/content states
• Event Handlers - Memoized with useCallback
• Geolocation Support - Get weather for current location

⚠️ Important: API Key Security

• Never commit your .env file to version control
• Add .env to your .gitignore file
• Use environment variables for sensitive data
• For production, use backend proxy to hide API keys

✅ Testing Checklist

1. Initial Load
   • App loads with default city (London)
   • Current weather displays correctly
   • 5-day forecast shows up
2. Search Functionality
   • Type a city name (e.g., "Tokyo")
   • Weather updates after 500ms delay
   • Loading spinner shows during fetch
3. Favorites
   • Click star to add city to favorites
   • Favorites persist after page refresh
   • Click favorite to load that city
   • Click X to remove from favorites
4. Geolocation
   • Click "Use My Location" button
   • Browser asks for location permission
   • Weather loads for current location
5. Error Handling
   • Search for invalid city (e.g., "asdfgh")
   • Error message displays
   • Click "Try Again" to retry
6. Responsive Design
   • Resize browser window
   • Layout adapts to different screen sizes
   • Test on mobile device

Issue #1: "API key not valid"

Solution:

• Verify your API key is correct in .env file
• Check that the variable name is VITE_OPENWEATHER_API_KEY
• Restart the development server after changing .env
• Wait a few minutes for new API keys to activate

Issue #2: "City not found"

Solution:

• Check spelling of city name
• Try adding country code (e.g., "Paris,FR")
• Use major cities that are definitely in the database

Issue #3: Geolocation not working

Solution:

• Ensure you're using HTTPS or localhost
• Check browser location permissions
• Some browsers block location on insecure connections

Issue #4: Favorites not persisting

Solution:

• Check browser's localStorage is enabled
• Check browser console for errors
• Clear localStorage and try again
• Test in different browser

✅ Section 8 Complete!

You've now built the complete main App component! Your weather dashboard should be fully functional with:

• ✅ Full application orchestration
• ✅ All components integrated
• ✅ Custom hooks working together
• ✅ Search, favorites, and geolocation
• ✅ Error handling and loading states
• ✅ Responsive design

🎯 Functional Testing

Search Feature

Favorites Feature

Geolocation Feature

Visual Testing Checklist

• ☐ All weather icons display correctly
• ☐ Temperature values are properly formatted
• ☐ Colors and gradients render smoothly
• ☐ Loading spinner animates properly
• ☐ Hover effects work on interactive elements
• ☐ No layout shifts or flickering
• ☐ Text is readable on all backgrounds
• ☐ Cards have proper spacing and alignment

Device Testing

Accessibility Checklist

• ☐ All interactive elements are keyboard accessible (Tab navigation)
• ☐ ARIA labels present on icon buttons
• ☐ Loading states announced to screen readers (aria-live)
• ☐ Error messages have proper role="alert"
• ☐ Color contrast meets WCAG AA standards (4.5:1)
• ☐ Focus indicators visible on all interactive elements
• ☐ Form inputs have associated labels

Performance Checks

• ☐ Initial page load under 2 seconds
• ☐ API calls are debounced (no excessive requests)
• ☐ No memory leaks (check DevTools Memory tab)
• ☐ Images and assets optimized
• ☐ Console has no errors or warnings
• ☐ Cache working properly (repeated city searches faster)

💡 Performance Tips

• Check Network Tab - Verify API calls aren't duplicated
• Use React DevTools - Identify unnecessary re-renders
• Test on Slow 3G - See how app performs on slow connections
• Monitor localStorage - Ensure it's not growing too large

Test Across Browsers

• ☐ Chrome (latest)
• ☐ Firefox (latest)
• ☐ Safari (latest)
• ☐ Edge (latest)
• ☐ Mobile browsers (iOS Safari, Chrome Mobile)

✅ Testing Complete!

Once you've completed all these tests and everything passes, your weather dashboard is ready for deployment! 🎉

💡 Popular Hosting Platforms

✅ Vercel Deployment Steps

1. Sign up - Visit vercel.com and sign up with GitHub
2. Import Project - Click "New Project" and select your repository
3. Configure Build Settings:
   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist
4. Add Environment Variables:
   • Key: VITE_OPENWEATHER_API_KEY
   • Value: Your API key
5. Deploy - Click "Deploy" and wait ~1 minute
6. Done! - Your app is live at your-app.vercel.app

Netlify Deployment Steps

1. Create netlify.toml configuration file:
   Copy

   # netlify.toml
   [build]
     command = "npm run build"
     publish = "dist"
   
   [[redirects]]
     from = "/*"
     to = "/index.html"
     status = 200

2. Sign up at netlify.com
3. Connect GitHub repository
4. Add environment variables in Site Settings
5. Deploy automatically on push

⚠️ GitHub Pages Limitations

• Environment variables must be handled differently (hardcode or use backend)
• No server-side functionality
• Only works with public repositories (free tier)

Best Practices for API Keys

• Never commit .env files - Always in .gitignore
• Use platform env vars - Set in Vercel/Netlify dashboard
• Consider a backend proxy - Hide API keys completely:
  Copy

  // Instead of calling API directly from frontend:
  // ❌ fetch(`https://api.openweathermap.org/...?appid=${API_KEY}`)
  
  // ✅ Call your backend which handles the API key:
  // fetch(`/api/weather?city=${city}`)

• Rate limiting - Implement on backend to prevent abuse
• Rotate keys - Change API keys periodically

✅ Before You Deploy

• ☐ All tests pass locally
• ☐ Build succeeds without errors (npm run build)
• ☐ Preview build works correctly (npm run preview)
• ☐ Environment variables configured
• ☐ .gitignore includes .env and node_modules
• ☐ README.md with project description
• ☐ License file added (MIT recommended)
• ☐ All console.logs removed or made conditional
• ☐ Error boundaries implemented
• ☐ Analytics added (optional)

Things to Monitor

• Error Tracking - Use Sentry or similar service
• Performance - Use Lighthouse or WebPageTest
• User Analytics - Google Analytics or Plausible
• API Usage - Monitor OpenWeatherMap dashboard for quota
• Uptime - Use UptimeRobot or StatusCake

💡 CI/CD Benefits

• Automatic Deployments - Push code, it goes live automatically
• Preview Deployments - Each PR gets its own preview URL
• Rollback Support - Easy to revert to previous versions
• No Downtime - Zero-downtime deployments

✅ Deployment Complete!

Congratulations! Your weather dashboard is now live and accessible to users worldwide. 🌍

What's Next?

• Share your deployment URL in the course forum
• Add the project to your portfolio
• Share on social media with #ReactWeatherDashboard
• Gather user feedback and iterate

✅ Bonus Features Summary

You now have ideas for 8 powerful features to enhance your weather dashboard:

1. 🌓 Dark Mode with theme persistence
2. 📊 Interactive temperature charts
3. 🌡️ Unit conversion (°C ↔ °F)
4. 🗺️ Interactive map with Leaflet
5. 🔔 Weather alerts and notifications
6. 🌐 Multi-language support (i18n)
7. ⚡ Progressive Web App capabilities
8. 🎨 Animated weather icons

Challenge: Pick 2-3 features and implement them to make your project truly unique! 💪

💡 How to Present Your Project

• Portfolio Website - Add to your developer portfolio
• GitHub README - Write comprehensive documentation
• Demo Video - Record a walkthrough (Loom or YouTube)
• Blog Post - Write about your development journey
• Social Media - Share screenshots and features
• Dev.to Article - Share lessons learned

Continue Your Journey

• 📖 React Documentation - react.dev
• 📘 TypeScript Handbook - typescriptlang.org
• 🎓 React Patterns - reactpatterns.com
• 🛠️ Vite Documentation - vitejs.dev
• 🌐 Web APIs - MDN Web Docs

🏆 What You Built

• ✅ Complete React + TypeScript Application - Full-stack frontend app
• ✅ API Integration - Real-time data from OpenWeatherMap
• ✅ Custom Hooks Library - Reusable logic (useWeather, useFavorites, useDebounce, useGeolocation)
• ✅ Component Architecture - 7+ well-structured components
• ✅ State Management - Complex state with multiple hooks
• ✅ Error Handling - Graceful error states and retry logic
• ✅ Loading States - Proper UX feedback
• ✅ Local Storage - Data persistence
• ✅ Geolocation - Browser API integration
• ✅ Responsive Design - Mobile-first approach
• ✅ Accessibility - ARIA labels and semantic HTML
• ✅ Production Deployment - Live on the web!

💪 Skills You Practiced

• useEffect - Side effects, cleanup, dependencies
• Data Fetching - Async/await, error handling
• Custom Hooks - Extracting and reusing logic
• API Integration - Working with REST APIs
• TypeScript - Type safety throughout
• Component Composition - Building complex UIs
• State Management - Multiple state sources
• Performance Optimization - Debouncing, memoization
• Deployment - Taking apps to production

🎯 Next Steps

1. Implement Bonus Features - Add dark mode, charts, or maps
2. Share Your Project - Show it off to friends and on social media
3. Get Feedback - Ask other developers to review your code
4. Refactor & Optimize - Clean up code, improve performance
5. Move to Module 5 - Continue learning advanced concepts
6. Build More Projects - Apply what you learned to new ideas

🌟 Amazing Work! 🌟

You've built a production-ready weather application from scratch. This is a major milestone in your React and TypeScript journey!

Keep building, keep learning, and keep pushing yourself to create amazing things!

🚀 Ready for Module 5? Let's go! 🚀