Citizen Super-App

Public-facility booking pilot for a citizen super-app · Prototype.

Role: Product design · Front end
Year: 2026
Platform: Mobile web (citizen) · Web admin
Stack: Vue 3 · TypeScript · Pinia · Vue Router · Tailwind CSS · Radix Vue

Overview

The problem

Booking a public hall or sports court usually means a phone call or a counter visit, with no clear view of which slots are free and paper receipts at the end.

The idea

Start a state-wide citizen super-app with one pilot module — facility booking — covering search, slot picking, mock payment and a QR pass, plus an admin side to manage facilities and bookings. Bills, licences, compounds and complaints come in later phases.

Clickable prototype built for a state government's pitch. Shown anonymised — screens are recreated with sample data.

What I did

Design

01Citizen journey mapped end to end: category → facility → date → slot → confirm → pay → QR pass
02Home built as a service hub, so future modules slot in without a redesign
03Slot picker that locks full slots and prices the booking as you select
04Admin dashboard focused on today's bookings, pending payments and facility status

Engineering

01Vue 3 + TypeScript SPA with Pinia stores for auth, facilities and bookings
02Vue Router with role guards separating citizen and admin areas
03Booking logic: hourly slots, automatic pricing, pending → confirmed after mock payment, and cancellation
04QR booking pass, shadcn-style UI components on Radix Vue, mock OTP login and in-app notifications