prop-search

Angular 21 real-estate frontend demo focused on property search, listing management, and portfolio dashboards.

Features • Tech Stack • Routes • Getting Started • Project Structure

Overview

prop-search is a frontend-first real-estate product demo built to mirror a modern senior Angular role:

• Angular 21
• standalone route components
• signals-based state
• zoneless app setup
• built-in control flow with @if, @for, and @defer
• Tailwind CSS v4
• Vitest
• MSW-backed mock API contract

The app is intentionally shaped like a real product frontend instead of a toy CRUD demo. Search, listing detail, dashboard, and management workflows all talk to HTTP endpoints, even though the backend is mocked.

Features

• Search experience with filters, sorting, per-type counts, and shareable page-aware query behavior
• Paginated result API contract with metadata for counts, ranges, and page state
• Interactive market map for marker-driven listing selection
• Listing detail pages with deferred media sections
• Saved properties backed by a shared signal store
• Manage listings workspace with create and edit flows
• Typed listing editor with validation and mock persistence
• Dashboard route with metrics, trend visualizations, and inventory snapshots
• Large seeded inventory set for more realistic result density
• Monochrome UI theme with a custom repo logo/favicon

Tech Stack

• Angular 21
• TypeScript 5.9
• Tailwind CSS v4
• Angular CDK
• RxJS
• MSW
• Faker
• Vitest

Routes

Route	Purpose
/search	Search, filters, pagination, result list, and market map
/listing/:id	Listing detail view with deferred media
/dashboard	Portfolio and demand overview
/manage/listings	Listing operations board
/manage/listings/new	Create listing flow
/manage/listings/:id/edit	Edit existing listing
/saved	Saved property shortlist

Why This Repo Is Useful

• It uses the Angular feature set a modern Angular frontend team would actually care about.
• It demonstrates route boundaries, shared state, mock API contracts, and frontend ownership.
• It is polished enough for client outreach, portfolio use, and interview walkthroughs.
• It stays honest about scope: this is a serious frontend demo, not a full production backend.

Getting Started

Prerequisites

• Node.js 24+
• pnpm

Install

pnpm install

Run the app

pnpm start

Open http://localhost:4200/.

Build

pnpm build

Test

pnpm exec ng test --watch=false

Scripts

Command	Description
pnpm start	Run the Angular dev server
pnpm build	Create a production build
pnpm watch	Build in watch mode
pnpm exec ng test --watch=false	Run the Vitest suite once

Project Structure

src/
  app/
    core/
      data/
      services/
    features/
      dashboard/
      listing/
      manage/
      saved/
      search/
    shared/
      ui/
  mocks/
  styles.css
public/
  mockServiceWorker.js
  prop-search-icon.svg

Architecture Notes

• src/mocks/handlers.ts defines the mock HTTP surface.
• src/app/core/data/mock-data.ts owns deterministic seeded inventory and dashboard data.
• src/app/core/services/property-api.service.ts keeps route components HTTP-driven instead of coupled to in-memory helpers.
• src/app/core/services/saved-property-store.ts is the small shared signal store for saved items.
• Feature routes stay isolated under src/app/features.

Current Status

This repository is a polished frontend demo / MVP.

What it already has:

• realistic route structure
• large seeded inventory
• mock API endpoints
• list/detail/manage/dashboard flows
• tests and production builds

What it does not yet have:

• real backend and database
• authentication and roles
• production observability
• e2e browser automation

Roadmap

• Saved searches
• Property comparison
• Tour scheduling
• Better map interactions
• Role-based UI
• Production API integration