Drop Admin Console — Case Study

The Challenge

Operating a multivendor delivery platform requires more than a dashboard — it requires an operations center. Platform owners need to monitor orders in real-time, verify rider identities (including national ID photographs), manage pricing dynamically, and respond to disputes — all from a single interface.

Our Solution

A Next.js 16 backend-for-frontend (BFF) console with 27 operational screens:

• Orders Board — Real-time order pipeline visualization with drag-and-drop status management across the full state machine:

  pending → unassigned → accepted → preparing → ready → picked_up → delivered

• Live Map — Google Maps JavaScript API with real-time rider positions, geofenced delivery zones, and store coverage visualization
• KYC Verification — Secure national ID photo review workflow with S3 presigned URL rendering. The BFF architecture ensures no API token ever reaches the browser
• Dynamic Pricing — 34 platform settings across 10 groups, editable live at

  /platform/pricing

  , instantly reflected in all three mobile apps
• RBAC — 26 granular capabilities across 5 role presets, with permission-based UI rendering

Security Architecture

The browser never holds an API token. Every API call goes through the Next.js server, which mints a Clerk token per request. Even if XSS compromises a page, the attacker gains no API access.

Technical Highlights

• Next.js 16 App Router with Turbopack for sub-second HMR
• React 19 with server components for optimal bundle splitting
• Tailwind v4 for utility-first responsive design
• Recharts for interactive revenue, order volume, and growth analytics
• Clerk

  @clerk/nextjs

  for authentication with server-side token minting
• Deployed on Vercel with edge caching and ISR

Results