Back to projects

BP Holding Platform

Bilingual digital ecosystem for a Riyadh-based engineering & contracting group — corporate site, lead-gen funnels, full admin console, and Phase 2 e-commerce, all Arabic-first with RTL throughout.

Next.js 16TypeScriptSupabaseTailwind v4next-intl (RTL)ImageKit
Live demo
BP Holding Platform

Problem

Business Pioneers Holding — a Riyadh-based engineering and contracting group founded in 2021 — was operating behind a static "site under development" placeholder at bpholding.net. They needed more than a brochure site: a full bilingual (Arabic-first / English) digital ecosystem with a corporate presence, lead-generation funnels (RFQ, careers, contractors), a complete admin console, and an architecture that could absorb e-commerce, an HR portal, a member network, and AI-driven features in later phases without a rewrite.

Approach

Built on Next.js 16's App Router with React Server Components doing the data fetching against Supabase Postgres directly — admin and store islands only client-hydrate where genuinely needed. Arabic is the default locale with RTL flipping the entire layout via CSS logical properties (ms-/me-/start-/end-) and next-intl pathname routing — not bolted on after English. Every Supabase table is RLS-enabled; the service-role client is confined to admin Server Actions. The Next 16 "proxy" (formerly middleware) handles locale routing and role-gated auth at the edge, so unauthenticated requests never reach a protected page. Aceternity-heavy marketing components are dynamically imported and respect prefers-reduced-motion.

Stack & rationale

  • Next.js 16 + React 19 (App Router, RSC-first)
    Server components fetch directly from Postgres for the public pages — no internal API tier — and the new `proxy.ts` runs i18n + auth gating at the edge before any handler executes.
  • Supabase (Postgres + RLS + @supabase/ssr)
    Single backend covering auth, relational data, storage, and edge functions. RLS on every table means anon/employee/admin permissions live in the database, not just in app code.
  • Tailwind CSS v4 + shadcn/ui
    Brand tokens (navy `#052a42`, gold `#df9a13`) defined as oklch CSS variables; light + dark themes flip the same shadcn semantic tokens. No tailwind.config.js — purely CSS-driven configuration.
  • next-intl (ar default + en, full RTL)
    Locale-aware routing via `pathnames`, layout direction flips on `<html dir>`. Mobile sheets, dropdowns, and admin tables all respect the active locale's reading direction.
  • ImageKit
    Public folder for marketing imagery (transforms, blur placeholders); private folder for CVs, contractor documents, and internal certificates — always read through short-lived 5-minute signed URLs server-side.
  • Nodemailer + Upstash Redis + Cloudflare Turnstile
    Bilingual HTML + plaintext transactional emails for every form action; sliding-window IP rate-limits keyed by form; Turnstile spam guard on every public submission.
  • Zustand (cart) + Recharts (admin KPIs) + react-hook-form + Zod
    Cart state persists to localStorage with no server round-trips. Admin overview ships real charts (30-day submission trends). Zod schemas validate forms on both client and Server Action.

Highlights

  • ▸Bilingual Arabic-first / English public site with RTL layout flips throughout — not a translation veneer over an English-first design
  • ▸Full admin console: KPI overview, projects/portfolio CRUD with ImageKit gallery, careers + job-application pipeline, contractor-application pipeline, RFQ pipeline with admin-reply email, contact inbox, certifications with public/private toggle, JSON-driven site-content CMS, settings
  • ▸Submission pipelines (RFQ, contact, jobs, contractors, orders) with status workflows (`new → reviewing → shortlisted → hired` etc.) and CSV export with UTF-8 BOM so Arabic opens correctly in Excel
  • ▸Phase 2 e-commerce wired end-to-end: products + cart + checkout + order-confirmation email + admin orders pipeline (`pending_payment → paid → processing → shipped → delivered`)
  • ▸Bilingual transactional emails (HTML + plaintext fallback) for RFQ, contact, careers, contractor applications, admin replies, and order receipts — all from a single inline-CSS shell template
  • ▸Security posture: RLS on every table, anon-only inserts on submission tables, service-role confined to admin Server Actions, private docs (CVs, contractor files) always served via signed URLs
  • ▸Forced password rotation on the seed admin's first sign-in; Turnstile + per-form Upstash rate-limits on every public form
  • ▸Phased architecture: hooks already in place for HR portal, PEG-N member network, and an Anthropic-backed FAQ chatbot in later phases without a rewrite