🌤️ Nexus Weather

Advanced Weather Intelligence Platform

🌟 Where meteorology meets cutting-edge technology 🌟

---

📋 Table of Contents

🏠 Overview	⚡ Features	🎯 Demo	🛠️ Installation
📖 Usage	🔌 API Integration	🧰 Technologies	🚀 Deployment

---

🌟 Overview

Nexus Weather is a modern React app delivering real-time weather, air quality, and 5-day forecasts with a beautiful, responsive interface. Powered by OpenWeatherMap, it features dynamic theming, glassmorphism UI, and blazing-fast performance with Vite.

---

✨ Key Highlights

• 🎨 Dynamic Weather Theming: UI adapts to current weather
• 📊 Comprehensive Data: Current, forecast, and air quality
• 🔍 Smart Search: Cities, zip codes, coordinates, landmarks
• 💎 Glassmorphism UI: Modern, animated, and responsive
• 📱 Mobile First: Touch-friendly and fully responsive

---

🚀 Features

☀️ Core Weather 🌡️ Current Weather: Temp, humidity, wind, visibility 📅 5-Day Forecast: Extended daily breakdowns 🌬️ Air Quality Index: PM2.5, PM10, O₃, NO₂	🎨 Interface 🎨 Dynamic Theming 📍 Geolocation Support 🔍 Recent Search History 🎭 Glassmorphism Design
💎 User Experience 🔄 Loading Animations ❌ User-friendly Errors 💾 Recent Locations 🎯 Accessibility	⚡ Performance ⚡ Instant Loading 🌓 Day/Night Detection 👀 Responsive Design 🏆 Optimized for all devices

---

🎯 Demo

---

🛠️ Installation

📋 Prerequisites

Requirement	Version	Status
🟢 Node.js	v16.0+	Required
📦 npm	Latest	Required
🌐 Browser	Modern	Required
🔑 API Key	OpenWeather	Required

🚀 Quick Start

git clone https://github.com/yourusername/nexus-weather.git
cd nexus-weather
npm install

1. Configure API Key
   Create a .env.local file in the root:

   VITE_OPENWEATHER_API_KEY=your_api_key_here

2. Start Development Server

   npm run dev

3. Open in Browser
   Visit http://localhost:5173

---

⚙️ Configuration

• API key is required in .env.local as VITE_OPENWEATHER_API_KEY
• See vite.config.js for dev/prod settings

---

📖 Usage

• Default Weather: Loads New York on start
• Search: Enter any city, zip, or coordinates
• Recent Searches: Dropdown history (coming soon)
• Unit Toggle: (planned)
• Current Location: (planned)

---

🔌 API Integration

• Current Weather: OpenWeatherMap
• 5-Day Forecast: OpenWeatherMap
• Air Quality: OpenWeatherMap (future)
• Geocoding: OpenWeatherMap (future)

Handles:

• Network/API errors
• Invalid locations
• Rate limits

---

📁 Project Structure

React_Nexus/
├── public/
│   └── vite.svg
├── src/
│   ├── [App.jsx](src/App.jsx)           # Main app component
│   ├── [main.jsx](src/main.jsx)         # React entry point
│   ├── [index.css](src/index.css)       # Global styles
│   ├── App.css
│   └── assets/
│       └── react.svg
├── [.env.local](.env.local)             # API key
├── [vite.config.js](vite.config.js)
├── [package.json](package.json)
└── [README.md](README.md)

---

🧰 Technologies Used

Tech	Description
React	UI library
Vite	Build tool
Tailwind CSS	Utility-first CSS
Lucide React	Icon library
OpenWeatherMap	Weather API
ESLint	Linting
PostCSS	CSS tooling

---

📊 Scripts

Command	Purpose
npm run dev	Start dev server
npm run build	Production build
npm run preview	Preview build locally
npm run lint	Lint code
npm run deploy	Deploy to GitHub Pages

---

🚀 Deployment

• Vercel: vercel --prod
• Netlify: Deploy dist/ after npm run build
• GitHub Pages:

  npm run build
  npm run deploy

See vite.config.js for base path config.

---

🔍 Browser Support

• Chrome, Firefox, Safari, Edge (last 2 versions)

---

🙏 Acknowledgments

Weather Data API

Beautiful Icons

Amazing Framework

Lightning Fast Build

---

Nexus Weather - Where meteorology meets technology 🌤️

⭐ Star this repo if you found it helpful! ⭐