Foydalanish

FIAS (Frontend Initial Architecture System) starter kitga xush kelibsiz. Ushbu sahifa sizga birinchi loyihangizni yaratishga va FIAS bilan ishlash asoslarini tushunishga yordam beradi.

Start using

📦 1. Talablar

Loyihani boshlashdan oldin quyidagi dasturlar kompyuteringizda o‘rnatilganligiga ishonch hosil qiling:

• Node.js (versiyasi 18 yoki undan yuqori)

• npm (versiyasi 9 yoki undan yuqori) yoki yarn / pnpm

• Git

Versiyalarni quyidagi buyruqlar bilan tekshirishingiz mumkin:

node -v
npm -v

---

🚀 2. Yangi loyiha yaratish

FIAS sizga tez va qulay yangi loyiha yaratish uchun CLI vositasini taqdim etadi. Quyidagi buyruqni terminalda bajarish kifoya:

npx create-fias

Buyruq bajarilgach, quyidagi savollarga javob bering:

• Loyiha nomini tanlang

• Next.js yoki React shablonlaridan birini tanlang

---

🧱 3. Loyiha tuzilmasi

Yangi loyiha yaratilgach, u Feature-Sliced Design (FSD) metodologiyasi asosida quyidagi tuzilma bo‘yicha tashkil etiladi:

• app/ – Next.js App Router uchun (faqat Next.js’da)

• shared/ – umumiy komponentlar, hook’lar va util’lar

• entities/, features/, widgets/, pages/ – FSD bo‘yicha tashkil etilgan asosiy bo‘limlar

• public/ – statik fayllar (rasmlar, favicon va h.k.)

• styles/ – global uslublar va Tailwind CSS konfiguratsiyasi

Tuzilma haqida batafsil “Project Structure” bo‘limida tanishishingiz mumkin.

---

🧪 4. Ishga tushirish

Loyihangiz katalogiga o‘ting va dev serverni ishga tushiring:

cd your-project-name
npm run dev

Brauzeringizda http://localhost:3000 sahifasiga o‘ting va ilovangizni ishda ko‘ring.

---

🧰 5. Nimalar tayyor holatda keladi?

Loyihangiz quyidagi zamonaviy texnologiyalar va konfiguratsiyalar bilan tayyor holatda taqdim etiladi:

• TypeScript

• Tailwind CSS va shadcn/ui

• Yorug‘ / qorong‘i rejim tugmasi

• i18n (tilni avtomatik aniqlovchi xalqaro ko‘p tillilik tizimi)

• React Query orqali API chaqiruvlar

• Oldindan sozlangan ESLint va Prettier

• Husky yordamida Git hook’lar:

  • pre-commit → kodni lint va format qiladi

  • pre-push → build jarayonini tekshiradi

🔧 Foydali hook’lar va util’lar:

Hook’lar:

• useCloser

• useMobile

• useWindowSize

Funktsiyalar:

• formatDate

• formatPhone

• formatPrice

---

✅ 6. Keyingi qadamlar

Loyihangiz tayyor bo‘lgach, hujjatlar bilan tanishing:

• Kod yozish standartlari va linting haqida bilib oling

• Routing va layout tushunchalarini o‘rganing

• Mavzular va UI komponentlarni sozlang

Agar ishlash jarayonida muammolarga duch kelsangiz, “Troubleshooting” bo‘limiga qarang yoki github issues bo'limiga savol yuboring.