Trustee Real Estate Management System
Front-end engineering of a Vue.js trustee property platform — component architecture, REST API integration against a MongoDB-backed service, Postman-verified contract handshake with a remote back-end, ledger views that enforce strict separation between owner and manager funds, and document upload flows wired through S3.
- ROLE
- Front-End Developer
- DURATION
- 8 months
- TEAM
- 2
40+
REST endpoints integrated against the MongoDB-backed back-end — every response shape verified in Postman before wiring, with shared TypeScript-style contracts and a typed Axios client wrapping auth, retries, and error normalisation
2
Strictly isolated ledger views — owner funds and manager funds — enforced through dedicated Vue store modules, separate API namespaces, and a shared FundBadge component so cross-account leakage is impossible at the UI layer
25+
Reusable Vue components in the design system — layout shells, data tables, ledger rows, fund summary cards, document uploaders, modal dialogs, form primitives — all built from Figma tokens and composed across every property and finance view
Tech Stack
- Vue.js
- Tailwind CSS
- MongoDB
- REST API
- AWS EC2
- AWS S3
- Cloudflare
- Forge
- Figma
- Postman
Delivery
PHASE 01
Contract Handshake and Schema Review
Walked the Figma designs and the MongoDB document shapes with the back-end developer to lock down the API contract before either side started implementation. Every endpoint had its request and response captured in a shared Postman collection that became the source of truth for both ends of the wire.
PHASE 02
Component Architecture and Design System
Bootstrapped the Vue.js project, configured Tailwind with the Figma token set, and built the foundational component library — layout shells, navigation, data tables, ledger rows, form primitives, modal dialogs, and the FundBadge primitive that visually anchors fund separation across every screen.
PHASE 03
API Integration via a Typed Axios Client
Wrapped the REST API in a single Axios client handling auth tokens, response unwrapping, error normalisation, and retry on idempotent calls. Each store module consumed it through typed response interfaces validated against the Postman collection so contract drift surfaced as a build-time failure, not a runtime one.
PHASE 04
Cross-Timezone Collaboration
Maintained a steady cadence with the France-based back-end developer over Slack for async updates and Google Meet for weekly alignment. API changes were proposed in writing against the Postman collection before either side merged, so neither end of the wire ever shipped against a stale contract.
PHASE 05
QA, Edge Cases, and Delivery
Ran a structured QA pass across every view — fund separation correctness, document upload flows, table pagination and sort stability, responsive behaviour from desktop down to tablet — and signed delivery off against the Figma designs with the full REST surface integrated.
Outcomes
- Full Vue.js front end delivered against 40+ REST endpoints — every view powered by live data and verified against the Postman contract.
- Strict fund separation enforced architecturally — owner and manager ledgers live in separate Vuex modules, hit separate API namespaces, and render through a shared FundBadge so cross-account leakage is impossible at the UI layer.
- Reusable component library of 25+ primitives built from Figma tokens — layout shells, data tables, ledger rows, fund summary cards, document uploaders — composed consistently across the property and finance surface.
- S3-backed document pipeline wired into the property detail view — pre-signed upload URLs, progress reporting, content-type validation, and inline preview for the document types trustees actually deal with.
- Typed Axios client centralising auth, response unwrapping, error normalisation, and retry — every store module consumes the API through a single audited surface.
- Postman-verified contract handshake with the back-end developer — schema changes reviewed against the shared collection before merging, eliminating silent contract drift.
- Responsive layout down to tablet sizes for trustees reviewing portfolios on the move, with table layouts that gracefully degrade to stacked card views without losing data alignment.
Challenges & Learnings
Building a front end against an API in active development across a timezone gap.
The back-end was being built in parallel from France, which meant the endpoints a view needed were sometimes a week away from existing. The discipline that made this work was treating the Postman collection as the contract — every endpoint had its request and response shape agreed in Postman before either side wrote code. When endpoints weren't yet live, components were built against mocks generated directly from those Postman responses, so the structural shape was identical from day one. When the real endpoint shipped, integration was a one-line swap of the mock for the live URL on the Axios client. Schema changes were proposed in the shared Postman collection and reviewed before merging, so contract drift surfaced as a deliberate decision rather than a production surprise.
Making fund separation impossible to violate in the UI.
The product promise — owner funds and manager funds remain strictly isolated and traceable — couldn't be implemented as a visual convention alone, because a future component could quietly mix them. The architectural answer was to make the separation structural. Owner and manager ledgers live in their own Vue store modules, fetch from their own API namespaces, and render through a shared FundBadge primitive that takes the fund type as a prop and is the only component allowed to display fund-attributed amounts. A ledger row missing a FundBadge fails design review; a store module reaching across into the other ledger is a code-review block. The visual language — colour, label, position — then sits on top of an architecture that won't allow leakage even if a developer tries.