Back to Portfolio

DMCI Sales - Reservation Agreement (RA) Form

React 19TypeScriptViteTailwind CSSRedux ToolkitRTK QueryJotaiZodReact Router v7Node.jsExpressWebcam API
Production client project - source code is proprietary

About This Project

The DMCI Sales RA Form System is a production-grade, end-to-end digital platform that replaces the traditional paper-based Reservation Agreement process for a major Philippine real estate developer. The system enables property buyers to complete the entire reservation workflow online - from personal identity verification to payment - without visiting a physical office. The platform is accessed through a secure, time-limited token link generated by a sales agent. Once opened, buyers are guided through an 8-step wizard covering buyer and property information, government ID upload with OCR auto-fill, live selfie capture, legal acceptance pages, a full preview, and finally, an integrated payment flow. After successful payment, a downloadable receipt is generated.

Screenshots

DMCI Sales - Reservation Agreement (RA) Form screenshot 1
DMCI Sales - Reservation Agreement (RA) Form screenshot 2
DMCI Sales - Reservation Agreement (RA) Form screenshot 3
DMCI Sales - Reservation Agreement (RA) Form screenshot 4
DMCI Sales - Reservation Agreement (RA) Form screenshot 5
DMCI Sales - Reservation Agreement (RA) Form screenshot 6
DMCI Sales - Reservation Agreement (RA) Form screenshot 7
DMCI Sales - Reservation Agreement (RA) Form screenshot 8
DMCI Sales - Reservation Agreement (RA) Form screenshot 9
DMCI Sales - Reservation Agreement (RA) Form screenshot 10
DMCI Sales - Reservation Agreement (RA) Form screenshot 11

What Makes It Unique

Features a hybrid state management strategy (Redux for server state, Jotai for form data), token-scoped multi-tab form isolation using atomFamily, OCR name mismatch detection with fuzzy matching, dual-element face verification (human face + visible ID card), and a comprehensive payload transformation layer that decouples the UI form shape from the backend API contract.

Key Features

  • 8-step guided form wizard - covers buyer info, ID verification, selfie, legal agreements, and preview
  • OCR auto-fill - automatically extracts personal details from uploaded government IDs
  • OCR name mismatch detection - flags discrepancies with fuzzy matching strategies
  • Live selfie capture - real-time webcam capture requiring both face and ID card in frame
  • Multi-buyer support - primary buyer, co-buyers, spouse, legal guardians for minors
  • Client representative flow - supports a representative signing on behalf of the buyer
  • PEP declaration - built-in Politically Exposed Person form section for compliance
  • Token-based secure access - time-limited, per-buyer token links
  • Integrated payment gateway - supports multiple gateways with retry logic
  • Downloadable payment receipt - PDF receipt generation after successful payment
  • Save as draft - form state persisted locally with resume capability
  • Clone from previous RA - carry over details from a prior submission

Challenges Faced

1.Multi-tab form state isolation - preventing cross-tab contamination when multiple buyers use the same browser. Solved with Jotai atomFamily keyed to the URL token.
2.OCR reliability and name normalization - government IDs vary in format, font quality, and spacing. Implemented a three-tier matching strategy (exact → space-normalized → whole-word search).
3.Deep nested form state without Redux boilerplate - form captures data across buyer, spouse, multiple co-buyers, guardian, and representative. Jotai atoms provided a cleaner compositional alternative.
4.Backend API contract mismatches - known typos in field names absorbed and isolated entirely in a payload transformer so no UI component needed to know about them.
5.Payment retry flow - managing gateway state across redirects from external payment provider sites back into the app.

Future Improvements

→Backend-driven step configuration - dynamically control which steps are shown per property type.
→Biometric liveness detection - replace static selfie with a liveness challenge.
→Offline/PWA support - allow buyers with intermittent connectivity to fill the form offline.
→E-signature integration - replace typed acceptance with a proper digital signature pad.
→Automated end-to-end test coverage with Playwright.
Back to Portfolio