# Foydalanish

<figure><img src="https://2732173407-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT4YO4oylbhJSf6A9M9vf%2Fuploads%2Frp0KefVhjKdEYXqb27OL%2Fstart.svg?alt=media&#x26;token=3feb83ac-0f2d-4311-bc62-f9c3230793bd" alt=""><figcaption><p>Start using</p></figcaption></figure>

## 📦 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:

```bash
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:

```bash
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:

```bash
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 komponentlar**ni sozlang

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