M3H clients track their own construction project — completion percentage, invoices, scheduled visits, and documents — without calling the company. All management lives in one central admin panel.
DesignAgência Ade!
View live project
01
Overview
M3H Construtora is a construction company that needed a centralized platform for project tracking — serving both clients and administrators. The public site presents each development with progress information; the client area displays completion percentage, pending invoices, observations, and documents; the admin panel allows creating developments, issuing invoices, scheduling visits, and linking them to specific clients.
The platform eliminates the need for clients to call the construction company: every progress update, document, or invoice is managed through the admin panel and immediately reflected in the client area.
02
Challenge
Building and deploying a dedicated API from scratch — separate from the front end — was the first significant out-of-comfort-zone challenge. It required learning how to deploy Node.js APIs on Vercel, configure production and staging environments, and integrate with the Supabase bucket for storing images, invoices, and documents for clients and construction projects.
The forms for creating developments and clients were complex: multiple related fields, file uploads, and cross-validation between front end and back end using the same Zod schemas on both sides. Keeping the validation rules consistent across both layers without duplication required constant attention.
The magic link password recovery system was implemented from scratch, without third-party libraries: UUID token generated per request, stored in the database with a one-hour expiration, sent by email, and validated on access. Any gap in that chain — reused token, expired token, or invalid user — needed to be detected and rejected before granting access.
Both the public area and the admin panel featured dynamic filters for listing developments, clients, invoices, and visits. All search and pagination logic was structured via searchParams, keeping filter state in the URL and enabling direct sharing of filtered listings.
03
Solution
The panel centralizes developments, clients, invoices, and visits in a clear structure — no ambiguity about the state of each construction project or document. The dedicated Node.js/Fastify API keeps front end and back end decoupled, with direct integration to Supabase Storage for uploading files and documents.
Using the same Zod schemas on the front end and back end eliminated the need to maintain two independent validation layers — any rule change propagated automatically to both sides. React Hook Form managed complex form state without unnecessary rerenders, including file upload fields.
The magic link system ensures each access is unique and temporary — the token expires after use and no permanent password is stored. Dynamic filters keep search state in the URL, allowing filtered listings to be shared directly — both in the public area and in the admin panel.