Real Estate Listing App

A responsive web application for browsing real estate listings with filtering capabilities and dark mode support. Built with modern web technologies for efficient development.

Features

• Property Listings: Detailed view of properties with images, descriptions, and key features
• Advanced Filtering: Search properties by:
  • Number of bedrooms/bathrooms
  • Parking spaces
  • Price range
  • Property type
• Dark Mode: Supports dark mode, with automatic detection or manual toggling
• Favorites System: Save favorite properties (persists in Local Storage)
• Responsive Layout: Works on mobile, tablet, and desktop

Tech Stack

• - UI component framework
• - Build tooling
• - Styling system
• tailwind-merge - Tailwind class optimization
• clsx - Class name management
• @floating-ui/react - Accessible floating UI components
• @phosphor-icons/react - Icon library

Installation

1. Clone the repository
2. Navigate to project directory
3. Ensure correct Node version: nvm use
4. Install dependencies: npm install
5. Start dev server: npm run dev

Architecture

Main Components

• App - Root component and routing
• ListGrid - Property card grid layout
• PropertyDetails - Single property view with image and details
• FilterForm - Search/filter controls
• FavoritePropertyList - Saved properties dialog

State Management

• ListingContext - Shared property data and loading states
• Local Storage - Persists user preferences and favorites
• Custom Hooks - Reusable state logic modules

Key Custom Hooks

• useDarkMode - Manages theme state with Local Storage sync
• useImageLoader - Handles image loading states and fallbacks
• useListing - Mock API data fetching with loading/error states
• usePropertyFavorites - Manages favorite properties CRUD operations

Custom Components

• Dialog - Accessible modal system using floating-ui
• Tooltip - Interactive hover tooltips using floating-ui
• Loading - Animated spinner component
• Error - Standardized error display