Project: "Weather Dashboard"

Objective: Create a dashboard showing weather forecasts for multiple locations.

Description: In this project, you will build a Weather Dashboard that displays weather forecasts for multiple locations. You'll practice lifting state up to share data between components and using composition to build reusable components.

Instructions:

Step 1: Setup Your Project

• Create a new React project using Vite.
• Set up your project structure with a main App component and components for the dashboard.

Step 2: Create the Weather Dashboard Structure

Start by creating the main structure of your dashboard with components for displaying weather information.

import React, { useState } from 'react';
import './WeatherDashboard.css';

function WeatherCard({ location, forecast }) {
  return (
    <div className="weather-card">
      <h3>{location}</h3>
      <p>{forecast}</p>
    </div>
  );
}

function LocationInput({ location, onLocationChange, onAddLocation }) {
  return (
    <div className="location-input">
      <input
        type="text"
        value={location}
        onChange={(e) => onLocationChange(e.target.value)}
        placeholder="Enter location"
      />
      <button onClick={onAddLocation}>Add Location</button>
    </div>
  );
}

function WeatherDashboard() {
  const [locations, setLocations] = useState([]);
  const [location, setLocation] = useState('');
  const [forecasts, setForecasts] = useState({});

  // Function to add a new location
  function handleAddLocation() {
    if (location && !locations.includes(location)) {
      setLocations([...locations, location]);
      // Fetch weather data for the new location (for simplicity, using static data)
      setForecasts({
        ...forecasts,
        [location]: 'Sunny, 25°C', // Replace this with actual API call
      });
      setLocation('');
    }
  }

  return (
    <div className="weather-dashboard">
      <LocationInput
        location={location}
        onLocationChange={setLocation}
        onAddLocation={handleAddLocation}
      />
      <div className="weather-cards">
        {locations.map((loc) => (
          <WeatherCard key={loc} location={loc} forecast={forecasts[loc]} />
        ))}
      </div>
    </div>
  );
}

export default WeatherDashboard;

Step 3: Lift State Up for Location Management

Manage the list of locations and their forecasts in the WeatherDashboard component. Pass the state and state update functions as props to child components.

Hint: Use useState to manage locations and forecasts, and pass down state and handlers.

const [locations, setLocations] = useState([]);
const [location, setLocation] = useState('');
const [forecasts, setForecasts] = useState({});

function handleAddLocation() {
  if (location && !locations.includes(location)) {
    setLocations([...locations, location]);
    // Fetch weather data for the new location
    setForecasts({
      ...forecasts,
      [location]: 'Sunny, 25°C', // Replace this with actual API call
    });
    setLocation('');
  }
}

Step 4: Fetch Weather Data

Simulate fetching weather data for each location. For simplicity, you can use static data. In a real application, you would replace this with an API call to fetch weather data.

Hint: Update the handleAddLocation function to include setting the forecast for the new location.

setForecasts({
  ...forecasts,
  [location]: 'Sunny, 25°C', // Replace this with actual API call
});

Step 5: Create Reusable Components with Composition

Use composition to create reusable components like WeatherCard and LocationInput. This makes your code more modular and easier to maintain.

Hint: Pass necessary props to these components from the WeatherDashboard component.

function WeatherCard({ location, forecast }) {
  return (
    <div className="weather-card">
      <h3>{location}</h3>
      <p>{forecast}</p>
    </div>
  );
}

function LocationInput({ location, onLocationChange, onAddLocation }) {
  return (
    <div className="location-input">
      <input
        type="text"
        value={location}
        onChange={(e) => onLocationChange(e.target.value)}
        placeholder="Enter location"
      />
      <button onClick={onAddLocation}>Add Location</button>
    </div>
  );
}

Step 6: Style the Weather Dashboard

Add some basic CSS to style your weather dashboard and make it visually appealing.

Hint: Use CSS to style the layout, weather cards, and input fields.

/* Add to your WeatherDashboard.css file */
.weather-dashboard {
  padding: 20px;
}

.location-input {
  margin-bottom: 20px;
}

.weather-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.weather-card {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Complete Code Example:

Here's how your complete WeatherDashboard component might look:

By completing this project, you'll gain hands-on experience with lifting state up, managing state across components, and using composition to build reusable components in React. Enjoy building your Weather Dashboard and making it interactive and informative!