Work/Case StudyLive

D-Badge

A complete commerce and operations platform for a UAE-based custom badges and branded merchandise business — from product discovery to doorstep delivery, managed from one back office.

IndustryCustom MerchandiseBadges · Pins · Branded Items
RoleDesign + Build + OperateEnd-to-end ownership
MarketUAEdbadge.ae · Arabic + English
StackNext.js · SupabaseTypeScript · Tailwind · Cloudflare
01The Brief

One business. Scattered systems.

D-Badge had the product. What they lacked was infrastructure. Orders arrived via WhatsApp and email. Payment tracking was manual. Customers had no visibility on their badge production or delivery status. The team was spending hours each day on operations that should have been instant.

No online storefront

Product discovery happened through direct messages. There was no catalogue, no pricing, no self-serve ordering — every sale required manual back-and-forth.

Zero fulfilment visibility

Once an order was placed, customers had no idea where their badges were. Production status, courier handoffs, and delivery confirmations all required staff intervention.

Manual finance and reconciliation

Revenue tracking was done in spreadsheets. Refunds, payment confirmations, and coupon redemptions had no centralised record — a liability as the business scaled.

02Systems

What we built

Eleven interlocking systems, each purpose-built for D-Badge's operational reality — from first click on the storefront to final delivery confirmation.

Storefront & Product Catalog

Browse-ready storefront with product categories, variant selectors, custom badge configurators, and rich product detail pages — built for conversion.

Cart & Checkout

Persistent cart, multi-step checkout, address management, and a frictionless purchase flow optimised for the UAE market.

Online Payments

Secure payment gateway integration handling local and card-based transactions — instant confirmation, refunds, and payment status webhooks.

Order Management

Full order lifecycle from placement to completion — status transitions, staff notes, bulk actions, and automated customer notifications at every stage.

Delivery & Fulfilment Tracking

Real-time order status tracking for customers and operations — from production queue to courier handoff and final delivery confirmation.

Coupons & Discounts

Flexible promotions engine — percentage and fixed discounts, coupon codes, minimum order thresholds, expiry windows, and usage limits.

Analytics

Business intelligence dashboard covering revenue trends, top products, order volumes, conversion rates, and customer acquisition — updated in real time.

Finance Module

Revenue tracking, refund management, payment reconciliation, and financial reporting — a single source of truth for the business accountant.

Content Management

Admin-editable banners, homepage sections, product descriptions, and SEO metadata — no developer involvement needed for day-to-day content updates.

Authentication

Supabase-powered auth with email/password, magic links, and session management — separate flows for customers and back-office staff with role-based access.

Admin Dashboard

A comprehensive back-office — orders, customers, inventory, finance, coupons, content, and settings all in one purpose-built interface for the D-Badge team.

03Architecture

Built to scale from day one

Server-first Next.js with Supabase as the persistence layer — Postgres for structured data, Storage for assets, Auth for identity. Cloudflare sits in front of everything for edge caching, DDoS protection, and UAE-regional routing.

CLIENTLAYERDATAINFRAStorefrontNext.js App RouterServer Components · RSCAdmin DashboardNext.js · TypeScriptRole-Based · RBACOrder TrackingCustomer PortalReal-Time UpdatesUI LayerTailwind CSSFramer MotionAPI Routes · MiddlewareNext.js Server Actions · REST Endpoints · Webhooksauth check → rate-limit → business logic → responseRPC / RESTSupabasePostgreSQL · AuthRow-Level SecuritySupabase StorageProduct ImagesAssets · CDN-backedPayment GatewayOnline PaymentsWebhooks · RefundsDelivery APIFulfilment PartnerStatus TrackingCloudflare — Edge Network · DDoS · WAF · CDNDNS · SSL/TLS · Caching · UAE regional routing
FrontendNext.js App Router + TypeScript
DatabaseSupabase · PostgreSQL · RLS
InfraCloudflare · Edge · CDN
PaymentsPayment Gateway · Webhooks
04Admin Interface

One screen to run the business

The D-Badge team manages every order, customer, payment, and delivery from a single dashboard — built for speed, not complexity.

D-Badge Admin — Order Management
Orders Today
34+12%
Revenue (MTD)
AED 84.2k+8.4%
Pending Dispatch
7
Avg Order Value
AED 2,478+5.1%

Recent Orders

284 total · showing latest 5

Filter
+ New Order
OrderCustomerProductDateAmountStatus
#DB-2841Gulf Media Co.Custom Enamel Pin × 20012 Jun 2025AED 1,840Delivered
#DB-2840Etihad Merch DeptWoven Badge × 50012 Jun 2025AED 3,200In Transit
#DB-2839Al Futtaim GroupPVC Keychain × 1,00011 Jun 2025AED 2,650Production
#DB-2838DEWA EventsMetal Lapel Pin × 15011 Jun 2025AED 990Paid
#DB-2837Majid Al FuttaimEmbroidered Patch × 30010 Jun 2025AED 2,100Delivered

Order Tracking

#DB-2840

In Transit

Etihad Merch Dept — Woven Badge × 500

  1. Order Placed

    Jun 10, 9:14 AM

  2. Payment Confirmed

    Jun 10, 9:15 AM

  3. In Production

    Jun 11, 8:00 AM

  4. Quality Check

    Jun 12, 2:30 PM

  5. Dispatched

    Jun 12, 5:00 PM

  6. Out for Delivery

    Jun 13, 10:00 AM

  7. Delivered

    Estimated today

05Outcomes

From chaos to a machine

Launching D-Badge as a fully operable platform — not a prototype. The business went live with every layer in place.

11integrated systems shipped in one platform
0manual order entries — fully automated checkout to fulfilment
100%customer self-serve: browse, pay, track without staff
1back office for orders, finance, CMS, and analytics

Unified ordering

Customers configure, quote, pay, and receive confirmation in minutes — no emails, no back-and-forth. The storefront handles every product category with variant support.

Automated tracking

Every order moves through a defined status lifecycle. Customers see production, dispatch, and delivery in real time — without calling or messaging the team.

Finance in one place

Revenue, refunds, coupon redemptions, and payment reconciliation are all captured automatically — giving the team a real-time financial picture without manual entry.

Ready to build yours?

Your system is waiting.

D-Badge went from scattered manual operations to a fully automated commerce platform. We can do the same for your business.