Fullstack · SaaS · B2B
Table-Tap
A multi-tenant restaurant ordering and Kitchen Display System built on Supabase. One unified codebase reliably serves isolated environments for multiple restaurants.
Built With
https://table-tap-cyan.vercel.app/

Click to Zoom
Category
Fullstack · SaaS · B2B
Deliverables
- Multi-Tenant DB Architecture
- QR-Code Ordering System
- Kitchen Display (KDS) Interface
- Real-time Order Streams
Technologies
React.jsNext.jsTypeScriptTailwind CSSSupabasePostgreSQLPaystackWebSockets
Live Product
Visit ApplicationOverview & Context
Table-Tap is a high-performance, multi-tenant SaaS platform designed to modernize restaurant operations. It bridges four user environments under a single deployment:
- Customer Ordering (/order): Scanning table QR codes to browse menu categories, pay instantly via Paystack, and place orders.
- Kitchen Display (/kitchen): Real-time, touch-optimized order board for kitchen staff to coordinate and track orders.
- Restaurant Dashboard (/admin): Managing menu items, categories, viewing live analytics, and provisioning credentials.
- Super Admin Governance (/myadmin): Platform control panel (God Mode) to toggle paywalls, adjust pricing, and suspend tenants globally.
What I Engineered
I designed and developed the fullstack architecture using Next.js and Supabase. Key contributions included:
- Secure Billing Loop: Connected client-side Paystack payment flows with Next.js Server Action verification. Validated transaction callbacks via HMAC SHA512 signatures and promoted order status in the database using a secure Supabase Admin Client.
- Two-Layer Security & AuthGuard: Created an edge-to-client guard system. Next.js Middleware verifies session cookies at the server edge, while a custom React AuthGuard performs deep, deferred checks for subscription validity and tenant suspension.
- Real-time Order Streams: Configured Supabase Realtime WS channels to stream PostgreSQL data changes directly to kitchen touchscreens, keeping order feeds perfectly synchronized.
Challenges & Lessons
- Decoupling Security for Performance: Running tenant verification queries in global Edge Middleware added heavy latency to page assets. I split the routing security layers so edge middleware only handles quick token refreshes, and the heavy database check runs inside the React AuthGuard shell.
- Preventing Transaction Spoofing: To prevent users from editing database order states manually, I forced the client to create 'PENDING' records, leaving status promotion to a secured webhook endpoint backed by cryptographic signature verification and database idempotency checks.
- Optimistic Credential Write: Listing all platform users to ensure uniqueness when provisioning device credentials created latency. I restructured the flow to write the record first, intercept duplicate key exceptions, and fallback to updating passwords, cutting database roundtrips to a single path.
Product Screenshots

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom

Click to Zoom
LET'S TALK
Let's build something.
I'm currently open to frontend work — SaaS, fintech, edutech, or anything that needs real attention to detail.
If that's you, reach out.