🏠 RealEstatePro — Full-Stack Property Listing Platform

A full-stack web application where users can browse, list, save, and chat about real estate properties. Built with React, Node.js, MongoDB, Socket.io, and Leaflet maps.

📋 Table of Contents

Features
Tech Stack
Project Structure
How It Works
Setup Instructions
Environment Variables
API Overview
Screenshots
Future Improvements

✨ Features

User Authentication — Register, log in, and log out securely using JWT (stored in HTTP-only cookies)
Create Property Listings — Add properties with title, price, address, city, bedrooms, bathrooms, coordinates, and images
Image Upload — Upload multiple property images via Cloudinary
Search & Filter — Search properties by city, type (buy/rent), property kind, price range, and number of bedrooms
Interactive Map — View all matching properties on a Leaflet map with clickable pins and popups
Save Properties — Logged-in users can save and unsave favourite listings
Real-Time Chat — Message other users in real time using Socket.io
User Profile — View and update your profile, see your own listings and saved posts

🛠 Tech Stack

Layer	Technology
Frontend	React 18, React Router v6, Vite
Backend	Node.js, Express.js
Database	MongoDB (via Prisma ORM)
Authentication	JWT (JSON Web Tokens) + HTTP-only cookies
Real-Time Chat	Socket.io
Maps	Leaflet, React-Leaflet
Image Upload	Cloudinary
Styling	Plain CSS (modular per component)

📁 Project Structure

Real-Estate-Platform/
│
├── frontend/                          # React client (Vite)
│   ├── public/                        # Static assets (logo, placeholder images)
│   ├── src/
│   │   ├── components/                # Reusable UI components
│   │   │   ├── card/                  # Property card shown in listings
│   │   │   ├── chat/                  # Real-time chat UI
│   │   │   ├── filter/                # Search filter bar
│   │   │   ├── layout/                # Page layout wrapper (Navbar + Outlet)
│   │   │   ├── map/                   # Leaflet map wrapper
│   │   │   ├── navbar/                # Top navigation bar
│   │   │   ├── pin/                   # Map pin / popup
│   │   │   ├── requireAuth/           # Route guard (redirect if not logged in)
│   │   │   ├── searchBar/             # Home page search bar
│   │   │   └── slider/                # Image slider / lightbox
│   │   ├── context/
│   │   │   ├── AuthContext.jsx        # Global auth state (currentUser)
│   │   │   └── SocketContext.jsx      # Socket.io connection & online users
│   │   ├── lib/
│   │   │   ├── apiRequest.js          # Axios instance with base URL & credentials
│   │   │   └── loaders.js             # React Router data loaders
│   │   ├── pages/
│   │   │   ├── homePage/              # Landing page with search
│   │   │   ├── listPage/              # Property list + map
│   │   │   ├── singlePage/            # Single property detail
│   │   │   ├── profilePage/           # User profile, listings, saved posts, chat
│   │   │   ├── profileUpdatePage/     # Edit profile form
│   │   │   ├── newPostPage/           # Create new property listing
│   │   │   ├── updatePostPage/        # Edit existing listing
│   │   │   ├── login/                 # Login form
│   │   │   └── register/              # Registration form
│   │   ├── App.jsx                    # Route definitions
│   │   ├── main.jsx                   # React entry point
│   │   └── index.css                  # Global CSS variables and resets
│   ├── .env.example                   # Frontend env template
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
│
├── backend/                           # Express API server
│   ├── controllers/                   # Business logic
│   │   ├── auth.controller.js         # Register, login, logout
│   │   ├── post.controller.js         # CRUD for property listings
│   │   ├── user.controller.js         # User profile, saved posts, notifications
│   │   ├── chat.controller.js         # Chat rooms
│   │   └── message.controller.js      # Messages within chats
│   ├── middleware/
│   │   └── verifyToken.js             # JWT verification middleware
│   ├── routes/                        # Express routers
│   │   ├── auth.route.js
│   │   ├── post.route.js
│   │   ├── user.route.js
│   │   ├── chat.route.js
│   │   └── message.route.js
│   ├── prisma/
│   │   └── schema.prisma              # Database schema (MongoDB via Prisma)
│   ├── lib/
│   │   └── prisma.js                  # Prisma client singleton
│   ├── socket/
│   │   └── index.js                   # Socket.io server setup
│   ├── utils/
│   │   └── cloudinary.js              # Cloudinary configuration & upload helper
│   ├── .env.example                   # Backend env template
│   ├── app.js                         # Express app entry point
│   └── package.json
│
├── .github/
│   └── workflows/
│       └── ci.yml                     # GitHub Actions CI (install + build)
│
├── .gitignore
└── README.md

⚙️ How It Works

User Authentication

A new user fills in the Register form (username, email, password).
The backend hashes the password with bcrypt and stores the user in MongoDB.
On Login, the backend verifies the password, creates a JWT, and sends it in an HTTP-only cookie.
The frontend stores the user object in localStorage via AuthContext.
Protected routes are guarded by the RequireAuth component — if no user is logged in, they are redirected to /login.
The JWT cookie is verified on every protected API call by the verifyToken middleware.

Creating a Property Listing

A logged-in user opens the Add Property page.
They fill in details (title, price, address, bedrooms, etc.) and upload images.
Images are uploaded directly to Cloudinary from the browser; the returned secure URLs are stored.
The form data is sent as a POST /api/posts request.
The backend creates a Post and a linked PostDetail in MongoDB via Prisma.

Uploading Images

The frontend sends each image file directly to Cloudinary's upload API using an unsigned upload preset.
Cloudinary returns a secure_url which is stored in the post's images array.
No image files are stored on the server.

Searching & Filtering Properties

The user types a city or selects filters (type, property kind, price range, bedrooms) on the List page.
Filter values are stored as URL query parameters.
React Router's data loader fetches GET /api/posts?city=...&type=... with those params.
The backend queries MongoDB using Prisma's where clauses and returns matching posts.

Showing Properties on the Map

Every property stores latitude and longitude fields.
The Map component renders a Leaflet MapContainer and places a Marker (pin) for each property.
Clicking a pin shows a popup with the property image, title, and price linking to the detail page.

Real-Time Chat

When a logged-in user opens their Profile, existing chats are loaded from the API.
Clicking a chat opens the Chat component and loads the message history.
On mount, the client emits newUser to the Socket.io server with their user ID.
Sending a message calls POST /api/messages/:chatId and then emits sendMessage over the socket.
The receiver's client listens for getMessage events and appends the new message instantly.

🚀 Setup Instructions

Prerequisites

Node.js v22 LTS (use nvm: nvm install && nvm use — the .nvmrc pins v22)
A MongoDB Atlas cluster (free tier works)
A Cloudinary account (free tier works)

Note on Node version: This project targets Node.js v22 LTS. The backend uses bcryptjs (pure-JS) instead of bcrypt so there are no native binary dependencies and no url.parse() deprecation warnings on Node 24+.

1. Clone the repository

git clone https://github.com/akhil16-svg/Real-Estate-Platform.git
cd Real-Estate-Platform

2. Set up the Backend

cd backend
npm install

Copy the example environment file and fill in your values:

cp .env.example .env

Generate the Prisma client:

npx prisma generate

Start the backend server:

npm run dev      # development (nodemon, auto-restart)
# -- or --
npm start        # production

# Server + Socket.io both run on http://localhost:8800

3. Set up the Frontend

Open a new terminal:

cd frontend
npm install

Copy the example environment file:

cp .env.example .env

Start the frontend dev server:

npm run dev
# App runs on http://localhost:5173

🔐 Environment Variables

`backend/.env`

Variable	Description
`DATABASE_URL`	MongoDB connection string from Atlas
`JWT_SECRET_KEY`	A long, random secret string for signing JWTs and CSRF tokens
`CLOUDINARY_CLOUD_NAME`	Your Cloudinary cloud name
`CLOUDINARY_API_KEY`	Your Cloudinary API key
`CLOUDINARY_API_SECRET`	Your Cloudinary API secret
`CLIENT_URL`	Frontend URL for CORS (e.g. `http://localhost:5173`)
`PORT`	Port for the backend server (default: `8800`)

`frontend/.env`

Variable	Description
`VITE_API_URL`	Backend API base URL (e.g. `http://localhost:8800/api`)
`VITE_SOCKET_URL`	Backend Socket.io URL (e.g. `http://localhost:8800`)
`VITE_CLOUDINARY_NAME`	Your Cloudinary cloud name
`VITE_CLOUDINARY_PRESET`	Your Cloudinary unsigned upload preset name

🔌 API Overview

All routes are prefixed with /api.

Auth — `/api/auth`

Method	Endpoint	Description	Auth required
`POST`	`/register`	Create a new user account	No
`POST`	`/login`	Log in and receive a JWT cookie	No
`POST`	`/logout`	Clear the JWT cookie	No

Posts — `/api/posts`

Method	Endpoint	Description	Auth required
`GET`	`/`	Get all posts (supports query filters)	No
`GET`	`/:id`	Get a single post with details	No
`POST`	`/`	Create a new property listing	✅ Yes
`PUT`	`/:id`	Update a listing (owner only)	✅ Yes
`DELETE`	`/:id`	Delete a listing (owner only)	✅ Yes

Users — `/api/users`

Method	Endpoint	Description	Auth required
`GET`	`/:id`	Get user info	✅ Yes
`PUT`	`/:id`	Update profile (own account only)	✅ Yes
`DELETE`	`/:id`	Delete account (own account only)	✅ Yes
`POST`	`/save`	Save or unsave a post	✅ Yes
`GET`	`/profilePosts`	Get own posts and saved posts	✅ Yes
`GET`	`/notification`	Get unread chat count	✅ Yes

Chats — `/api/chats`

Method	Endpoint	Description	Auth required
`GET`	`/`	Get all chats for current user	✅ Yes
`GET`	`/:id`	Get a single chat with messages	✅ Yes
`POST`	`/`	Start a new chat	✅ Yes
`PUT`	`/:id`	Mark chat as read	✅ Yes

Messages — `/api/messages`

Method	Endpoint	Description	Auth required
`POST`	`/:chatId`	Send a message in a chat	✅ Yes

📸 Screenshots

🏠 Home Page

📋 Property List + Map

🏢 Property Detail

👤 User Profile + Real-time Chat

🔐 Login & Register

➕ Add New Property

Page	Preview
Home	coming soon
Property List	coming soon
Property Detail	coming soon
User Profile	coming soon
Real-Time Chat	coming soon

🔭 Future Improvements

Pagination — Load properties in batches instead of all at once
Advanced filters — Add floor count, furnished/unfurnished, parking, etc.
Image compression — Compress images before uploading to Cloudinary
Admin dashboard — Manage all users and listings
Email notifications — Notify users when they receive a new message
Deployment — Deploy frontend to Vercel and backend to Railway or Render
Unit & integration tests — Add test coverage with Vitest and Supertest

📄 License

This project is open source and available under the MIT License.

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
.github/workflows		.github/workflows
backend		backend
frontend		frontend
.gitignore		.gitignore
.nvmrc		.nvmrc
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

🏠 RealEstatePro — Full-Stack Property Listing Platform

📋 Table of Contents

✨ Features

🛠 Tech Stack

📁 Project Structure

⚙️ How It Works

User Authentication

Creating a Property Listing

Uploading Images

Searching & Filtering Properties

Showing Properties on the Map

Real-Time Chat

🚀 Setup Instructions

Prerequisites

1. Clone the repository

2. Set up the Backend

3. Set up the Frontend

🔐 Environment Variables

backend/.env

frontend/.env

🔌 API Overview

Auth — /api/auth

Posts — /api/posts

Users — /api/users

Chats — /api/chats

Messages — /api/messages

📸 Screenshots

🏠 Home Page

📋 Property List + Map

🏢 Property Detail

👤 User Profile + Real-time Chat

🔐 Login & Register

➕ Add New Property

🔭 Future Improvements

📄 License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages