🏡 Estatery — Luxury Real Estate Platform

A modern, fully responsive real estate web application built with React 18, TypeScript, and Vite.
Browse luxury properties, connect with professional agents, and manage your real estate portfolio seamlessly.

---

🌟 Features

✨ Property Management

• Browse luxury properties with advanced filtering
• Detailed property pages with images, specifications, and agent info
• Save favorite properties to wishlist
• Property search with location and price filters

👥 Agent Directory

• Explore professional real estate agents
• View agent profiles with experience and ratings
• Contact agents directly
• Agent-specific property listings

🎯 User Experience

• Modern, luxury-focused design with Navy + Gold color scheme
• Fully responsive (mobile, tablet, desktop)
• Fast performance with optimized Vite build
• Smooth animations and transitions
• Form validation with Zod

🔐 Authentication Ready

• Login page (UI ready for integration)
• Registration page (UI ready for integration)
• Contact forms with validation

---

🛠 Tech Stack

Category	Technologies
Frontend	React 18.3.1, TypeScript 5.8.3
Build Tool	Vite 7.3.0
Styling	Tailwind CSS 3.4.17
UI Components	Shadcn/UI (42 Radix UI components)
Icons	Lucide React
Forms	React Hook Form, Zod validation
Routing	React Router v6
State	TanStack React Query
Linting	ESLint

---

🚀 Quick Start

Prerequisites

• Node.js 18+ (LTS recommended)
• npm 9+

Installation

# Clone and navigate
git clone <repository-url>
cd real-state

# Install dependencies
npm install

# Start development server
npm run dev

Open your browser: http://localhost:8080/

Build for Production

# Create optimized build
npm run build

# Preview production build
npm run preview

---

📂 Project Structure

src/
├── components/
│   ├── layout/
│   │   ├── Navbar.tsx        # Navigation header
│   │   ├── Footer.tsx        # Footer section
│   │   └── MainLayout.tsx    # Main layout wrapper
│   ├── ui/                   # 42 Shadcn/Radix UI components
│   ├── PropertyCard.tsx      # Property card component
│   ├── AgentCard.tsx         # Agent card component
│   └── NavLink.tsx           # Navigation link
├── pages/                    # 11 page components
│   ├── Index.tsx            # Home page
│   ├── Properties.tsx       # Properties listing
│   ├── PropertyDetails.tsx  # Property detail page
│   ├── Agents.tsx           # Agents directory
│   ├── AgentProfile.tsx     # Agent profile page
│   ├── About.tsx            # About page
│   ├── Services.tsx         # Services page
│   ├── Contact.tsx          # Contact page
│   ├── Login.tsx            # Login page
│   ├── Register.tsx         # Registration page
│   ├── Wishlist.tsx         # Wishlist page
│   └── NotFound.tsx         # 404 error page
├── data/
│   └── mockData.ts          # Mock properties & agents
├── hooks/
│   ├── use-mobile.tsx       # Mobile detection hook
│   └── use-toast.ts         # Toast notification hook
├── lib/
│   └── utils.ts             # Utility functions
├── assets/                  # Images (5 images included)
├── App.tsx                  # Main app with routing
├── main.tsx                 # React entry point
└── index.css                # Global styles

---

📄 Pages & Routes

Page	Route	Description
Home	/	Hero section with featured properties
Properties	/properties	Browse all properties with filters
Property Details	/properties/:id	Detailed property information
Agents	/agents	Agent directory listing
Agent Profile	/agents/:id	Individual agent details
About	/about	Company information
Services	/services	Real estate services offered
Contact	/contact	Contact form and info
Login	/login	User login page
Register	/register	User registration page
Wishlist	/wishlist	Saved favorite properties
404	*	Error page

---

🎨 Design System

Color Palette

• Primary: Navy (#0F172A)
• Accent: Gold (#C9A24D)
• Background: Off-white
• Text: Dark Navy

Typography

• Headers: Playfair Display (elegant serif)
• Body: Inter (clean sans-serif)

Components

• 42 pre-built Shadcn/Radix UI components
• Responsive breakpoints: mobile, tablet, desktop
• Dark/Light mode support ready

---

🔧 Environment Configuration

Create .env.local file:

cp .env.example .env.local

Configure these options:

# Application
VITE_APP_NAME=Estatery
VITE_APP_DESCRIPTION=Luxury Real Estate Platform

# API Configuration
# VITE_API_URL=https://api.example.com
# VITE_API_KEY=your_api_key

# Third-party services
# VITE_GOOGLE_MAPS_API_KEY=...
# VITE_FIREBASE_PROJECT_ID=...

See .env.example for all available options.

---

📦 Available Commands

# Development
npm run dev       # Start dev server (http://localhost:8080)

# Production
npm run build     # Create optimized production build
npm run preview   # Preview production build locally

# Code Quality
npm run lint      # Run ESLint checks

---

🎯 Key Features Explained

Property Browsing

• Search properties by location
• Filter by price range, property type, and status
• View detailed information with images
• Contact agent directly from property page

Agent Management

• Browse all agents with experience levels
• View agent ratings and listings count
• Send inquiries to specific agents
• Save favorite agents

User Features

• Save properties to wishlist
• Contact forms with validation
• Responsive design for all devices
• Toast notifications for feedback
• Error handling on all pages

---

🔒 Security & Best Practices

✅ TypeScript for type safety
✅ Form validation with Zod
✅ No hardcoded API keys (use .env)
✅ Clean code architecture
✅ Zero vulnerabilities in dependencies
✅ Follows React best practices

---

🚀 Deployment

The project is ready to deploy to:

• Vercel (recommended for React/Vite)

  npm install -g vercel
  vercel

• Netlify

  npm install -g netlify-cli
  netlify deploy

• AWS Amplify, Azure, DigitalOcean, etc.

Build output is in /dist folder after npm run build.

---

📋 Dependencies

Production (42 packages)

• React & React DOM
• React Router for routing
• Tailwind CSS for styling
• Shadcn/Radix UI components
• React Hook Form & Zod
• TanStack React Query
• Lucide React icons
• And more...

Development (11 packages)

• Vite for fast builds
• TypeScript compiler
• ESLint for code quality
• PostCSS for CSS processing

All dependencies are up-to-date and security-audited.

---

🤝 Contributing

This is a fully functional project ready for:

• Feature development
• Backend integration
• Testing implementation
• CI/CD setup
• Team collaboration

---

📝 Notes

• Mock data is included in src/data/mockData.ts
• Ready to connect to real backend APIs
• Authentication UI is ready for integration
• All pages are fully functional
• Responsive design tested on all devices

---

📞 Support

For setup issues or questions:

1. Check .env.example for configuration options
2. Review the project structure in src/
3. Check individual page components for examples
4. Ensure Node.js 18+ is installed

---

✅ Project Status

✨ Production Ready

• All Lovable dependencies removed
• Security vulnerabilities: 0
• Build: ✅ Passing
• Dev Server: ✅ Running
• Code Quality: ✅ Excellent

---

Created: December 2025
Last Updated: December 24, 2025
License: MIT You can deploy this project on:

Vercel

Netlify

AWS Amplify

GitHub Pages

Steps:

Run npm run build

Deploy the dist/ folder

Configure environment variables on hosting platform

🔮 Future Enhancements Backend integration (Node.js / Express)

Authentication system (JWT / Firebase / Clerk)

Database connection (MongoDB / PostgreSQL)

Admin dashboard

Advanced property filters

Booking and inquiry system

👨‍💻 Author Arun Kumar Bind Full Stack Web Developer | React & MERN Stack

GitHub: https://github.com/abx15

Portfolio: https://arun15dev.netlify.app

LinkedIn: https://www.linkedin.com/in/arun-kumar-a3b047353/

📄 License MIT License