Simple Weather Dashboard

A clean and modern single-page weather dashboard built with React and TypeScript. Search for any city worldwide and get real-time weather information including temperature, weather conditions, humidity, and wind speed.

Features

• 🔍 City Search: Search for weather by city name with real-time validation
• 🌡️ Current Weather Data: Temperature, feels-like, humidity, and wind speed
• 🎨 Dynamic Backgrounds: Background color changes based on temperature (cold, mild, hot)
• 📱 Fully Responsive: Works beautifully on mobile, tablet, and desktop
• ⚡ Fast & Modern: Built with Vite for lightning-fast development and builds
• 🎯 Clean UI: Simple, intuitive interface with smooth animations

Tech Stack

• React 18 with TypeScript
• Vite for fast builds and hot module replacement
• Plain CSS for styling (no frameworks)
• OpenWeatherMap API for weather data
• Google Fonts (Inter)

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• OpenWeatherMap API key (free tier available)

Installation

1. Clone the repository

   git clone <YOUR_GIT_URL>
   cd <YOUR_PROJECT_NAME>

2. Install dependencies

   npm install

3. Configure API Key

   Get your free API key from OpenWeatherMap:

   • Sign up for a free account
   • Navigate to the API keys section
   • Copy your API key

   Then update the API key in src/config/api.ts:

   export const WEATHER_API_CONFIG = {
     BASE_URL: 'https://api.openweathermap.org/data/2.5',
     API_KEY: 'YOUR_API_KEY_HERE', // Replace with your actual API key
     UNITS: 'metric',
   };

   Note: New API keys may take a few minutes to activate.

4. Start the development server

   npm run dev

5. Open your browser

   Navigate to http://localhost:8080 to see the app running.

Usage

1. Enter a city name in the search bar
2. Click "Search" or press Enter
3. View current weather conditions
4. Notice the background color changes based on temperature:
   • 🥶 Cold (≤10°C): Blue gradient
   • 😊 Mild (10-25°C): Neutral gradient
   • 🔥 Hot (>25°C): Warm gradient

Project Structure

src/
├── components/
│   ├── SearchBar.tsx       # Search input and button component
│   ├── SearchBar.css       # SearchBar styles
│   ├── WeatherCard.tsx     # Weather display component
│   └── WeatherCard.css     # WeatherCard styles
├── config/
│   └── api.ts             # API configuration
├── App.tsx                # Main app component
├── App.css                # Global app styles
└── main.tsx              # App entry point

API Reference

This app uses the OpenWeatherMap Current Weather Data API.

Endpoint: https://api.openweathermap.org/data/2.5/weather

Parameters:

• q: City name
• appid: Your API key
• units: Temperature units (metric/imperial)

Building for Production

npm run build

The optimized production build will be in the dist/ directory.

Project URL

Lovable Project: https://lovable.dev/projects/7b8dbf70-562b-470c-a2fa-86f3f7f1eef7

Editing the Code

You can edit this project in several ways:

Via Lovable: Visit the Lovable Project and start prompting.

Locally: Clone the repo and edit with your preferred IDE.

GitHub Codespaces: Launch a Codespace for cloud-based development.

How can I deploy this project?

Simply open Lovable and click on Share -> Publish.

Can I connect a custom domain to my Lovable project?

Yes, you can!

To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.

Read more here: Setting up a custom domain