Vibrant Weather is a stylish, fast, and responsive weather dashboard built with Next.js 14, TypeScript, and Tailwind CSS.
It fetches real-time weather and forecast data using the OpenWeather API.
- 🌎 Current Weather Information
- 📅 5-Day Weather Forecast
- 🔥 Responsive Design (Mobile-friendly)
- 🌙 Dark Mode Support
- 🌀 Animated Weather Icons
- ⚡ Built with cutting-edge technologies (Next.js App Router, Server Components)
- Next.js 14
- TypeScript
- Tailwind CSS
- OpenWeatherMap API
- Shadcn UI for beautiful components
-
Clone the repository:
git clone <https://github.com/AyushSingh360/Basic-Weather-Program-> cd vibrant-weather
-
Install dependencies:
npm install
or if you prefer:
pnpm install
-
Configure Environment Variables:
Create a file named
.env.local
in the project root, and add: please use your own Openweater Api keyOPENWEATHERMAP_API_KEY=24f35048331ae83b69492b1fbaaeeacc
-
Run the development server:
npm run dev
Open http://localhost:3000 to view it in your browser.
/app
/api → Weather API routes (server-side)
/components → Reusable UI components
/hooks → Custom React hooks
/styles → Global CSS
/public → Static assets
- Add location auto-detection (using browser Geolocation API)
- Show weather alerts (severe weather warnings)
- Support multiple weather providers (backup APIs)
This project is licensed under the MIT License.
Ayush Singh
Built with 💻, ☕, and a lot of ☀️ and ☁️!