WeatherNow is a premium, beautifully designed real-time weather web application. It delivers accurate local forecasts, dynamic glassmorphism aesthetics, and lightning-fast performance, ensuring you get your weather insights intuitively and beautifully.
- Live Local Forecast: Instantly view real-time temperature, condition, and location details.
- Auto Location Detection: Automatically detects your location using GPS (with a convenient "Locate Me" button in search).
- Hourly & 7-Day Forecasts: Scroll smoothly through the next 24 hours and preview the week ahead.
- Dynamic Glassmorphism UI: The app's background and aesthetics adapt to the current weather and theme (Light/Dark mode) with stunning blur effects.
- Favorites System: Save and manage your favorite cities to quickly check their weather conditions anytime.
- Offline Caching: Built-in caching powered by IndexedDB ensures weather data remains accessible even with a spotty connection.
- Optimized for SEO: Features standard semantic tags and SEO-optimized metadata.
- Framework: React 18
- Language: TypeScript
- Styling: Tailwind CSS v4 (using
@tailwindcss/vite) - State Management: Zustand (Persisted in LocalStorage)
- Build Tool: Vite
- Data Caching:
idb-keyval(IndexedDB) - API: OpenWeatherMap API
Follow these steps to set up the project locally.
git clone https://github.com/your-username/weathernow.git
cd weathernowMake sure you have Node.js installed, then run:
npm installCreate a .env file in the root of the project. You will need an API key from OpenWeatherMap.
Add your API key to the .env file like this:
VITE_OPENWEATHERMAP_API_KEY=your_api_key_herenpm run devOpen http://localhost:5173 in your browser to view the application!
To create an optimized production build, run:
npm run buildThis will compile the TypeScript code and bundle the Vite application into the dist/ directory, ready to be deployed to Vercel, Netlify, or your preferred hosting provider.
Built with ❤️ and designed to wow.