Feb 2026 — Present

RL TECHZONE PVT (LTD) — E-Commerce Computer Store

A full-stack e-commerce platform for a computer retail business.

Visit live site ↗

An online store for a computer retailer. Shoppers browse, pay with card or local gateways, and track their orders. Staff run products, orders, users, and the whole homepage from an admin panel — no redeploys. Prices and stock sync from the company ERP.

Tech Stack

Frontend

  • Next.js 16 (App Router)
  • React 19 + TypeScript
  • Tailwind CSS v4
  • Radix UI / shadcn/ui
  • Framer Motion

Backend & Data

  • Next.js API routes
  • PostgreSQL + Prisma 7
  • TanStack Query & Table

Auth & Security

  • Clerk — sign-in, email invitations, webhooks
  • Custom roles & permissions
  • Cloudflare Turnstile, CSP, rate limiting

Payments

  • Stripe
  • PayHere
  • Mintpay
  • KOKO
  • Payzy
  • Bank transfer

Integrations

  • ERP price & stock sync (pull only)
  • File storage — Backblaze B2, Tigris, Appwrite, Vercel Blob, Supabase
  • React Email + Nodemailer, pdf-lib
  • MCP / A2A endpoints for AI agents

DevOps

  • GitHub Actions CI/CD
  • Vercel + Docker
  • ESLint, Prettier, Husky

Architecture Diagram

One app serves the shop, the admin panel, and the API. Everything goes through one security gate.

  1. Users

    Who sends requests

    • Shopper

      browses & buys

    • Staff

      runs the shop

    • AI agents

      read the catalog

  2. Next.js app

    Behind one security gate (proxy.ts)

    • Storefront

      pages for shoppers

    • Admin panel

      pages for staff

    • API routes

      checks, orders, sync

  3. Data & services

    Where things are stored or sent

    • PostgreSQL

      via Prisma

    • Clerk

      accounts & invites

    • ERP

      price & stock

    • Payment gateways

      6 methods

    • File storage

      5 providers

    • Email

      SMTP

How It Works

How an order is trusted

  1. 01Shopper checks out
  2. 02Server re-prices the cart
  3. 03Gateway takes payment
  4. 04Server confirms with gateway, then saves as PAID

CI/CD Pipeline

GitHub Actions checks every change, and only code that passes can reach Vercel. Each environment has its own branch.

Pull request

Open a PR or push to main / development

  1. 01Lint, types, format, Prisma schema, API guard audit (run in parallel)
  2. 02Build + unit tests
  3. 03Safe to merge

Testing

Push to the testing branch

  1. 01Install + generate Prisma client
  2. 02Format, types, API guard, lint
  3. 03Build
  4. 04Deploy to Vercel (test)

Production

Push to the deploy branch

  1. 01Install + generate Prisma client
  2. 02Format, types, API guard, lint
  3. 03Build
  4. 04Deploy to Vercel (production)

Features

Storefront

  • ＋Browse by category, search, filter, and sort
  • ＋Product pages with photos, specs, and stock per branch
  • ＋Checkout with 6 payment methods, every payment confirmed with the gateway
  • ＋Order tracking, PDF receipts, and quotation emails

Admin Panel

  • ＋Dashboard with revenue and order trends
  • ＋Manage products, categories, branches, and orders
  • ＋Invite staff by email and give them custom roles, with an audit log
  • ＋Edit the homepage, navigation, and promo bar with a live preview

Platform

  • ＋One-way ERP sync for prices and stock
  • ＋SEO, structured data, and AI-agent access to the live catalog

Admin Panel — Client-Side Customization

Edit Without a Developer

  • ＋Hero banners and videos, category tiles, deals, and the stats band
  • ＋Header navigation, logos, and a scheduled promo bar with countdown
  • ＋Changes go live instantly, with no redeploy

User Stories — Client Side

Shopper

  • ▸As a shopper, I want to search and filter products, so that I can find the right part quickly.
  • ▸As a shopper, I want to pay by card, local gateway, instalments, or bank transfer, so that I can use the method that suits me.
  • ▸As a shopper, I want to track my order and download a receipt, so that I always know where my purchase is.

User Stories — Admin Side

Staff & Owner

  • ▸As an admin, I want to add products and sync prices and stock from the ERP, so that the catalog stays accurate.
  • ▸As a super admin, I want to invite staff and limit what each role can do, so that people only touch what they should.
  • ▸As a content editor, I want to change the homepage and promo bar with a live preview, so that the site stays fresh without a developer.
  • ▸As an owner, I want to see revenue and orders against the previous period, so that I can tell how the business is doing.

Architecture & Design Patterns