Forecast with Precision
A production-ready weather forecast web application built with React and Next.js, featuring real-time weather data, hourly and 7-day forecasts, dark mode, and beautiful weather-based backgrounds.
- Real-time temperature with "feels like" indicator
- Weather condition with animated icons
- Humidity, wind speed, and atmospheric pressure
- Sunrise and sunset times
- City name and country display
- Last updated timestamp
- Next 24 hours weather prediction
- Temperature trends
- Precipitation probability
- Scrollable horizontal layout
- Clean visual separation per hour
- Daily high/low temperatures
- Weather condition icons
- Rain probability
- Humidity levels
- Compact, readable layout
- Search by city name
- Auto-detect current location on first visit
- One-click current location button
- Keyboard-friendly (Enter to search)
- Recent searches stored in localStorage
- Error handling for invalid locations
- Geolocation permission handling
- Clear search functionality
- Dark Mode: Toggle between light and dark themes
- Unit Toggle: Switch between Celsius and Fahrenheit
- Modern Header: Permanent dark theme with blue gradient accents and glow effects
- Responsive Design: Mobile-first, works on all devices
- Weather Backgrounds: Dynamic gradients based on conditions (sunny, cloudy, rainy, night, etc.)
- Skeleton Loaders: Smooth loading states with enhanced loading screen
- Animations: Smooth transitions, hover effects, and glassmorphism UI
- Auto-Location: Detects your location automatically on first visit
- Offline Fallback: Shows cached data when offline
- Framework: Next.js 16 (React 19)
- Language: TypeScript
- Styling: CSS Modules (no UI frameworks)
- API: OpenWeatherMap API
- Data Fetching: Native Fetch API
- State Management: React Hooks
- Storage: localStorage for preferences and caching
climavue/
├── app/
│ ├── components/ # React components
│ │ ├── Header.tsx
│ │ ├── SearchBar.tsx
│ │ ├── CurrentWeather.tsx
│ │ ├── HourlyForecast.tsx
│ │ ├── DailyForecast.tsx
│ │ ├── LoadingScreen.tsx
│ │ ├── ErrorMessage.tsx
│ │ ├── SkeletonLoader.tsx
│ │ └── Footer.tsx
│ ├── hooks/ # Custom React hooks
│ │ ├── useWeather.ts
│ │ ├── useLocalStorage.ts
│ │ ├── useDarkMode.ts
│ │ └── useGeolocation.ts
│ ├── services/ # API services
│ │ └── weatherService.ts
│ ├── types/ # TypeScript types
│ │ └── weather.ts
│ ├── utils/ # Utility functions
│ │ └── formatters.ts
│ ├── styles/ # CSS Modules
│ │ ├── Header.module.css
│ │ ├── SearchBar.module.css
│ │ ├── CurrentWeather.module.css
│ │ ├── HourlyForecast.module.css
│ │ ├── DailyForecast.module.css
│ │ ├── LoadingScreen.module.css
│ │ ├── ErrorMessage.module.css
│ │ ├── SkeletonLoader.module.css
│ │ └── Footer.module.css
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page
├── public/
│ ├── climavue_logo.png # App logo
│ └── logo-rgdev.png # Company logo
├── .env.example # Environment variables template
├── package.json
└── README.md
- Node.js 18+ and npm
- OpenWeatherMap API key (Get it here)
-
Clone the repository
git clone <your-repo-url> cd climavue
-
Install dependencies
npm install
-
Set up environment variables
Create a
.envfile in the root directory:cp .env.example .env
Edit
.envand add your OpenWeatherMap API key:NEXT_PUBLIC_OPENWEATHER_API_KEY=your_api_key_here
-
Run the development server
npm run dev
-
Open the app
Navigate to http://localhost:3000 in your browser.
- Visit OpenWeatherMap
- Sign up for a free account
- Navigate to API Keys section
- Generate a new API key
- Copy the key and paste it in your
.envfile
Note: Free tier allows 1,000 API calls per day, which is sufficient for development and personal use.
# Create production build
npm run build
# Start production server
npm start- Custom hooks for weather data fetching and geolocation
- localStorage integration for persistence and user preferences
- Auto-detect user location on first visit
- Optimistic UI updates
- Error handling with fallback to cached data
- Code splitting with Next.js
- Lazy loading of components
- Optimized images with Next.js Image
- Minimal re-renders with proper memoization
- Semantic HTML elements
- ARIA labels on interactive elements
- Keyboard navigation support
- Sufficient color contrast ratios
- Focus visible states
- Mobile-first approach
- Breakpoints: 480px, 768px, 1024px
- Flexible grid layouts
- Touch-friendly interface
| Variable | Description | Required |
|---|---|---|
NEXT_PUBLIC_OPENWEATHER_API_KEY |
OpenWeatherMap API key | Yes |
Weather backgrounds are defined in globals.css. You can customize gradients for different conditions:
body.sunny {
background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%);
}Primary colors and theme variables are in globals.css:
:root {
--primary-color: #3b82f6;
--primary-color-dark: #2563eb;
/* ... more variables */
}- Ensure your API key is correctly added to
.env - Make sure the key starts with
NEXT_PUBLIC_ - Restart the dev server after adding the key
- Check spelling of city name
- Try adding country code (e.g., "London, UK")
- Some small towns may not be in the database
- Clear localStorage:
localStorage.clear() - Check browser console for errors
This project is open source and available for educational and personal use.
Ranul Gamage
Developed by Ranul Gamage
Company: RGDev
- Weather data provided by OpenWeatherMap
- Icons from OpenWeatherMap
- Built with Next.js
- Deployed on Vercel
For issues, questions, or feature requests, please open an issue on the repository.
ClimaVue - Forecast with Precision ☀️🌤️⛈️