Weather Watch is a modern, responsive weather dashboard built using Next.js 15 and React 19, providing real-time weather updates, forecasts, and visual insights in an interactive and user-friendly interface.
- Real-time Weather Data: View current conditions, 5-day forecasts, and air quality information.
- Interactive Visualizations: Analyze temperature trends, humidity levels, wind speed, and more with Recharts and Chart.js.
- Geolocation Support: Automatically detect user location with IP-based fallback.
- Unit Conversion: Easily toggle between Metric (°C) and Imperial (°F) units.
- Global Search: Search and view weather details for any location worldwide.
- Responsive Design: Fully optimized for mobile, tablet, and desktop devices.
- Framework: Next.js 15 (App Router)
- Frontend: React 19, Tailwind CSS, Framer Motion
- State Management: Zustand
- Data Visualization: Recharts, Chart.js
- API Integration: OpenWeather API
- Build Tool: Turbopack
Follow these steps to run the project locally:
-
Clone the repository:
git clone https://github.com/kaushik-2318/weather-watch.git cd weather-watch -
Install dependencies:
npm install # or yarn install -
Set up environment variables:
Create a
.envfile at the root of your project with the following contents:NEXT_PUBLIC_OPENWEATHER_API_URL=https://api.openweathermap.org/data/2.5 NEXT_PUBLIC_OPENWEATHER_API_GEO=https://api.openweathermap.org/geo/1.0 NEXT_PUBLIC_OPENWEATHER_API_KEY=your_api_key_here
-
Run the development server:
npm run dev # or yarn dev -
Open http://localhost:3000 in your browser to see the app in action.
Here are some useful resources to learn more about the technologies used:
- Next.js Documentation
- React Documentation
- Tailwind CSS Documentation
- Framer Motion Documentation
- OpenWeather API Documentation
This project is licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. See the LICENSE file for more information.