An elegant and dynamic weather dashboard built with React, TypeScript, Tailwind CSS, and Zustand. It leverages the OpenWeatherMap API to display real-time weather and a 5-day forecast — all wrapped in a modern, animated UI with dark mode support.
- 🌦️ Real-Time Weather for any city
- 📅 5-Day Forecast displayed in sleek cards
- 🌙 Dark Mode Toggle with persistent state
- 🕵️ Recent Search History for quick access
- 💎 Glassmorphism UI & Smooth Animations
- ⚡ Responsive Design for all devices
| Technology | Usage |
|---|---|
| React | Frontend framework |
| TypeScript | Static typing |
| Tailwind CSS | Utility-first styling |
| Zustand | Lightweight state management |
| Lucide-react | Icon library |
| Vite | Fast build tool for development |
-
Clone the repository:
git clone https://github.com/asmxtaa/WeatherProjectAPI.git cd WeatherProjectAPI -
Install dependencies:
npm install
-
Add your API Key:
- Navigate to
src/store.ts - Replace the placeholder key with your OpenWeatherMap API key:
const API_KEY = 'baac0c7e4decb501150c3eedb73386e5';
- Navigate to
-
Run the development server:
npm run dev
-
Build for production:
npm run build
-
Preview the production build:
npm run preview
-
API Used:
-
Authentication:
- Requires a personal API key.
- Sign up here: https://openweathermap.org/api
-
Usage Example:
https://api.openweathermap.org/data/2.5/weather?q=London&appid=baac0c7e4decb501150c3eedb73386e5&units=metric -
Rate Limits (Free Tier):
- 60 API calls/minute
- 1,000,000 API calls/month
-
Units:
- This app uses metric units (Celsius).
This project can be easily deployed using Vercel:
- Push the project to a GitHub repo.
- Go to vercel.com, sign in via GitHub.
- Click "New Project", select your repo.
- Vercel will auto-detect the project (Vite + React).
- Add your API key in Vercel Environment Variables.
- Click Deploy – and you're live!
🔗 Live Demo: https://weather-project-api-git-main-asmita-mandals-projects.vercel.app/
Asmita Mandal 🌸
GitHub • LinkedIn
This project is open-source and available under the MIT License.