Yakuniy loyiha — do'kon ilovasi

~90 daq · React Native · Nashr qilish

Maqsad

Kurs davomida o'rgangan hamma narsani bitta to'liq ilovada birlashtirasiz — Android va iOS uchun ishlaydigan, do'konga chiqarishga tayyor internet do'kon ilovasi. Bu portfoliongizdagi asosiy loyiha bo'lishi mumkin.

Bu dars — topshiriq: talablar, tuzilma, bosqichlar va har bir qism uchun tegishli darsga havola. Kodni o'zingiz yozasiz.

Backend

Ikki variant:

  • A (tez boshlash): DummyJSON — https://dummyjson.com/products, /auth/login, /carts — tayyor test API
  • B (to'liq): o'z backend ingiz — saytdagi NestJS yoki Express kursi va MySQL kursining dokon sxemasi asosida (MySQL 5-dars)

A dan boshlang; ilova tayyor bo'lgach — B ga o'tish faqat lib/api.ts va so'rov hook larini o'zgartirishni talab qiladi (agar to'g'ri tuzilgan bo'lsa).

Funksional talablar

Mehmon

  • Bosh sahifa: banner karuseli, toifalar (gorizontal), "Ommabop" va "Yangi" qatorlari
  • Katalog: grid (2 ustun, planshetda 3-4), filtr (toifa, narx oralig'i), saralash, cheksiz scroll
  • Qidiruv: debounce bilan, oxirgi qidiruvlar tarixi
  • Mahsulot sahifasi: rasmlar galereyasi (surib ko'rish, pinch-zoom), narx, tavsif, sharhlar, "Savatga qo'shish", "Ulashish"
  • Savat: soni o'zgartirish, o'chirish (swipe), jami summa — kirmasdan ham ishlaydi

Kirgan foydalanuvchi

  • Kirish / ro'yxatdan o'tish (forma + Zod validatsiya)
  • Buyurtma rasmiylashtirish: manzil (xaritadan tanlash yoki joriy joylashuv), telefon, izoh
  • Buyurtmalar tarixi va holati
  • Sevimlilar
  • Profil: rasm (galereya/kamera), sozlamalar (mavzu, til, bildirishnomalar), chiqish, hisobni o'chirish

Umumiy

  • Qorong'i rejim
  • Offline: katalog va buyurtmalar keshdan; savat mahalliy
  • Push: buyurtma holati o'zgarganda, bosilganda — buyurtma ekrani
  • Deep link: dokon://mahsulot/42 va https://dokon.uz/mahsulot/42

Ekranlar va navigatsiya

app/
├── _layout.tsx                    ← Provider lar, Stack, Stack.Protected (30)
├── (tabs)/
│   ├── _layout.tsx                ← Tabs + savat badge (27)
│   ├── index.tsx                  ← Bosh sahifa
│   ├── katalog.tsx
│   ├── savat.tsx
│   └── profil.tsx
├── mahsulot/[id].tsx              ← (29)
├── qidiruv.tsx                    ← modal (28)
├── filtr.tsx                      ← modal, formSheet (28)
├── kirish.tsx                     ← himoyalanmagan
├── royxat.tsx
└── (auth)/                        ← Stack.Protected guard={kirgan}
    ├── rasmiylashtirish.tsx
    ├── manzil-tanlash.tsx         ← xarita (41)
    ├── buyurtmalar/index.tsx
    ├── buyurtmalar/[id].tsx
    └── sevimlilar.tsx

Arxitektura

lib/
├── api.ts            ← fetch, token, 401 → refresh (31, 35)
├── xotira.ts         ← AsyncStorage yordamchilari (34)
└── push.ts           ← token olish (42)
api/                  ← TanStack Query hook lari (32)
├── mahsulotlar.ts    ← useKatalog, useMahsulot, useQidiruv
├── buyurtmalar.ts    ← useBuyurtmalar, useBuyurtmaBerish
└── profil.ts
stores/               ← Zustand + persist (33)
├── savat.ts
├── sozlamalar.ts
└── qidiruvTarixi.ts
context/
└── auth.tsx          ← (30)
schemas/              ← Zod (22)
├── auth.ts
└── buyurtma.ts
components/
├── ui/               ← Tugma, Input, FormInput, Karta, Skeleton, Toast
├── MahsulotKarta.tsx
├── SavatBand.tsx     ← swipe-to-delete (46)
└── ...
constants/
└── theme.ts          ← ranglar, bo'shliqlar (13, 17)
hooks/
├── useMavzu.ts
└── useDebounce.ts

Qoidalar:

  • Ekranlar (app/) — faqat tuzilma va komponentlarni birlashtirish; fetch yo'q
  • Server holati — faqat TanStack Query; klient holati — Zustand; forma — RHF
  • Ranglar — faqat useMavzu() orqali; qattiq kodlangan '#fff' yo'q
  • Har bir ro'yxat — FlatList / FlashList, memo elementlar

Bosqichlar

1-bosqich: Poydevor (~1 kun)

  • create-expo-app, reset-project, @/ aliaslari (2-4)
  • constants/theme.ts, useMavzu, userInterfaceStyle: automatic (17)
  • UI komponentlar: Tugma, Input, Skeleton (9, 10, 47)
  • Tabs va Stack tuzilmasi (25-27)
  • QueryClientProvider + persister + OfflineBanner (32, 36)

2-bosqich: Katalog (~1-2 kun)

  • api/mahsulotlar.ts — useInfiniteQuery (32)
  • Katalog grid, numColumns ekran kengligiga qarab (15, 19)
  • Skeleton, xato va bo'sh holatlar (31, 47)
  • Mahsulot ekrani: expo-image galereya, parallax (7, 45)
  • Filtr — modal, URL parametrlari bilan (28, 29)
  • Qidiruv — debounce, tarix (37)

3-bosqich: Savat (~1 kun)

  • stores/savat.ts — Zustand + persist (33)
  • Badge, haptics, "Qo'shildi" toast — Reanimated entering (27, 43, 45)
  • Swipe-to-delete, layout animatsiyasi (46)

4-bosqich: Autentifikatsiya (~1 kun)

  • context/auth.tsx, SecureStore, refresh token (30, 35)
  • Stack.Protected, splash (30)
  • Kirish va ro'yxat formalari — RHF + Zod + klaviatura (21-23)

5-bosqich: Buyurtma (~1-2 kun)

  • Manzil tanlash — xarita, markazdagi belgi, joriy joylashuv (41)
  • Rasmiylashtirish — useMutation, ikki marta yuborishdan himoya, router.replace (26, 32)
  • Buyurtmalar tarixi — SectionList sana bo'yicha (20)

6-bosqich: Qurilma imkoniyatlari (~1 kun)

  • Profil rasmi — galereya/kamera, kichraytirish, yuklash (40)
  • Push — token, kanal, bosilganda ekranga (42)
  • Ulashish, qo'ng'iroq, deep link (29, 43)
  • Ruxsat ekranlari — tushuntirish va sozlamalar (38)

7-bosqich: Sayqal va nashr (~1-2 kun)

  • UX tekshiruv ro'yxati (47-dars) — hamma bandlar
  • Past darajali Android va iPhone da sinov (16)
  • Sentry (5)
  • eas build — preview APK do'stlarga (48)
  • Ikonka, splash, skrinshotlar, maxfiylik siyosati
  • Play: internal testing (49); iOS: TestFlight (50)
  • expo-updates, kanallar (51)

Sinov ro'yxati

  • Parvoz rejimida ilovani ochish — katalog ko'rinadi, banner chiqadi
  • Savatga qo'shish → ilovani yopish → ochish — savat joyida
  • Kirish → ilovani yopish → ochish — kirish ekrani ko'rinmaydi
  • Kirgandan keyin "orqaga" — kirish ekraniga qaytmaydi
  • "Buyurtma berish" ni tez ikki marta bosish — bitta buyurtma
  • Kamera ruxsatini rad etish — tushunarli ekran, sozlamalar havolasi
  • Qorong'i rejimga o'tish — hamma ekranlar o'qiladi
  • Eng katta tizim shrifti — tugmalar buzilmaydi
  • Ekranni burish (planshetda) — layout moslashadi
  • Deep link — mahsulot ekrani ochiladi; mavjud bo'lmagan ID — "topilmadi"
  • Push bosish (ilova yopiq) — buyurtma ekrani
  • 200+ mahsulot scroll — 60 kadr (Perf Monitor)

Qo'shimcha vazifalar

  1. ⭐⭐ Ko'p tillilik: expo-localization + i18next — o'zbek (lotin), rus, ingliz
  2. ⭐⭐ To'lov: Payme yoki Click — WebView yoki expo-web-browser orqali checkout sahifasi, serverda tasdiqlash
  3. ⭐⭐ Biometrik kirish: expo-local-authentication (35)
  4. ⭐⭐⭐ Chat operator bilan — WebSocket, FlatList inverted, klaviatura (23)
  5. ⭐⭐⭐ Testlar: Jest + React Native Testing Library — komponentlar; Maestro — E2E oqimlar ("katalog → savat → rasmiylashtirish")
  6. ⭐⭐⭐ O'z backend: NestJS + MySQL, dokon sxemasi, JWT + refresh, Expo push yuborish

Tabriklaymiz! 🎉

Siz React Native kursini tugatdingiz. Endi siz:

  • Expo va TypeScript bilan Android va iOS ilovalar yaratasiz
  • Native komponentlar, Flexbox, qorong'i rejim va safe area bilan moslashuvchan interfeys qurasiz
  • Katta ro'yxatlar, formalar va klaviaturani to'g'ri boshqarasiz
  • Expo Router bilan murakkab navigatsiya va himoyalangan ekranlar yasaysiz
  • TanStack Query, Zustand va SecureStore bilan ma'lumot va holatni boshqarasiz
  • Offline ishlaydigan ilovalar qilasiz
  • Kamera, galereya, joylashuv, push bildirishnomalar bilan ishlaysiz
  • Reanimated va Gesture Handler bilan silliq animatsiyalar va imo-ishoralar yaratasiz
  • EAS bilan ilovani yasab, Google Play va App Store ga chiqarasiz va OTA bilan yangilaysiz

Keyingi qadamlar:

  • Saytdagi NestJS yoki Express va MySQL / PostgreSQL kurslari — o'z backend ingiz
  • Next.js kursi — xuddi shu React bilimlari bilan veb versiya
  • O'z g'oyangiz — kichik, lekin to'liq ilovani do'konga chiqaring. Birinchi haqiqiy foydalanuvchining sharhi — eng yaxshi o'qituvchi

Endi telefon ekrani — sizning kanvasingiz.