🌤️ Weather App

Zamonaviy, interaktiv va foydalanuvchi-do'st ob-havo ilovasi - React va Vite yordamida yaratilgan

📖 Demo • 🚀 O'rnatish • 📸 Screenshots • 🤝 Hissa Qo'shish

---

📖 Tavsif

Bu loyiha zamonaviy ob-havo ilovasi bo'lib, React texnologiyasi asosida qurilgan. Foydalanuvchilarga:

• 🌤️ Joriy ob-havo ma'lumotlari
• 📅 5 kunlik batafsil prognoz
• 🗺️ Interaktiv Google Maps integratsiyasi
• 🔍 Dunyo bo'ylab shahar qidiruvi
• 📱 To'liq responsive dizayn
• 🌈 Dinamik Mavzular - Ob-havoga qarab o'zgaruvchi interfeys
• ❄️ Ob-havo Effektlari - Yomg'ir, qor va bulut animatsiyalari
• 🍎 Premium Glassmorphism - Apple-style interaktiv dizayn

---

🎯 Asosiy Maqsadlar

• ✅ Aniq Ma'lumotlar - Real-vaqt ob-havo ma'lumotlari
• ✅ Qulay Interfeys - Foydalanuvchi-do'st dizayn
• ✅ Tez Ishlash - Vite bilan optimallashtirilgan
• ✅ Mobil Mos - Barcha qurilmalarda mukammal
• ✅ Dinamik Atmosfera - Yomg'ir va qor effektlari
• ✅ Premium Interaktiv - MacOS-style hover effektlari

---

✨ Xususiyatlar

🚀 Asosiy Funksiyalar

Funksiya	Tavsif
🌤️ Joriy Ob-havo	Animatsion ikonlar bilan real ma'lumotlar
📅 5 Kunlik Prognoz	Harorat, namlik, shamol tezligi
🗺️ Google Maps	Interaktiv xarita integratsiyasi
🔍 Qidiruv	Shaharlar bo'yicha tez qidiruv
🌡️ Dinamik Mavzu	Har bir ob-havo holati uchun alohida dizayn
🌨️ Vizual Effektlar	Reallikni aks ettiruvchi yomg'ir va qor

🎨 Dizayn Xususiyatlari

• 🎭 Zamonaviy UI/UX - Minimal va chiroyli dizayn
• 🌈 MacOS Style Interaction - Kartalar uchun smart hover effektlari
• 🧊 Ultra Glassmorphism - Shaffof va premium ko'rinish
• 📱 Mobile-First - Avvala mobil, keyin desktop
• 🎯 Smooth Transitions - Silliq va professional animatsiyalar
• ⚡ GPU Accelerated - Yuqori unumdorlik bilan ishlovchi animatsiyalar
• 🌍 Static Background - Sokin va qimirlamaydigan fon tizimi

---

🛠 Texnologiyalar

Frontend Stack

Kutubxona va Frameworklar

• React Router DOM - Sahifalar o'rtasida navigatsiya
• Google Maps React Wrapper - Xarita integratsiyasi
• React Icons - 1000+ chiroyli ikon
• React Animated Weather - Animatsion ob-havo ikonlari
• React Use Animations - Qo'shimcha animatsiyalar

Development Tools

• ESLint - Kod sifatini tekshirish
• Vite Plugin React - React integratsiyasi
• @types/react - TypeScript tiplari

---

📂 Loyiha Tuzilishi

weather-app/
├── 📁 public/
│   ├── 🖼️ vite.svg
│   └── ...
├── 📁 src/
│   ├── 📁 components/
│   │   ├── 🏠 Header/
│   │   ├── 🔍 SearchBar/
│   │   ├── 🌤️ WeatherDetails/
│   │   ├── 📅 ForecastList/
│   │   ├── 🗺️ Map/
│   │   └── ...
│   ├── 📁 pages/
│   │   ├── 🏠 Home/
│   │   └── ℹ️ AboutUs/
│   ├── 📁 hooks/
│   ├── 📁 utils/
│   ├── ⚛️ App.jsx
│   ├── 🚀 main.jsx
│   └── 🎨 index.css
├── 🔐 .env
├── 📦 package.json
├── ⚙️ vite.config.js
└── 📖 README.md

---

📄 Sahifalar

• 🏠 Home - Asosiy sahifa, ob-havo ma'lumotlari
• 📅 Forecast - 5 kunlik batafsil prognoz
• 🗺️ Map - Google Maps integratsiyasi
• ℹ️ About Us - Ilova haqida ma'lumot

---

🚀 O'rnatish va Ishga Tushirish

Talablar

• 🟢 Node.js (v16+)
• 🟢 npm yoki yarn

Qadamlar

1. 📥 Repositoryni klonlash

   git clone https://github.com/your-username/weather-app.git
   cd weather-app

2. 📦 Kutubxonalarni o'rnatish

   npm install

3. 🔐 Environment faylini yaratish

   cp .env.example .env

   .env faylida API kalitini qo'shing:

   VITE_GOOGLE_MAPS_API_KEY=your_api_key_here

4. ▶️ Saytni ishga tushirish

   npm run dev

5. 🌐 Brauzerda ochish

   http://localhost:5173
   

---

📸 Screenshots

🏠 Asosiy Sahifa

📅 Prognoz Sahifasi

🗺️ Xarita Sahifasi

---

🎮 Foydalanish

🧭 Navigatsiya

• Header menyusi orqali sahifalar o'rtasida o'ting
• Sidebar'da qo'shimcha funksiyalar mavjud
• Mobile versiyada responsive dizayn ishlaydi

🔍 Qidiruv

• Search bar'da shahar nomini kiriting
• Enter bosib yoki 🔍 tugmasini bosing
• Ob-havo ma'lumotlari avtomatik yuklanadi

🗺️ Xarita

• Map bo'limida joylashuvni ko'ring
• Zoom va pan funksiyalaridan foydalaning

📱 Responsive Dizayn

• 💻 Desktop: To'liq funksiyalar
• 📱 Tablet: Moslashuvchan layout
• 📱 Mobile: Touch-friendly interfeys

---

🤝 Hissa Qo'shish

Hissa qo'shishni xohlaysizmi? 🎉 Ajoyib!

1. 🍴 Fork qiling
2. 🌿 Feature branch yarating

   git checkout -b feature/amazing-feature

3. 💾 Commit qiling

   git commit -m 'Add amazing feature'

4. 📤 Push qiling

   git push origin feature/amazing-feature

5. 🔄 Pull Request yarating

Development Guidelines

• ✅ ESLint qoidalariga rioya qiling
• ✅ Componentlarni modulli yozing
• ✅ CSS BEM metodologiyasidan foydalaning
• ✅ Commit xabarlari aniq va tushunarli bo'lsin

---

📄 Litsenziya

Bu loyiha MIT litsenziyasi ostida tarqatiladi.

---

👥 Mualliflar

Jahongir - Frontend Developer
Passionate about creating beautiful and functional web applications

---

🙏 Rahmat

React jamoasiga ajoyib framework uchun 🙌
Google Maps jamoasiga xarita API uchun 🗺️
Barcha open-source contributorlarga 🌟

---

🌟 Bu ilovani yoqtirdingizmi?

GitHub'da yulduzcha qo'ying! ⭐

---

📧 Savollaringiz bormi? Issue oching yoki email yozing.

Made with ❤️ in Uzbekistan