Chapter 38 — Yakuniy Loyihalar

Handbook davomida o'rgangan barcha bilimlarni birlashtiruvchi, progressiv murakkablikdagi loyihalar ro'yxati.

---

38.1 🟢 Level 1-2: Counter va Todo App

Loyiha 1 — Interactive Counter

Talablar: Increment, decrement, reset. Konseptlar: useState, events.

Loyiha 2 — Todo Application

Talablar: Qo'shish, o'chirish, bajarilgan deb belgilash, filtrlash (barchasi/bajarilgan/bajarilmagan). Konseptlar: useState (array), lists & keys, conditional rendering.

38.2 🟡 Level 3-5: Weather, Movie Search, Expense Tracker

Loyiha 3 — Weather Application

Talablar: Shahar bo'yicha ob-havo qidirish, loading/error holatlari. Konseptlar: useEffect, data fetching, conditional rendering.

Loyiha 4 — Movie Search

Talablar: Debounced qidiruv, natijalar ro'yxati, tafsilotlar sahifasi (routing). Konseptlar: useDebounce, React Router, useParams.

Loyiha 5 — Expense Tracker

Talablar: Xarajat qo'shish/o'chirish, kategoriya bo'yicha filtrlash, umumiy summa. Konseptlar: useReducer, derived state, forms.

38.3 🔴 Level 6-7: E-commerce va Admin Dashboard

Loyiha 6 — E-commerce Frontend

Talablar: Mahsulotlar katalogi, savat (Context/Redux), checkout jarayoni, autentifikatsiya. Konseptlar: Context/Redux, protected routes, forms validation.

Loyiha 7 — Admin Dashboard

Talablar: Ma'lumotlar jadvali, sahifalash, qidiruv, CRUD amallari, ruxsatlar tizimi. Konseptlar: Data fetching, pagination, performance optimization.

38.4 🟣 Final Project: Production-Quality Application

Talablar

• Feature-based arxitektura (PART 31)
• TypeScript bilan tip xavfsizligi (PART 34)
• Error Boundary va to'liq xato boshqaruvi (PART 27)
• Accessibility standartlariga rioya qilish (PART 28)
• Testlar (PART 29)
• Performance optimallashtirilgan (PART 25)
• Production checklist bajarilgan (PART 36)

📝 Practice Exercises

🟣 Exercise 1 — Final Challenge

Task: Yuqoridagi loyihalardan birini (masalan E-commerce Frontend) noldan boshlab, Requirements → UI Components → State Architecture → Folder Structure → API Architecture → Edge Cases → Performance → Accessibility tartibida to'liq loyihalashtiring va amalga oshiring.

🐛 Debugging Challenge (Loyiha Darajasida)

Stsenariy: E-commerce loyihangizda savat sahifasi juda sekin ishlayapti, checkout jarayonida foydalanuvchilar formani to'ldirishda xatoliklarga duch kelmoqda, va production'da vaqti-vaqti bilan "oq ekran" xatosi haqida shikoyatlar kelmoqda.

Your Task: Bu uchta muammoni handbookdagi qaysi boblar yordamida yechish mumkin?

<details> <summary>Solution</summary> 1. **Sekin savat sahifasi** → PART 25 (Performance): React.memo, useMemo bilan keraksiz re-renderlarni kamaytirish. 2. **Forma xatoliklari** → PART 10 (Forms): to'g'ri validatsiya va foydalanuvchiga aniq xato xabarlari. 3. **"Oq ekran" xatosi** → PART 27 (Error Handling): Error Boundary qo'shib, xatoni chiroyli fallback UI bilan almashtirish. </details>

📌 Chapter Summary

Capstone loyihalar — handbookda o'rgangan barcha tushunchalarni (komponentlar, state, hooks, routing, performance, testing, accessibility) real, progressiv murakkablikdagi ilovalarda birlashtirish imkonini beradi.

🎯 Key Takeaships

• Har bir loyiha oldingi bilimlar ustiga quriladi
• Talablarni aniqlashtirish — kodlashdan oldingi eng muhim qadam
• Real muammolar ko'pincha bir nechta konsepsiyani birgalikda talab qiladi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01🟢 Counter, Todo → useState, lists, conditional rendering
02🟡 Weather, Movie Search, Expense Tracker → useEffect, routing, useReducer
03🔴 E-commerce, Admin Dashboard → Context/Redux, performance, protected routes
04🟣 Final Project → Barcha konsepsiyalar + TypeScript + Testing + Production checklist

---