A Full-stack, responsive web application that provides real-time weather data and an AI-powered 7-day forecast.
This dashboard combines a modern React frontend with a Python Flask backend.
The backend acts as an API proxy, fetching live weather data and generating forecasts using an AI model.
✨ The UI is designed to be clean and intuitive, featuring a dark/light mode toggle and a visually appealing chart for temperature predictions.
✅ Real-time Weather Data: Get current weather conditions for any city.
✅ AI-Powered Forecast: 7-day forecast powered by a large language model.
✅ Responsive UI: Works seamlessly on desktop and mobile.
✅ Dark/Light Mode: Toggle themes with one click.
✅ Dockerized: Consistent deployment across environments.
- React.js – UI library
- Tailwind CSS – Utility-first CSS framework
- Recharts – Data visualization
- Lucide React – Icon set
- Python 3.8+
- Flask – API framework
- Gunicorn – WSGI server
- Requests – HTTP client
- python-dotenv – Env variables
- OpenWeatherMap API – Real-time weather data
- Google Gemini API – AI-powered forecasting
- Docker & Docker Compose → Containerized setup
- Render → Hosting for frontend + backend
- Install Docker and Docker Compose
Copy .env.example → .env and add your API keys:
OPENWEATHER_API_KEY=YOUR_OPENWEATHERMAP_API_KEY
GEMINI_API_KEY=YOUR_GEMINI_API_KEY# Clone the repo
git clone https://github.com/Omryuo/Weather-Forecast-Dashboard.git
cd weather-forecast-dashboard
# Build and run containers
docker-compose up --build
👉 Open in your browser: http://localhost:3000
weather-forecast-dashboard/
│── frontend/ # React + Tailwind UI
│── backend/ # Flask API
│── docker-compose.yml
│── .env.example
│── README.md
This project is licensed under the MIT License.
Suggestion and Contributions are always welcome!
Please fork the repository and create a pull request with your changes.