SaaS · Web App · 2025
SyntheFSM — Field Service Management
A multi-tenant field service management SaaS concept covering booking, dispatch, provider assignment, payments, and analytics for urban home services.
- User roles
- 7
- End-to-end flows
- 5
- Build time
- 3 wks
- Client
- Portfolio concept
- Year
- 2025
- Timeline
- 3 weeks
- Categories
- SaaSWeb App
- Role
- Full-stack engineer & product designer
- Services
- Product designFull-stack developmentMulti-role authUX
- Stack
- ReactTypeScriptViteTailwindCSSshadcn/uiReact RouterTanStack QueryZodRecharts
The challenge
Urban home-services operators juggle bookings across phone, WhatsApp and Excel, then hand jobs off to field technicians with no shared source of truth. The demo needed to prove a single platform could serve seven distinct roles — customer, provider, dispatcher, finance, support, super-admin and branch-admin — without collapsing into one bloated dashboard or leaking data across tenants.
My approach
Modelled each role as an isolated experience gated by route-level authorization, then unified them behind one design system, a marketplace + booking flow and a real-time dispatch board. Every screen was built as an end-to-end vertical slice — from a customer picking a service, through dispatcher assignment, provider job execution, payment reconciliation and a reviews loop — so the demo can be walked as a full narrative.
Key features
- Seven-role authenticated experience — Customer, Provider, Dispatcher, Finance, Support, Super-Admin, Branch-Admin
- Marketplace + booking flow end-to-end, from service discovery to confirmation
- Live dispatch board with provider assignment, status pipeline and workload view
- Payment reconciliation surface with per-booking status and payout tracking
- Ratings & reviews loop feeding provider quality scores
- Route-level authorization with role-scoped navigation and views
- Portfolio-demo compliance banner and Upwork-only CTAs across every screen
- Responsive shell with unified design system, accessible components and dark-mode friendly tokens
Technical decisions
Role-first architecture, not feature-first
Every screen is authored against one role's job-to-be-done, then wired into a shared shell. This keeps the customer flow uncluttered while giving dispatchers the density they need.
Route-level authorization
Access control lives at the router boundary — unauthorized roles never mount protected components — so the seven-role model stays auditable in one place instead of scattered across UI checks.
React Router + TanStack Query for a single deployment
Kept the demo as a single Vite app with server-state via TanStack Query so recruiters can click through instantly, with no cold starts or separate API to spin up.
shadcn/ui + Tailwind design system
Used a token-driven design system so seven very different dashboards still feel like one product, and dark/light and density variants are trivial to tune.
Portfolio-safe by construction
The site ships with a persistent portfolio-demo banner, no lead-capture forms, and every CTA points to Upwork — staying compliant with Upwork's non-circumvention terms while still functioning as a full walkthrough.
Outcome
Delivered a fully navigable portfolio demo used as an Upwork work sample: seven authenticated role dashboards, a public marketplace, an end-to-end booking → dispatch → completion → payment → review flow, and a portfolio-safe compliance layer that keeps all hiring conversations on Upwork.