AETHER ☁️

A Minimilist Weather App

✨ Features

Core Functionality

• 🌍 Auto-location Detection - Finds you instantly
• 🔍 Global City Search - Any city, anywhere
• 📊 Real-time Data - Current conditions + 8hr hourly + 5-day forecast
• 🌡️ Temperature Toggle - Celsius ⇄ Fahrenheit
• 🎨 Light/Dark Mode - Pure black ⇄ pure white

Interactions

• 🎯 Expandable Details - Click any metric for deep insights
• 📱 Fully Responsive - Desktop, tablet, mobile perfection
• ⚡ Smooth Animations - Every interaction feels premium
• 🎭 No Background Scroll - Modals lock focus

🛠️ Tech Stack

React + Vite + Tailwind CSS
OpenWeatherMap API
Lucide React Icons

🚀 Quick Start

1. Clone & Install

git clone https://github.com/alxgraphy/aether-weather.git
cd aether-weather
npm install

2. Environment Setup

Create .env in root:

VITE_API_KEY=your_openweathermap_api_key

Get your key: OpenWeatherMap API

3. Run

npm run dev

Open → http://localhost:5173

📦 Build & Deploy

Build:

npm run build

Deploy on Vercel:

1. Push to GitHub
2. Import repo on Vercel or any hosting platform i'm using vercel.
3. Add VITE_API_KEY environment variable
4. Deploy 🚀

🎯 Design Philosophy

\MINIMALISM. MAXIMALISM.//

• High contrast black/white only
• Geometric precision
• Bold typography with extreme letter spacing
• Micro-animations everywhere
• Zero visual compromise

📊 Weather Data

Current: Temperature • Feels Like • High/Low • Conditions • Humidity • Wind Speed & Direction • Pressure • Visibility • Clouds • Sunrise/Sunset

Forecasts:

• ⏰ Next 24 hours (hourly)
• 📅 5-day outlook with detailed breakdowns

Expandable Views: Click any metric → Full-screen detailed analysis

🌐 Browser Support

All Broswers (Opera has issues with locations, Fixing Now)

🙏 Credits

Data: OpenWeatherMap
Icons: Lucide

---

Alexander Wondwossen (@thealxlabs)

Made with ❤️ in Toronto, Canada 🇨🇦