Skip to content

README.md

Latest commit

 

History

History
74 lines (58 loc) · 1.85 KB

README.md

File metadata and controls

74 lines (58 loc) · 1.85 KB

🌦️ Weather-Widget

A minimalist weather widget built with React, Material UI, and Vite. It delivers real-time weather updates with clarity and calm—designed to be simple, responsive, and beautiful.

✨ Features

  • 🔍 Search weather by city name
  • 🌡️ Display temperature, humidity, wind speed, and conditions
  • 🕒 Local time and date display
  • 🎨 Material UI for clean, responsive design
  • ⚠️ Graceful error handling for invalid inputs or API issues

🧰 Tech Stack

  • Frontend: React (with Vite)
  • UI Library: Material UI
  • API: OpenWeatherMap
  • Styling: CSS + Material UI theming
  • Linting: ESLint

📦 Installation

git clone https://github.com/your-username/Weather-Widget.git
cd Weather-Widget
npm install
npm run dev

🔑 API Setup

  1. Sign up at OpenWeatherMap
  2. Generate your API key
  3. Create a .env file in the root directory:
VITE_WEATHER_API_KEY=your_api_key_here

📁 Folder Structure

Weather-Widget/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── index.jsx
│   ├── index.css
│   ├── main.jsx
│   ├── SearchBox.jsx
│   └── WeatherDashboard.jsx
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
├── vite.config.js
├── eslint.config.js
└── README.md

🧠 Component Overview

  • SearchBox.jsx: Handles user input and triggers API calls
  • WeatherDashboard.jsx: Displays weather data in styled Material UI cards
  • App.jsx: Manages layout and component composition
  • main.jsx: Entry point for rendering the app

🙋‍♀️ Author

Crafted with ❤️ by Muskan
Connect on LinkedIn | Portfolio coming soon