You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Versiya: 1.0.0 Status: Planlaşdırma mərhələsi Son yenilənmə: 2026 GitHub:your-username/shopflow
Layihə Haqqında
ShopFlow — müasir, tam funksional, SEO-optimallaşdırılmış e-commerce platformasıdır.
Sistem üç fərqli rol üçün interfeyslər təqdim edir: Admin, Vendor və Customer.
Layihə Frontend (Next.js 14 + TypeScript) və Backend (Node.js + Express + TypeScript)
olmaqla iki hissədən ibarətdir. Verilənlər bazası olaraq PostgreSQL + Prisma ORM istifadə olunur.
Texnologiya Yığımı
Frontend
Texnologiya
Versiya
Məqsəd
Next.js
14+
React framework — App Router, SSR, SSG, ISR
TypeScript
5+
Type safety
Tailwind CSS
3+
Utility-first styling
Shadcn/ui
latest
Hazır, accessible UI komponentləri
Lucide React
latest
İkon kitabxanası
Zustand
4+
Client state (səbət, auth, UI)
TanStack Query
5+
Server state, caching, background refetch
React Hook Form
7+
Performanslı form idarəsi
Zod
3+
Schema validation (backend ilə paylaşılır)
Axios
1+
HTTP client
next-intl
3+
Çoxdilli dəstək — AZ, EN, RU (SEO-friendly)
next-sitemap
4+
Sitemap.xml + robots.txt avtomatik generasiya
Stripe.js
latest
Ödəniş frontend inteqrasiyası
sharp
latest
Next.js Image Optimization (WebP/AVIF)
Backend
Texnologiya
Versiya
Məqsəd
Node.js
20+
Runtime mühit
Express.js
4+
Web framework
TypeScript
5+
Type safety
tsx
latest
TypeScript executor
PostgreSQL
16+
Əsas relational verilənlər bazası
Prisma ORM
5+
Type-safe ORM, migration, seeding
JSON Web Token
9+
Autentifikasiya (access + refresh token)
bcryptjs
2+
Şifrə hashlanması
Resend
latest
Transactional email (3000/ay pulsuz)
Multer
1+
Fayl qəbulu (Cloudinary-ə ötürmə)
Cloudinary SDK
latest
Şəkil saxlama və transformasiya
Stripe
latest
Ödəniş emalı, webhook
Helmet
7+
HTTP security headers
CORS
2+
Cross-Origin idarəsi
Morgan
1+
HTTP request logging
Winston
3+
Strukturlaşdırılmış server logları
dotenv
16+
Mühit dəyişənləri
express-rate-limit
7+
Rate limiting
express-validator
7+
Request validasiyası
Jest + Supertest
29+
Test framework
SEO Strategiyası
Next.js 14 App Router e-commerce üçün ən güclü SEO imkanlarını təqdim edir.
URL & NAVİQASİYA
✅ Məhsul URL-ləri slug əsaslı → /products/iphone-15-pro
✅ Kateqoriya slug → /category/elektronika
✅ Canonical URL hər səhifədə
✅ 301 redirect — köhnə URL-lər
✅ Breadcrumb + BreadcrumbList JSON-LD
DİL / BEYNƏLXALQ
✅ next-intl ilə /az /en /ru URL prefiksi
✅ hreflang tag-ları bütün səhifələrdə
✅ Hər dil üçün ayrı sitemap.xml
METADATA
✅ generateMetadata() hər dinamik səhifədə
✅ Open Graph — Facebook/WhatsApp paylaşım
✅ Twitter Card — Twitter paylaşım
✅ robots meta — admin/cart/checkout noindex
ŞƏKİL
✅ next/image — WebP/AVIF avtomatik konversiya
✅ Lazy loading + blur placeholder
✅ alt atributu bütün şəkillərdə
✅ Cloudinary CDN — sürətli çatdırılma
PERFORMANS (Core Web Vitals)
✅ Lighthouse score hədəfi: 95+
✅ ISR ilə statik kəşleme
✅ Font optimization (next/font)
✅ Code splitting (React.lazy)
SİTEMAP
✅ next-sitemap ilə avtomatik sitemap.xml
✅ Dinamik məhsul/kateqoriya URL-ləri
✅ robots.txt avtomatik generasiya
Hosting Seçimi (Pulsuz Tier)
Xidmət
Məqsəd
Pulsuz Limit
Niyə seçildi
Vercel
Frontend (Next.js)
Limitsiz deploy
Next.js-in rəsmi partneri, edge network, ISR dəstəyi
Render
Backend API
750 saat/ay
Auto-deploy, pulsuz SSL, sadə qurulum
Supabase
PostgreSQL
500MB, limitsiz müddət
Render-dən üstün — silinmir, GUI daxili
Cloudinary
Şəkil/media
25GB, 25k transform
CDN daxili, e-commerce üçün kifayət
Stripe (test)
Ödəniş
Limitsiz test
Sənaye standartı
Resend
Email
3000 email/ay
Müasir API, yüksək deliverability
💡 Tövsiyə: Verilənlər bazası üçün Supabase seçildi, çünki Render-in pulsuz
PostgreSQL-i 90 gündən sonra silinir. Supabase pulsuz planda limitsiz müddət verir.
Rəng Palitası
--color-primary:#0F172A; /* Tünd lacivert — əsas rəng */--color-primary-dark:#020617; /* Çox tünd */--color-accent:#F97316; /* Narıncı — CTA düymələri, qiymət */--color-accent-dark:#EA580C; /* Hover narıncı */--color-white:#FFFFFF;
--color-black:#0A0A0A;
--color-gray-50:#F8FAFC;
--color-gray-100:#F1F5F9;
--color-gray-200:#E2E8F0;
--color-gray-700:#334155;
--color-gray-900:#0F172A;
--color-success:#22C55E; /* Uğurlu sifariş, stokda var */--color-warning:#EAB308; /* Az stok xəbərdarlığı */--color-error:#EF4444; /* Xəta, stokda yoxdur */
Rolllar
Rol
Səlahiyyətlər
Admin
Tam idarəetmə: istifadəçilər, məhsullar, sifarişlər, vendorlar, kuponlar, statistika, kateqoriyalar, rəylər
Vendor
Öz mağazasını, məhsullarını, sifarişlərini idarə edir
Customer
Məhsul axtar, səbət, sifariş, ödəniş, rəy, istək siyahısı
Dil Dəstəyi (SEO-friendly)
AZ — Azərbaycan dili (default) → shopflow.az/az/...
EN — İngilis dili → shopflow.az/en/...
RU — Rus dili → shopflow.az/ru/...
Hər dilin öz sitemap.xml-i ayrıca generasiya olunur.
hreflang tag-ları bütün səhifələrdə avtomatik əlavə edilir.
# Repo-nu klonla
git clone https://github.com/your-username/shopflow.git
cd shopflow
# ── Backend ──────────────────────────────────────────cd server
npm install
cp .env.example .env
# .env faylını doldur
npx prisma migrate dev --name init # Cədvəlləri yarat
npx prisma db seed # Test data doldur
npm run dev # localhost:5000# ── Frontend (yeni terminal) ─────────────────────────cd ../client
npm install
cp .env.example .env.local
# .env.local faylını doldur
npm run dev # localhost:3000# ── Prisma Studio (vizual DB idarəsi) ────────────────cd server && npx prisma studio # localhost:5555# ── Test ─────────────────────────────────────────────cd server && npm run testcd client && npm run test# ── Production Build ──────────────────────────────────cd client && npm run build
cd server && npm run build && npm start