Back to portfolio
Real Estate Platform logoProperty marketplace

Real Estate Platform

Next.js real estate marketplace with property discovery, buyer favorites, agent workspaces, admin operations, inquiries, and role-based access.

Next.jsTypeScriptReal EstateAdminAgent

The real estate platform is a polished property marketplace built with Next.js, TypeScript, clean architecture, mock APIs, and realistic domain data. It covers public property discovery, searchable listings, property details, favorites, agent profiles, inquiry flows, contact pages, mock auth, buyer behavior, agent dashboards, and admin management.

The documented route map includes public marketplace routes, protected profile routes, agent operations, admin dashboard and listing management, mock API endpoints, role guards, SEO metadata, loading/error/not-found states, and light/dark/system theme support.

Presentation

Mockups

HadiEstate buyer discovery light mockup
HadiEstate buyer journey dark mockup
HadiEstate agent dashboard mockup
HadiEstate agent leads and listings mockup
HadiEstate admin marketplace control mockup
HadiEstate admin operations dark mockup
Details

App presentation

Real Estate Platform

Property marketplace, buyer journey, agent workspace, and admin operations from the Next.js app.

A professional real estate marketplace with public browsing, advanced property search, property details, image galleries, favorites, agent profiles, inquiry forms, contact pages, demo role authentication, buyer profile routes, agent dashboards, agent listing management, admin analytics, property CRUD, users, agents, inquiries, settings, and mock API endpoints.

  • Public routes cover home, properties, property details, agent profiles, favorites, contact, login, register, unauthorized, and not-found states.
  • Property discovery includes keyword/location/type/purpose/price filters, sorting, active filter chips, empty states, loading skeletons, and responsive mobile filters.
  • Property details include gallery, facts, amenities, agent contact card, inquiry form, map placeholder, similar properties, and share/print placeholder actions.
  • Agent routes include dashboard, properties, inquiries, and profile settings for agent/admin roles.
  • Admin routes include dashboard, property list, create/edit/detail property pages, agents, users, inquiries, and settings.
  • Mock API routes support properties, agents, inquiries, users, locations, amenities, and admin/agent analytics.

Public Marketplace

  • Homepage presents premium search, sale/rent selection, featured listings, popular locations, property type shortcuts, platform stats, and agent CTAs.
  • Properties listing supports advanced filters, sorting, URL search params, active filter chips, mobile filter dialog, desktop filter sidebar, loading, error, and empty states.
  • Property cards show image, sale/rent badges, featured/status badges, price, location, facts, agent mini-info, favorite action, hover state, and accessible controls.
  • Property details include gallery thumbnails, preview dialog, property facts, amenities, inquiry form, map placeholder, similar listings, and metadata-friendly content.

Buyer Experience

  • Visitors can browse, search, filter, view details, view agents, submit contact forms, submit property inquiries, and use theme controls.
  • Registered buyer behavior includes favorites, remove-from-favorites, profile placeholder, inquiry history placeholder, and prefilled inquiry behavior.
  • Favorites use local persistence for the mock MVP and include responsive empty-state CTAs back to browsing.
  • Contact route includes contact form, company information, office/map placeholders, FAQ content, support email, and social placeholders.

Agent Workspace

  • Agent routes are guarded for agent/admin roles and use a dedicated agent layout.
  • Agent dashboard provides analytics and operations overview for the agent's own listings and inquiries.
  • Agent properties route supports scoped listing management for owned property records.
  • Agent inquiries and profile routes support lead status work and agent profile maintenance.

Admin Operations

  • Admin dashboard tracks properties, active/pending/featured/sold/rented statuses, agents, users, inquiries, and month activity.
  • Admin properties support list, create, edit, detail, status actions, feature/unfeature, archive/delete, and confirmation dialogs.
  • Admin agents, users, inquiries, and settings routes make the product feel like a complete marketplace control panel.
  • Analytics endpoints cover property status/type distribution, sale-vs-rent split, monthly inquiries, listings by city, and agent metrics.

Technical Notes

  • Next.js App Router separates public, auth, protected, agent, admin, API, unauthorized, and not-found routes.
  • Clean architecture keeps UI away from direct mock data through repositories, services, typed models, route handlers, and mock APIs.
  • The app uses React Hook Form, Zod validation, Zustand, React Query, Tailwind, accessible shared UI primitives, and theme-aware components.
  • Portfolio integration runs the real Next.js app behind a clean `/demos/real-estate/app/` URL.