Marcações online Demonstration project
Vaga — one booking system that fits any appointment business
A product demo for an online booking app in warm alabaster, graphite and wisteria: a live template switcher re-skins the whole product in place — salon, barbershop, physiotherapy clinic or aesthetics studio — around a working four-step booking flow, a read-only owner's agenda with per-professional timelines, and automatic SMS reminders.
feitura.pt/demo/vaga — Live
A booking software product needs a page that proves one thing in ten seconds: the same system fits any business that works by appointment. The page has to be the product — a fixed switcher dresses the app as four coherent fictional businesses (Studio Lena salon in Lisbon, Corte Real barbershop in Porto, FisioAtiva clinic in Coimbra, Pele & Luz aesthetics in Faro), swapping brand, palette, services, team and schedules live. Under it, a complete booking flow with a fake availability engine, the owner's day view, reminder previews and honest pricing plans.
What's inside
- Soft-industrial app design system — warm alabaster, graphite ink and a wisteria accent, all in scoped CSS
- Live template switcher that re-skins brand, accent palette, services, professionals and copy across the whole page
- Four coherent fictional businesses with their own services, prices, teams and opening days
- Working four-step booking flow: service, professional (or any), 7-day strip and slot grid, confirmation with demo-safe form
- Deterministic fake availability engine — per-professional schedules, closed days and visibly taken slots
- Read-only owner's agenda: per-professional day timelines with bookings, shifts, days off and a live now-line
- Occupancy, reminders-sent and no-show stat cards computed from the same engine
- SMS reminder preview that rewrites itself with the active business's name, service and address
- Fully bilingual PT/EN, AA contrast, 44 px touch targets and reduced-motion-safe transitions
Build log
- Art direction and tokens — alabaster/graphite/wisteria system, slot-grid logomark, pill buttons, mono time treatment
- The four fictional businesses — names, palettes, services with durations and prices, teams and schedules for salon, barber, physio and aesthetics
- Live template switcher — sticky control, per-template theming via CSS custom properties, skin transitions without layout shift
- Fake availability engine — deterministic hashing for taken slots, per-professional shifts, closed days, any-professional merging
- Booking flow — stepper, service and professional pickers, 7-day strip, slot grid with taken states, summary and demo-sink confirmation
- Owner back office — per-professional day timelines derived from the same engine, shift shading, now-line, occupancy and reminder stats
- Reminders and marketing sections — SMS preview that reskins with the business, feature grid with inline SVG icons, pricing plans
- EN locale pass, hero brand card with computed next-free-slot, scroll reveals with IntersectionObserver, reduced-motion audit
- Mobile pass at 375 px — thumb-friendly switcher and slot grid, horizontal timeline scroll, contrast and touch-target audit
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
97
Performance
100
Accessibility
100
Best practices
100
SEO