A modern and beautifully designed weather dashboard to track, save, and visualize forecasts for your favorite cities.
| Feature | Description |
|---|---|
| 📍 Geolocation-Aware | Automatically detects and displays the weather for your current location, providing instant, relevant forecasts. |
| 🏙️ Saved Cities List | Search for any city worldwide and save it to a personalized list for quick access. |
| 🗺️ Interactive Map View | Visualize all your saved cities on an interactive map powered by React Leaflet, complete with custom markers and weather popups. |
| ⚙️ Deep Customization | Personalize every aspect of your experience, including themes (light/dark/system), units (metric/imperial), and forecast display settings. |
| Intuitively organize your saved cities list with a smooth drag-and-drop interface, implemented with React DnD. | |
| 📦 Installable PWA | A fully installable Progressive Web App that offers a native-like experience, offline support, and app shortcuts. |
| 🔄 Efficient Data Fetching | Leverages TanStack Query to efficiently cache and manage weather data, ensuring the UI is always fast and up-to-date. |
| 📱 Fully Responsive Design | A pixel-perfect, adaptive interface built with Tailwind CSS that provides a flawless and intuitive experience from desktop to mobile. |
This project uses a modern, performant, and scalable tech stack.
| Category | Technologies & Services |
|---|---|
| Frontend & UI | |
| State Management |  TanStack Query for robust server-state caching. |
| Styling & Animation |  AutoAnimate for smooth transitions. |
| Mapping & Interactivity |  React Leaflet for map rendering and  React DnD for drag-and-drop functionality. |
| APIs & Data | The free and open-source  Open-Meteo API for all weather and geocoding data. |
| Tooling & Quality |
(Note: Replace these placeholder links with actual paths to your screenshots in the repository.)
The main weather dashboard displaying current conditions and forecasts.
The interactive map showing saved cities with weather-specific markers.
Let's connect! I'm always open to discussing new projects, creative ideas, or opportunities to be part of an amazing team.
Walid Zakan
- 📧 Email: walid.zakan@gmail.com
- 💼 LinkedIn: linkedin.com/in/walid-zakan