Weatherify is a modern, user-friendly, and fully responsive weather application built using the latest frontend technologies. It allows users to effortlessly search any city around the globe and get real-time weather updates. Packed with dark mode, animated weather map background, and intelligent city suggestions, Weatherify delivers both aesthetics and performance.
Explore the live app here: 👉 https://ibrahim-weatherify.vercel.app
Browse the source code: 📁 https://github.com/mdiibrahim/weather-app
- 🔍 Smart Autocomplete Search — City suggestions powered by GeoDB Cities API
- 🌡️ Live Weather Data — Real-time information from OpenWeatherMap API
- 🌓 Dark Mode Support — Elegant switch between light and dark themes
- 📍 Recent Searches — View and manage last 5 cities searched
- 🌐 Global Coverage — Search and fetch weather from any city worldwide
- 🧭 GIF Weather Map Background — Aesthetic animated background that reflects global conditions
- 🔁 Keyboard Navigation — Navigate suggestions using arrow keys
- ⚙️ Redux Toolkit Integration — Efficient global state management
- 💨 Debounced Search with Feedback — Prevents API flooding & handles errors smoothly
- ⚛️ React (with TypeScript) — Functional component architecture
- 🧵 Tailwind CSS — Utility-first responsive styling
- 🧠 Redux Toolkit — Robust state handling
- ⚡ Vite — Lightning-fast dev server
- 🌐 OpenWeatherMap API — Global weather data
- 🗺️ GeoDB Cities API — Accurate location autocomplete
- Clone the repository
git clone https://github.com/mdiibrahim/weather-app.git
cd weather-app- Install dependencies
yarn install # or npm install- Set up API keys
Create a
.envfile at the root:
VITE_OPENWEATHER_API_KEY=your_openweathermap_key
VITE_GEODB_API_KEY=your_geodb_api_key- Start development server
yarn dev # or npm run dev📍 Visit: http://localhost:5173/
Used for fetching weather data like temperature, humidity, wind speed, etc.
Provides accurate autocomplete suggestions for cities worldwide.
This application was designed and developed as a Frontend Developer Assignment for Digiden IT.
Designed & crafted with ❤️ by Mohammad Ibrahim
For feedback or collaboration, feel free to connect!
Weatherify is hosted on Vercel, allowing seamless CI/CD with GitHub integration.
🔗 Live App: https://ibrahim-weatherify.vercel.app
To deploy your own version:
- Connect your repo at vercel.com
- Configure environment variables
- Hit Deploy
This project is open-source and available for anyone to learn, modify, and use.