All projects · Supabase Full-Stack Apps
CleanHome — Supabase Booking System
A single-file, hash-routed web app for a fictional cleaning service: a public landing/booking page (services, availability calendar, time-slot…
A single-file, hash-routed web app for a fictional cleaning service: a public landing/booking page (services, availability calendar, time-slot picker, booking summary) plus a dark admin dashboard for managing time slots and viewing bookings/revenue. Data is backed by Supabase Postgres (two tables: slots + bookings) with a race-safe anti-double-booking mechanism, and falls back to in-memory mock data as a client-side demo when no keys are configured.
- Two-surface app: public booking site + admin dashboard in one file via #home/#dashboard hash router
- Anti-double-booking crux: conditional claim UPDATE (status='available' guard) plus a UNIQUE(slot_id) DB constraint as a hard backstop
- Separate slots (availability) vs bookings (submissions) tables — dashboard produces slots, public page consumes available ones
- Mock-data fallback uses today's date so the calendar and booking flow work fully client-side in demo mode
- Dashboard KPIs (Today/Upcoming/Total/Revenue) computed live from booking data
Built with: HTML, CSS, Vanilla JS, Supabase JS v2 (CDN), Supabase / PostgreSQL, Row Level Security, Plus Jakarta Sans, hash router