// PROJECT_
AnyProperty
01. PROJECT_OVERVIEW
6 months of remote part-time work at Digital Diligence (New Zealand). AnyProperty is a commercial real estate marketplace for the Christchurch property market — a direct challenger to traditional real estate agencies, built at commercial scale. The platform covers the full buying and selling lifecycle: property search and browse, a P2P offer system, a 9-step listing wizard with identity verification, and a Sanity CMS-driven content layer. Google Maps and Leaflet handle interactive property maps. The "AnyProperty It" calculator shows sellers how much commission they save versus a traditional agent. I contributed to the frontend architecture — routing structure (React Router 6), component boundaries, API service layer, and screen implementation across buyer and seller flows. The repository is private at the request of Digital Diligence.
Status
Closed
Scope
Full-Stack Architecture
Primary Stack
React 18
02. SCREENSHOTS
03. TECH_STACK & ARCHITECTURE
//Remote part-time role at Digital Diligence (NZ) — commercial-scale real estate marketplace for the Christchurch property market
//React 18 SPA (CRA) with React Router 6 — buyer and seller flows share route structure, protected by cookie-based auth
//Dual map approach: Google Maps for listing creation (address autocomplete + pin placement), Leaflet for search results (clustered pins)
//Sanity CMS decouples editorial content (blog, landing pages) from the React app — GROQ queries at render time, no deploy needed for copy changes
//Cookie auth: apiService.js injects auth-token from getCookie('token') on every request, withCredentials: true across all calls
//9-step listing wizard: MUI Stepper gates each step — backward navigation allowed, skipping not, photos via pre-signed URLs
//P2P offer system: buyer submits offer → AnyProperty intermediates → seller notified → full lifecycle tracked in dashboard
//AnyProperty It: commission savings calculator is the core product differentiator vs traditional agents
React 18 + Create React App
Frontend — UI Framework
SPA with React Router 6 for client-side navigation. Route structure covers buyer flows (browse, search, watchlist, offer management) and seller flows (listing wizard, account, identity verification). CRA handles build tooling with environment-variable injection at build time.
Material UI v5 (MUI)
Frontend — Component Library
Primary UI layer — form fields, steppers, dialogs, cards and data tables throughout the platform. MUI's createTheme drives consistent color tokens and typography. AnyProperty's brand pink applied via primary palette override, keeping design consistent across buyer and seller flows.
React Router 6
Frontend — Client-Side Routing
Declarative routing with nested routes and lazy-loaded code-split bundles per feature area. Protected routes redirect to login when the auth cookie is absent. URL structure follows REST-style paths: /properties/:id, /account/offers, /list-property/step/:n.
Google Maps API + Leaflet
Frontend — Maps & Location
Google Maps handles listing creation: address autocomplete via Places API and interactive pin placement so the seller can pin the exact property location. Leaflet renders the search-results map with clustered property pins — two libraries, two distinct use cases at different points in the user journey.
Sanity CMS
Content Management — Blog & Landing Pages
Headless CMS for editorial content: blog articles, marketing landing pages and dynamic content blocks. GROQ queries fetch structured content at render time. Decoupling content from the React app means the marketing team can push editorial updates without a frontend deploy.
Axios + Cookie Auth
Frontend — API Layer
Centralized API service (apiService.js) wraps every request with an auth-token cookie header injected via getCookie('token') and withCredentials: true. Error responses are normalized to { error: message } for consistent UI error handling across all screens.
Bootstrap 5
Frontend — Layout & Grid
Grid system and responsive utilities used alongside MUI for page-level layout on landing and listing pages. Utility classes handle spacing and responsive breakpoints without custom CSS — Bootstrap and MUI co-exist cleanly with separate scopes.
9-Step Listing Wizard
Frontend — Core Seller Feature
Multi-step property listing flow gated by a MUI Stepper: location → map pin → rooms → features → specifics → description → community → photos → virtual tour. Each step validates before advancing — backward navigation allowed, skipping not. Photo uploads go through pre-signed URLs. Virtual tour accepts a Matterport embed link.
P2P Offer System
Frontend — Core Buyer Feature
Buyers submit offers directly to sellers without an agent intermediary — the core disruptor of the traditional agency model. The make-offer flow collects price, conditions and a personal message. AnyProperty intermediates to connect parties securely. Full offer lifecycle tracked: pending → accepted → completed, visible in the buyer's account dashboard.
Identity Verification
Frontend — Trust & Safety
Sellers must verify identity before a listing goes live — document upload (passport or driver's license) plus a live selfie. Verification state persists in the user account and surfaces as a trust badge on listings. Acts as a first-line defence against fraudulent or ghost listings.
AnyProperty It — Commission Calculator
Frontend — Business Value Proposition
Interactive savings calculator that shows sellers exactly how much commission they save vs a traditional agent. On a $100,000 NZD property: $5,163.50 back in the seller's pocket. This widget is the platform's core commercial argument — the business model challenge to the real estate industry made tangible and interactive.