W E B F O R G E

webforge-cli

Tayyor veb-loyihalarni soniyalarda yaratish uchun interaktiv CLI

English | Русский | O'zbek

Shablon, freymvork, stilizatsiya, holat boshqaruvi, paradigma, routing, i18n va mavzuni tanlang — layoutlar, mavzu almashtirish, til almashtirish va real demo-kontent bilan to'liq sozlangan ko'p sahifali SPA oling.

Tez boshlash

npx @beknurakhmed/webforge-cli

Yoki global o'rnating:

npm i -g @beknurakhmed/webforge-cli
webforge-cli my-app

Nima olasiz

┌  webforge-cli  — loyiha shablon generatori
│
◆  Loyiha nomi          →  my-app
◆  Shablon turi         →  E-commerce
◆  Freymvork            →  React
◆  Paradigma            →  Funksional
◆  Stilizatsiya         →  Tailwind CSS
◆  Holat boshqaruvi     →  Zustand
◆  Routing              →  Ha
◆  Xalqarolashtirish    →  Ha (EN / RU / UZ)
◆  Mavzu                →  Qorong'i
◆  Qo'shimcha vositalar →  TypeScript, ESLint, Prettier
│
◇  Loyiha muvaffaqiyatli yaratildi!
│
│  Keyingi qadamlar:
│    cd my-app
│    npm install
│    npm run dev
│
└  Omadli kodlash!

Shablonlar

| Shablon | Tavsif | Sahifalar | |---------|--------|-----------| | Landing Page | Marketing sahifasi: hero, xususiyatlar, CTA | Bitta sahifa | | E-commerce | Mahsulot katalogi, savatcha, mahsulot kartasi | Bosh sahifa, Mahsulot, Savatcha | | CRM | Kontaktlar, bitimlar, savdo voronkasi | Dashboard, Kontaktlar, Bitimlar, Sozlamalar | | Dashboard | KPI kartalar, grafiklar, jadvallar | Umumiy, Analitika, Foydalanuvchilar, Sozlamalar | | Blog | Maqolalar, kategoriyalar, muallif sahifalari | Bosh sahifa, Maqola, Kategoriya, Haqida | | Portfolio | Loyihalar, ko'nikmalar, aloqa formasi | Bosh sahifa, Loyihalar, Men haqimda, Aloqa |

Freymvorklar

| Freymvork | Yig'uvchi | Versiya | Routing | |-----------|-----------|---------|---------| | React | Vite | React 19 | react-router-dom v7 | | Vue | Vite | Vue 3.5 | vue-router v4 | | Angular | Angular CLI | Angular 19 | @angular/router | | Vanilla | Vite | TypeScript | Maxsus hash router | | Next.js | Next.js | v15 | App Router (fayl asosida) | | Nuxt | Nuxt | v3 | Fayl asosida routing |

Stilizatsiya — 8 ta variant

| Stilizatsiya | Mos freymvorklar | |-------------|-----------------| | Tailwind CSS | React, Vue, Angular, Vanilla, Next.js, Nuxt | | SCSS | React, Vue, Angular, Vanilla, Next.js, Nuxt | | CSS Modules | React, Vue, Vanilla, Next.js, Nuxt | | Styled Components | React, Next.js | | Material UI (MUI) | React, Next.js | | Chakra UI | React, Next.js | | Ant Design | React, Vue, Next.js | | Angular Material | Angular |

Har bir stilizatsiya varianti haqiqiy stilizatsiya qilingan komponentlar yaratadi — faqat dependency o'rnatish emas. Tailwind utility-klasslar ishlatadi, SCSS o'zgaruvchilar va joylashtirish, MUI sx propslar va h.k.

Holat boshqaruvi

| Kutubxona | Mos freymvorklar | |-----------|-----------------| | Redux Toolkit | React, Next.js | | Zustand | React, Next.js | | MobX | React, Next.js | | Pinia | Vue, Nuxt | | RxJS | Angular | | NgRx | Angular |

Kodlash paradigmasi

• Funksional — hooklar, composablelar, toza funksiyalar, signallar
• SOLID OOP — klasslar, servislar, dependency injection, OOP patternlar

Routing

Barcha freymvorklar ixtiyoriy ko'p sahifali routing, layoutlar va navigatsiyani qo'llab-quvvatlaydi:

| Freymvork | Router | Pattern | |-----------|--------|---------| | React | react-router-dom v7 | BrowserRouter + Layout bilan Outlet | | Vue | vue-router v4 | createRouter + RouterView | | Angular | @angular/router | provideRouter + router-outlet | | Vanilla | Maxsus hash router | ~30 qator hash-router | | Next.js | App Router | Fayl asosida routing (o'rnatilgan) | | Nuxt | Nuxt Router | Fayl asosida routing (o'rnatilgan) |

Xalqarolashtirish (i18n)

O'rnatilgan til almashtirgich EN / RU / UZ tarjimalari va localStorage'da saqlash bilan. Har bir freymvork idiomatik amalga oshirish oladi — React hook, Vue composable, Angular servis va h.k.

Mavzu

Standart mavzu sifatida Yorug' yoki Qorong'ini tanlang. Mavzu almashtirgich komponent va CSS o'zgaruvchilari bilan to'liq ishlaydi. Mavzu tanlovi localStorage'da saqlanadi.

Angular rejimi

Angular ishlatganda ikkita variant mavjud:

• Standalone (standart) — zamonaviy standalone komponentlar
• NgModules — an'anaviy modulli arxitektura

Arxitektura

webforge-cli qatlamli overlay tizimi ishlatadi:

Qatlam 1    Freymvork bazasi         (React / Vue / Angular / ...)
Qatlam 1.5  Angular rejimi           (Standalone / NgModules)
Qatlam 2    Shablon overlay          (Landing / E-commerce / CRM / ...)
Qatlam 3    Paradigma varianti       (Funksional / OOP)
Qatlam 4    Stilizatsiya konfiguratsiyasi (Tailwind / SCSS / MUI / ...)
Qatlam 5    Stilizatsiya komponentlari   (Tanlangan stil uchun komponentlar)
Qatlam 6    Holat boshqaruvi         (Redux / Zustand / Pinia / ...)
Qatlam 7    Routing                  (Freymvork uchun router + sahifalar)
Qatlam 8    Xalqarolashtirish        (i18n servis + til almashtirgich)
Qatlam 9    Mavzu                    (CSS o'zgaruvchilari + mavzu almashtirgich)
Qatlam 10   Qo'shimcha vositalar     (TypeScript / ESLint / Prettier)

Har bir qatlam oldingi qatlam ustiga fayllarni ko'chiradi. Dependency'lar package.jsonga avtomatik birlashtiriladi.

Jami kombinatsiyalar: 6 shablon x 6 freymvork x 8 stil x 7 holat x 2 paradigma x 2 routing x 2 i18n x 2 mavzu = 32 000+ noyob loyiha

Misollar

# React + E-commerce + Tailwind + Zustand + Routing + i18n + Qorong'i mavzu
npx @beknurakhmed/webforge-cli
# → my-store → E-commerce → React → Functional → Tailwind CSS → Zustand → Routing ✓ → i18n ✓ → Dark

# Vue + Dashboard + SCSS + Pinia
npx @beknurakhmed/webforge-cli
# → admin → Dashboard → Vue → Functional → SCSS → Pinia → Routing ✓ → i18n ✗ → Light

# Next.js + Blog + Ant Design + i18n
npx @beknurakhmed/webforge-cli
# → my-blog → Blog → Next.js → Functional → Ant Design → None → Routing ✓ → i18n ✓ → Light

# Angular + CRM + NgModules + Angular Material + NgRx
npx @beknurakhmed/webforge-cli
# → crm-app → CRM → Angular (NgModules) → SOLID OOP → Angular Material → NgRx → Routing ✓ → i18n ✗ → Dark

Talablar

• Node.js >= 18.0.0

Ishlab chiqish

git clone https://github.com/beknurakhmed/webforge-cli.git
cd webforge-cli
npm install
npm run build
node dist/index.js

| Skript | Tavsif | |--------|--------| | npm run build | tsup orqali yig'ish | | npm run dev | Kuzatish rejimi | | npm start | CLI ishga tushirish | | npm run typecheck | TypeScript tekshiruvi |

Muallif

Beknur — Frontend dasturchi va Software Engineer

• GitHub: @beknurakhmed
• npm: @beknurakhmed

Litsenziya

MIT © 2026 Beknur