QR Ordering & Payments · Restaurants & Bars

Oshap

A QR-first ordering and payment platform : customers scan, browse, order, and pay; staff manage the full operation through a role-gated admin app.

The problem

Ordering in a busy bar means waiting for a waiter who is already carrying three tables. The venue loses covers to the queue, and the customer loses the round they would have bought.

The outcome
3shipped surfaces: customer web, admin PWA, platform portal
0app installs or logins required to order
MVPshipped and handed off to a backend team
Role
Product Designer & Engineer · Founder
Timeline
2025 – present
Team
Solo: design → front-end
Tools
Vite 6 · React 19 · Tailwind v4
Live demo

The real thing. Right here.

Not a prototype. The live customer app: browse the menu, add to cart, see the pay flow. Table T1 is active.

Open full app ↗
17:54
5G
iPhone frame
Customer journey

Scan → Browse → Order → Pay → Track.

The customer flow is five steps with no account creation, no redirects, and no dependency on staff to proceed. Three signature moves and a persistent notification center make it memorable.

GROUP ORDERING
Order Together

Any guest starts a shared table session; the backend generates a 4-digit PIN. Others join and merge their carts. The whole table sees one live tab and can pay individually or jointly.

SERVICE BELL
Call a Waiter

A persistent bell icon in every header. One tap fires a POST to /call-waiter → FCM push + audio chime on every admin device. The backend dedupes within 30 seconds so it never spams.

CARD PAYMENT
Request a POS

An alternative CTA on the pay screen. One tap → FCM push to staff; POS comes to the table. Uses the same admin verify handler as bank transfer; no separate flow on the backend.

Notification Center

A persistent bell icon in every customer header opens a notification feed backed by localStorage (keyed per table). Every toast also writes an entry to the feed. Unread badge, mark-as-read, and clear-all. Survives page refresh within the same session.

Customer screens
Oshap Menu
Scan lands straight here — browse and add with no login between the guest and the food.
Oshap Cart drawer
The cart is a drawer, not a page — you adjust the order without ever leaving the menu.
Oshap Pay: transfer
Transfer-first, because that is how Nigerians actually pay — with a POS request one tap away.
Oshap Order Together
One shared tab on a 4-digit PIN — the table merges carts yet can still pay separately.
Oshap My Orders
The kitchen's live state, mirrored to the guest — no asking a waiter where the order is.
Oshap Notification center
A per-table feed that survives refresh — every toast is kept, not lost the moment it fades.
Admin surface

Individual logins. Six modules. Full visibility.

The admin app is a PWA, installable to the home screen; works on any tablet or phone a restaurant already owns. The Owner creates individual accounts for each staff member; access is scoped to their role. Multi-branch owners get a branch switcher in the nav — selecting a branch scopes all reads to that location.

Waiter Dashboard/

Live table list updated in real time via SSE. Per-table: unpaid total, pending-payment total, Verify and Clear Table actions. Surfaces a low-stock chip when inventory is critical.

Kitchen / Bar/kitchen

All active orders in CREATED, PREPARING, READY. One tap moves an order forward. Customers see the same state change on their My Orders tab in real time.

History/history

Paginated CONFIRMED and CANCELLED orders. Per-page summary: confirmed count, cancelled count, page revenue. Filterable by table and date.

Menu + Inventory/menu

Add, edit, and remove menu items: name, price, category, description, image, availability, sort order. Inventory: per-item stock count and low-stock threshold; inline editor; auto-disable at zero stock.

Analytics/analytics

Revenue over time, popular items, peak hours, table performance, staff activity; date-range picker; CSV export. Owner only. Group view aggregates revenue across branches.

Settings/settings

General: restaurant info, operating hours, bank details, logo upload. Tables: add or remove. Staff (Owner only): create accounts, assign roles, edit, remove.

FCM Push + PWA

Seven push trigger types: new order, order ready, payment claimed, payment verified, table closed, waiter called, POS requested. When the admin app is open, an AlertCenter intercepts FCM messages, plays a two-tone Web Audio chime (no asset file), and queues a toast. Service worker handles background OS notifications when the tab is hidden. The app is installable to home screen with display: standalone.

Admin screens
Oshap Dashboard
Every active table live via SSE — unpaid and pending totals visible without refreshing.
Oshap Kitchen
One tap moves an order forward, and the guest sees that same state change in real time.
Oshap History
Settled orders with per-page revenue — the day's takings reconcile without a spreadsheet.
Oshap Menu + Inventory
Stock counts auto-disable an item at zero, so the menu can never sell what the kitchen lacks.
Oshap Analytics
Owner-only revenue, peak hours, and top items — the numbers that decide what to stock and staff.
Oshap Settings
Role-gated controls: only the Owner creates accounts and assigns who can see what.
Platform portal

The third app: Oshap's own back-office.

Internal Oshap operators onboard tenant restaurants, manage subscription tiers, and monitor system health through a separate portal. Access is gated by an x-platform-token header. The client gate is UX only; the backend must enforce it.

Dashboard

Tenant overview and quick-onboard entry point. At-a-glance health across all restaurants on the platform.

Restaurants

Searchable, filterable tenant list. Each row links to a detail view for managing a single restaurant.

Onboard

Two-step wizard creating a new tenant via POST /platform/restaurants. Sets name, email, tier, and table count.

Restaurant detail

View tenant data; change subscription tier; activate or deactivate the restaurant.

Subscriptions

Tier and billing overview: FREE, STARTER, PRO, ENTERPRISE.

Health

System metrics: uptime, latency, error rate, active sessions via GET /platform/health.

Success metrics

One rule. Six measurements.

The headline metric is qualitative: faster than a waiter. These six measurements make it falsifiable.

HEADLINE

Scan → order

Time from QR scan to first order placed. The number Oshap is designed around.

CONVERSION

Scan → order rate

Percentage of QR scans that result in at least one order placed: the funnel health metric.

PAYMENT

CLAIMED → CONFIRMED

Verification latency for bank-transfer claims. How long customers wait after tapping 'I've sent the money'.

KITCHEN

CREATED → READY

Kitchen throughput time. Measured per order; averaged per shift. The merchant's half of the speed promise.

REVENUE

Payment completion

Percentage of PAYMENT_PENDING orders that reach CONFIRMED: the leakage metric.

VOLUME

Orders per table

Average orders per table per day. Proxy for how deeply Oshap is embedded in the venue's operations.