Property developers were running pre-construction, delivery and post-handover on separate tools, so the same project carried three sets of numbers and none of them reconciled.
Construction-tech · SaaS
Morta
Procurement, budgeting and stakeholder coordination for property developers, in one workspace.
- Product
- Morta — project management software for property developers
- Role
- Frontend engineer, VisionX Technologies
- Scope
- Next.js front end on a Node GraphQL API, procurement flow, Stripe subscriptions
The tension
A development runs in three phases that barely share a vocabulary.
Procurement turned out to be the spine. Once tendering was modelled properly, the phases had something concrete to hang off rather than being three dashboards in a row.
Success looked like
A developer moving from a verified supplier to a submitted tender without leaving the workspace or re-keying anything.
The constraint
This is commercial data under contract. Data security is a question the sales page has to answer, which makes it an engineering requirement rather than a preference.
The product story
Procurement is the spine of the workspace.
The claim
Work less, earn more.
The landing view names the audience — property developers — before it names a feature, because the product only makes sense to someone who runs developments.
Narrow first
Read on site, not at a desk.
The layout reflows to a single column and keeps the tender steps legible at the width they are actually checked on.
The three phases
Pre-construction, delivery, post-handover.
The phases are the top-level structure of the product and of the page, so the thing being sold and the thing being used share a shape.
Walkthrough
The workspace in motion
Recorded from the live site.
The trust test
The happy path is only half the product.
A supplier is unverified
Verification is the first state in the tender flow rather than a flag checked later, so an unverified supplier cannot reach a request that would have to be withdrawn.
A subscription lapses mid-project
Billing state is separate from project data, so a lapsed subscription restricts access without putting a live development into an unreadable state.
Two teams edit the same tender
The tender's state transitions are server-owned, so a stale client cannot advance a step that has already moved.
The decisions
Three moves carried the story.
Model procurement as explicit states
Verified supplier, send request, email invite to tender, submit tender, track procurement, item procured. Six named states rather than a status field, so the interface can say where a tender is without interpreting it.
Collapse cross-phase reads into one query
A view spanning pre-construction and delivery would otherwise be several REST round trips. GraphQL lets the page ask for exactly the shape it renders, once.
Test the money paths hardest
Jest and Cypress coverage concentrated on tendering and Stripe subscription billing, because those are the two flows where a defect costs a customer money rather than time.
What I would test next