Frontend
React 19 · TypeScript · Vite 8 · React Router v7 · TanStack React Query · AG Grid · SCSS Modules · Vitest
WorkCase study
Margus: construction project management platform
Replaced an Excel-based workflow with a real-time project management system covering quoting, invoicing, directories, Xero integration, and automated email.
- Client
- JL Consulting Engineers
- Role
- Full-Stack Developer
- Duration
- Jan – Mar 2026
- Industry
- Construction / Professional Services
The problem
The business ran project tracking, invoicing, client directories, and cashflow through a single Excel workbook: Cashflow Invoices Current.xlsx. As usage grew, it became a bottleneck: no access control, no collaboration, no accounting integration, and constant risk of corruption or conflicting edits.
The goal was to modernise the workflow without losing the domain logic embedded in years of spreadsheet conventions.
The solution
Margus digitises the operational lifecycle: quoting, pipeline management, WIP tracking, invoicing, payment cheques, and a full client/contractor directory, backed by Supabase (Postgres, Auth, Realtime, Edge Functions).
A dedicated seeding pipeline preserved historical data, enabling the team to validate real datasets from day one.
Project at a glance
- 17
- Distinct pages / views
- 8
- Database tables
- 6
- Edge functions
- 8
- SQL migrations
- 93
- Frontend source files
- ~2.5
- Months, start to delivery
Tech stack
Every layer was chosen to ship quickly without adding rework later.
Backend & infrastructure
Supabase · PostgreSQL · Supabase Auth · Supabase Realtime · Edge Functions (Deno) · Row-Level Security
Integrations & tooling
Xero (OAuth 2.0 + webhooks) · Resend (Email API) · ExcelJS · Zod · ESLint + Prettier · Git / GitHub
Key features
Project lifecycle views
Seven dedicated views (All, Quotes, Pipeline, WIP, Waiting, Done, Urgent) with searchable, paginated AG Grid tables and computed progress/fees.
Invoice management
VAT and historical invoice grids linked to projects/customers with outstanding amounts and VAT computations handled in SQL.
Directory system
Relational directories for Customers, Architects, References, and Contractors with realtime updates via Supabase subscriptions.
Cheque tracking
Grid-based cheque register linked to projects and contractors, replacing manual spreadsheet tracking.
Xero accounting integration
OAuth 2.0 flow, token refresh, webhook receiver with HMAC validation, contact syncing, and transaction fetching via Edge Functions.
Automated email
Email via Resend, sent through an Edge Function, for quote delivery and workflow notifications.
Authentication & security
Supabase Auth, protected routes, session management, and Postgres Row-Level Security policies across all tables.
Excel-to-database migration
Seeding package parsing the legacy workbook (ExcelJS), validating via Zod, and batch inserting across 8 tables in dependency order.
System design
A serverless architecture where Supabase provides auth, database, realtime subscriptions, and edge compute, avoiding a custom backend server while keeping domain logic close to the data.
Frontend
React SPA
Vite · AG Grid · React Query
Platform
Supabase
Auth · PostgREST · Realtime · RLS
Integrations
Edge Functions
Xero · Resend · Webhooks
Database schema
The schema mirrors the domain: projects sit at the centre, linked to clients, invoices, and payments through foreign keys. Computed SQL handles outstanding amounts, VAT calculations, and project numbering.
| Table | Purpose | Key relationships |
|---|---|---|
| projects | Core entity: fees, progress, urgent flags | FK → customers, architects, references |
| customers | Client directory with Xero contact sync | Synced via webhooks |
| architects | Architect contacts | Referenced by projects |
| references | Reference contacts | Referenced by projects |
| contractors | Contractor directory with banking details | Referenced by cheques |
| vat_invoices | VAT invoice records | FK → projects, customers |
| old_invoices | Historical invoice archive | FK → projects |
| cheques | Payment cheque register | FK → projects, contractors |
Timeline
Jan 9, 2026
Project kickoff
Repository bootstrapped with scaffolding and data analysis tooling.
Late Jan to early Feb
Seeding & grid foundation
Excel-to-Supabase pipeline; AG Grid pagination, type-safe column definitions, and early UI with dummy data.
Feb 5 to 9
Architecture overhaul
Refactoring pass to modularise and simplify the component architecture.
Feb 11 to 16
Realtime & calculations
Realtime subscriptions, computed summaries, and UI exploration.
Mar 14 to 17
React migration & auth
React 19 + Vite SPA, protected routes, session management, and the full project display layer.
Mar 23 to 24
Edge functions & Xero integration
Email via Resend, then full Xero OAuth, webhook receiver (HMAC), contact sync, transaction fetching, and diagnostics.
Mar 25
Directory views and polish
Completed directory views, edge function refinements, and UI polish.
Results & impact
Zero data loss
Historical Excel data migrated into Postgres with relational integrity.
Real-time collaboration
Realtime updates remove version conflicts and manual refresh workflows.
Accounting sync
Xero integration reduces double-entry and adds transaction visibility.
Want to build something like this?
Mail me at lotzgustav@gmail.com, or head back to the rest of my work.