Project Setup

Create a new Vite project and set up the folder structure:

mkdir weather_dashboard
cd weather_dashboard
npm create vite@latest frontend -- --template react
cd frontend
npm install
cd ..
mkdir backend
cd backend
npm init -y
npm install express cors
touch server.js

Backend Implementation (backend/server.js)

// backend/server.js

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 5000;

app.use(cors());
app.use(express.json());

// Mock weather data
const weatherData = {
  'new-york': { temperature: 20, conditions: 'Sunny', humidity: 65 },
  'london': { temperature: 15, conditions: 'Rainy', humidity: 80 },
  'tokyo': { temperature: 28, conditions: 'Clear', humidity: 70 },
  'sydney': { temperature: 25, conditions: 'Partly Cloudy', humidity: 60 }
};

app.get('/api/weather/:city', (req, res) => {
  const city = req.params.city.toLowerCase();
  
  if (weatherData[city]) {
    // Simulate network delay
    setTimeout(() => {
      res.json(weatherData[city]);
    }, 500);
  } else {
    res.status(404).json({ error: 'City not found' });
  }
});

app.listen(PORT, () => {
  console.log(`Backend server running on http://localhost:${PORT}`);
});

Configure Vite Proxy (frontend/vite.config.js)

// frontend/vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": "http://localhost:5000"
    }
  }
});

Frontend Implementation (frontend/src/App.jsx)

// frontend/src/App.jsx

import { useState, useEffect } from 'react'
import './App.css'

function App() {
  const [city, setCity] = useState('new-york');
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchWeather = async (selectedCity) => {
    setLoading(true);
    setError(null);
    
    try {
      // Notice we're using a relative URL here!
      const response = await fetch(`/api/weather/${selectedCity}`);
      
      if (!response.ok) {
        throw new Error('City not found');
      }
      
      const data = await response.json();
      setWeather(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchWeather(city);
  }, [city]);

  return (
    

      
Weather Dashboard
      
      

        Select a city:
         setCity(e.target.value)}
        >
          New York
          London
          Tokyo
          Sydney
        
      
      
      

        {loading && 
Loading weather data...
}
        {error && 
Error: {error}
}
        {weather && !loading && (
          

            
{city.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')}
            
{weather.temperature}°C
            
{weather.conditions}
            
Humidity: {weather.humidity}%
          
        )}
      
    
  )
}

export default App

Running the Application

Open two terminal windows:

Terminal 1 (Backend):

cd backend
node server.js

Terminal 2 (Frontend):

cd frontend
npm run dev

Now you can open your browser to the URL shown in the frontend terminal (usually http://localhost:5173) and see your weather dashboard in action!