Client PreviewClient CMS and commerce platform / 2026
Problem
The client needs content, services, case studies, products, orders, careers, FAQs, contact submissions, and media managed without code changes.
Solution
Build a Next.js public site, a React/Refine backoffice, and a NestJS/Prisma backend with public APIs, protected admin APIs, translations, media processing, and PostgreSQL.
Key Features
Arabic-first public website with landing, services, case studies, about, join-us, cart, contact, and service-detail routes
Backend public/admin API split for public content consumption and protected CMS mutations
Cookie-based JWT authentication with CSRF protection for the admin backoffice
Prisma data model for AR/FR/EN translations, JSON-backed page sections, products, orders, blog posts, careers, FAQ, and contact records
React/Refine backoffice resources for dashboard, home, services, store, orders, about, blogs, contact, careers, and settings
Local media pipeline for images, videos, documents, receipts, avatars, and support files with Sharp optimization
Algerian localization details including DZD pricing, local phone validation, wilaya/commune data, and payment methods such as CCP and BaridiMob
SEO setup on the public site with metadata, sitemap, robots rules, and Vercel client preview deployment
Architecture Map
Mermaid
flowchart TB
Visitor["Public visitor"] --> PublicSite["Next.js public website"]
PublicSite --> PublicPages["Landing, services, case studies, store, cart, contact, careers"]
PublicSite --> SEO["Metadata, sitemap, robots"]
PublicSite --> PublicApi["NestJS public API"]
Admin["Nightbyte / client admin"] --> Backoffice["React Refine backoffice"]
Backoffice --> Auth["Cookie JWT auth and CSRF token"]
Auth --> AdminApi["NestJS admin API"]
PublicApi --> Modules["CMS and commerce modules"]
AdminApi --> Modules
Modules --> Home["Home, about, services, FAQ"]
Modules --> Content["Blog, case content, careers, contact"]
Modules --> Commerce["Store, products, orders, payments"]
Modules --> Media["Uploads, documents, videos, Sharp optimization"]
Modules --> I18n["AR, FR, EN translation tables and JSON sections"]
Modules --> Prisma["Prisma ORM"]
Prisma --> Postgres[("PostgreSQL")]
Media --> Uploads["Local uploads served by backend"]
Commerce --> Algeria["DZD pricing, Algerian phone and wilaya data"]
AdminApi --> Dashboard["Dashboard and settings"]