Back to Portfolio

DMCI Sales - Client Registration Form (CRF)

React 19TypeScriptViteRedux ToolkitRTK QueryJotaiZodTailwind CSSReact Router v7Node.jsExpress
Live Demo

About This Project

DMCI Sales CRF is an enterprise-grade web application built for DMCI Homes. The system digitises and automates the entire buyer on-boarding flow - from identity verification to property inquiry capture - replacing paper-based client registration forms used by sales agents at project booths and offices. The application is accessed through agent-specific URLs (seller links), ensuring all captured data is correctly attributed to the responsible agent or broker. Buyers progress through a guided six-step wizard that collects government ID images, personal details, property interests, and formal registration consent. The system handles three distinct buyer configurations: individual buyers, corporate/company representatives, and minor buyers (with guardian workflows) - each triggering different conditional form paths.

Screenshots

DMCI Sales - Client Registration Form (CRF) screenshot 1
DMCI Sales - Client Registration Form (CRF) screenshot 2
DMCI Sales - Client Registration Form (CRF) screenshot 3
DMCI Sales - Client Registration Form (CRF) screenshot 4
DMCI Sales - Client Registration Form (CRF) screenshot 5
DMCI Sales - Client Registration Form (CRF) screenshot 6
DMCI Sales - Client Registration Form (CRF) screenshot 7
DMCI Sales - Client Registration Form (CRF) screenshot 8
DMCI Sales - Client Registration Form (CRF) screenshot 9
DMCI Sales - Client Registration Form (CRF) screenshot 10
DMCI Sales - Client Registration Form (CRF) screenshot 11
DMCI Sales - Client Registration Form (CRF) screenshot 12

What Makes It Unique

Demonstrates a deliberate hybrid state architecture - Redux/RTK Query for server-side caching and Jotai atomic state for complex local form data across 40+ atoms. Features agent-scoped localStorage isolation, OCR-powered ID verification with fuzzy name mismatch detection, and production-level Zod validation pipelines with cross-field rules.

Key Features

  • 6-step guided form wizard with visual stepper and step-level validation gating
  • OCR ID extraction - uploads government ID images and auto-populates fields from backend OCR results
  • Name/DOB mismatch detector - fuzzy comparison between OCR output and manually entered data
  • Multi-buyer support - primary buyer, co-buyers, spouses, and guardians with independent ID verification
  • Three buyer types - Individual, Company Representative, and Minor (with conditional guardian form)
  • Agent-scoped form persistence - form state survives page refreshes and is isolated per agent link
  • Hierarchical address input - cascading dropdowns from country to barangay with country-aware field visibility
  • Duplicate record detection modal - pre-submission CRM check with user-choice override
  • Drag-and-drop file uploader with image preview and per-file error handling
  • International phone validation with country-dial-code picker

Challenges Faced

1.Complex conditional form logic - dozens of conditional fields based on buyer type, age, marital status, nationality, and address country. Solved with Jotai atoms per concern and Zod superRefine for cross-field rules.
2.OCR name mismatch detection - writing a word-boundary matching algorithm that minimized both false positives and false negatives with real ID samples.
3.State isolation across multiple agents - same browser could hold in-progress forms for different agents. Custom Jotai storage adapter namespaces every atom to the seller link ID.
4.Multi-step validation sequencing - forward navigation blocks on errors while backward navigation skips validation, managed via a custom useFormNavigation hook.
5.Payload cleaning for a strict backend API - recursive null/undefined stripping while preserving intentional empty arrays.

Future Improvements

→Offline-first support - cache master data in IndexedDB for low-connectivity environments.
→Real-time field-level OCR - stream results progressively as the image is processed.
→Accessibility audit & WCAG 2.1 AA compliance.
→End-to-end Playwright tests covering the full six-step submission flow.
→i18n/Localisation - Filipino (Tagalog) language support.
Back to Portfolio