BUILD — SALES CRM PORTAL
Replacing a form-and-email approval chain with a real pipeline
A twenty-year-old Singapore environmental-services firm — schools, hotels, malls, banks — was running its sales approvals through an online form that emailed the boss, with contracts and media scattered across shared drives. This is the portal that replaces it, built demo-first on free-tier infrastructure with a deliberate upgrade path to client-hosted infra.
Client engagement. Client name withheld until the engagement is public.
- PDPA
- posture set as acceptance criteria, not aspiration
- RLS
- enforced at the database, not the interface
- $0
- demo infrastructure, with a costed upgrade path
- M365
- native — mail and documents through Graph
The brief
Lead capture and tracking with pipeline and funnel dashboards. A business-card photo that becomes a lead without retyping. Contract types and contract drafting from templates. A media and document library with granular permissions, private and public zones, and password-protected folders. Multi-tier accounts under a master admin. Email outreach from inside the app. Expense tracking per lead. A Singapore map view of leads. And an approval workflow to replace the form-to-email chain outright. The firm lives on Microsoft 365, so mail sends through their real mailboxes and lands in their real Sent Items, and the document layer talks to the storage they already use — rather than asking a twenty-year-old business to relocate its files to suit new software.
How it's built
Next.js with server components so credentials stay server-side, and Supabase for Postgres, auth, storage and row-level security. The pipeline board is drag-and-drop and touch-friendly, because it's used on phones between site visits. The map uses Singapore's national basemap with free postal-code geocoding rather than a billed mapping API — a small decision that keeps the running cost of the demo at zero. Business-card OCR is a single vision-model call that does extraction and field structuring in one pass, at fractions of a cent per card, instead of an OCR vendor plus a parsing layer.
The security posture
The app holds personal data of Singapore businesses and individuals, so Singapore's Personal Data Protection Act applies. That was written into the scope as non-negotiable acceptance criteria rather than a later hardening pass. The practical consequence is that access control lives in row-level security policies at the database, not in conditional rendering in the UI. A permission you can bypass by calling the API directly isn't a permission — and a document library with password-protected folders is exactly the feature where that distinction gets tested.
What it proves
Scoping a real business's workflow, choosing a stack against actual constraints — their existing Microsoft estate, a free-tier demo budget, a regulatory floor — and shipping something a non-technical sales team will use daily. Marketing systems and sales systems fail for the same reason: nobody used them. Designing for adoption is the same job either way.
Stack