Your forecast, beautifully delivered.

MoGas Weather App

A modern, elegant weather application for real-time conditions and 5-day forecasts for any city in the world. Features smart search autocomplete, personalized weather advice, and a beautiful glassmorphism design.

JavaScriptHTML5CSS3Tailwind CSS

Live Demo

Tech Stack

Main Tech

JavaScriptHTML5CSS3Tailwind CSS

Tools & Libraries

OpenWeatherAPIVite

Real-Time Weather at a Glance

The app auto-detects your location on first load to instantly show your current city's weather. Temperature, feels-like, humidity, wind speed, and sunrise/sunset times are all front and center. A dynamic animated background shifts based on current conditions — sun, clouds, rain.

Main weather view showing current temperature, city, and weather conditions — Everything you need to know about today's weather — in one view.

Smart Search & History

The search bar remembers your recent cities and suggests them as you type — no need to retype the same location twice. Results appear instantly as you type, making it fast to switch between cities you check regularly.

Search autocomplete with recent cities and 5-day forecast section — 5-day extended forecast with max/min temps and rain probability.

Personalized Weather Advice

Click 'View Tips' and a modal appears with tailored recommendations based on your current conditions — what to wear, whether it's safe to drive, if you should carry an umbrella. The advice reacts dynamically to the detected weather.

Mobile view showing the app's responsive layout — Fully responsive — works just as well on a phone as on a desktop.

Key Features

Auto-detects user location on launch to preload local weather
Real-time data via OpenWeatherMap API
5-day extended forecast with high/low temperatures
Smart search with autocomplete and recent history
Personalized weather tips modal
Glassmorphism UI with smooth transitions
Fully responsive — mobile and desktop