Skip to content
All projects

Full-stack production platform

Ace Plumbing Specialist

aceplumbing.sgLive / In progress
LiveGitHub

A production full-stack web platform that runs an entire plumbing business. It pairs a marketing/booking website with two secure internal portals (an owner admin back-office and a plumber field app) covering the full lifecycle from lead capture to jobs, quotations, invoicing, e-signed service chits, expense claims, commissions, and bookkeeping. Built on Next.js (App Router) and Supabase, with server-side PDF generation, digital signatures, and Singapore PayNow QR payments.

Public site

  • Marketing pages with 9 service pages, residential/commercial sections, testimonials, trust badges, guarantees, and an editable FAQ
  • SEO built in: sitemap, robots, PWA manifest, per-page Open Graph images, JSON-LD structured data, plus Google Reviews and Google Ads/analytics integration

Booking & leads

  • Zod-validated appointment booking with daily booking limits
  • Enquiries saved to Supabase
  • Automatic customer + business emails via Resend

Owner admin portal

  • Dashboard with charts; requests → jobs workflow
  • Quotations & invoices (auto-numbered); service chits
  • Expense claims with categories and image uploads; commission settlements
  • Cash ledger, transactions and monthly statements; customers
  • A blog/post CMS; user management; and an audit log of admin actions

Plumber field portal

  • A separate secure login giving plumbers their assigned jobs, documents, expense claims, earnings, PayNow QR generation, and account settings

Documents & signing

  • Server-side PDF generation (Puppeteer + headless Chromium) for quotations, invoices and service chits
  • Tokenized public links for customers to view and digitally sign documents (signature pad), with dedicated print/PDF routes

Payments & finance

  • Singapore PayNow QR codes
  • Bookkeeping across cash, transactions, claims and commissions, rolled up into monthly statements

Security & quality

  • Supabase Auth for the admin, plus a separate plumber auth (OTP sessions, hashed secrets, timing-safe comparisons)
  • Middleware-gated routes
  • A Vitest suite covering core business logic

~300 source files · 3 portals · 9 service types · 15 database tables · 24 test suites

Built with

  • Next.js 16 (App Router)
  • React 19
  • TypeScript (strict)
  • Tailwind CSS v4
  • shadcn / Base UI
  • React Hook Form + Zod
  • Supabase (Postgres + Auth)
  • Resend
  • Puppeteer (PDF)
  • signature_pad
  • Vitest
  • Vercel