Nimbus is a fast, elegant, and minimal weather app built using React + TypeScript + Vite, styled with Tailwind CSS and enhanced with shadcn/ui components. The app provides accurate weather data, search history, geolocation support, and a clean UI optimized for both dark and light modes.
- Current temperature
- Humidity, wind speed, pressure
- Weather descriptions
- Dynamic weather icons
- Hourly and multi-day forecast (if API supports)
- Search any city
- Saves search history using custom hooks
- Deduplication & timestamps
- Detect weather using user’s device location (Geolocation API)
- Fully responsive layout
- Light & Dark mode support
- Tailwind CSS + shadcn/ui
- Smooth transitions and animations
- Vite for ultra-fast development
- TypeScript for strong typing
- Modularity with custom hooks
- Organized folder structure
NIMBUS/
│── .vscode/
│── node_modules/
│── public/
│
└── src/
├── api/ # Weather API handlers
├── assets/ # Images, icons, static content
├── components/ # UI components (cards, search bar, etc.)
├── context/ # Global state providers
├── hooks/ # Custom hooks (useSearchHistory, useWeather, etc.)
├── lib/ # Utility helpers, wrappers
├── pages/ # Page-level components
├── App.css
├── App.tsx
├── index.css
├── main.tsx
│
│── .env
│── .gitignore
│── components.json # shadcn/ui registry file
│── eslint.config.js
│── package.json
│── README.md
│── vite.config.js
| Category | Technology |
|---|---|
| Framework | React + TypeScript |
| Build Tool | Vite |
| Styling | Tailwind CSS, shadcn/ui |
| Icons | Lucide Icons |
| API | OpenWeather API / WeatherAPI |
| State | React Hooks, Context API |
| Deployment | Vercel / Netlify |
git clone https://github.com/your-username/Nimbus.git
cd Nimbus
npm install
npm run dev
🚀 Deploy to Vercel (Recommended)
-
Push your code to GitHub
-
Import repo into Vercel
-
Add environment variables under “Project Settings → Environment Variables”
-
Deploy instantly
Jayant R Habbu Creator of Nimbus — a clean and modern weather experience.