๐ค๏ธ Vibrant Weather
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.
โจ Features
- ๐ 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)
๐ Tech Stack
- Next.js 14
- TypeScript
- Tailwind CSS
- OpenWeatherMap API
- Shadcn UI for beautiful components
๐ ๏ธ Installation & Running Locally
Clone the repository:
git clone <https://github.com/AyushSingh360/Basic-Weather-Program-> cd vibrant-weatherInstall dependencies:
npm installor if you prefer:
pnpm installConfigure Environment Variables:
Create a file named .env.local in the project root, and add:
please use your own Openweater Api key
OPENWEATHERMAP_API_KEY=24f35048331ae83b69492b1fbaaeeacc
- Run the development server:
bash npm run devOpen http://localhost:3000 to view it in your browser.
๐งฉ Project Structure
/app
/api โ Weather API routes (server-side)
/components โ Reusable UI components
/hooks โ Custom React hooks
/styles โ Global CSS
/public โ Static assets
๐งน TODOs / Future Improvements
- Add location auto-detection (using browser Geolocation API)
- Show weather alerts (severe weather warnings)
- Support multiple weather providers (backup APIs)
๐ License
This project is licensed under the MIT License.
๐ค Author
Ayush Singh
Built with ๐ป, โ, and a lot of โ๏ธ and โ๏ธ!


Log in or sign up for Devpost to join the conversation.