🏡 Real Estate Marketplace

A modern full-stack real estate marketplace built with the MERN stack

Live Demo • Report Bug • Request Feature

🌟 Overview

A comprehensive real estate platform that enables users to browse, list, and manage properties with a seamless user experience. Built with modern technologies and best practices, this application features secure authentication, cloud-based image management, and a responsive design.

🔗 Live Application: https://sman-state.vercel.app

✨ Key Features

🔐 Authentication & Security

JWT-based Authentication - Secure token-based login system
Google OAuth Integration - Quick sign-in with Google accounts
Protected Routes - Private routes for authenticated users only
Password Encryption - Bcrypt hashing for secure password storage

🏘️ Property Management

Create Listings - Add new properties with detailed information
Edit & Delete - Full CRUD operations on user's own listings
Advanced Search - Filter by location, price, type, and amenities
Property Details - Comprehensive property information pages

🖼️ Media Handling

Cloudinary Integration - Cloud-based image storage and optimization
Multiple Images - Upload multiple property images per listing
Responsive Images - Automatic image optimization for different devices

👤 User Dashboard

Profile Management - Update user information and preferences
My Listings - View and manage personal property listings
Contact Landlord - Direct communication with property owners

🎨 Modern UI/UX

Responsive Design - Mobile-first approach with Tailwind CSS
Swiper Carousel - Beautiful image galleries
Toast Notifications - Real-time feedback with react-hot-toast
Loading States - Smooth loading indicators and transitions

🛠️ Tech Stack

Frontend

Technology	Purpose
React 18	UI library with modern hooks
Vite	Fast build tool and dev server
Redux Toolkit	State management
Redux Persist	Persist Redux state across sessions
React Router v7	Client-side routing
Tailwind CSS	Utility-first CSS framework
Axios	HTTP client for API requests
Firebase	Google authentication
Swiper	Modern touch slider
Lucide React	Beautiful icon library

Backend

Technology	Purpose
Node.js	JavaScript runtime
Express.js	Web application framework
MongoDB	NoSQL database
Mongoose	MongoDB ODM
JWT	JSON Web Token authentication
Bcrypt	Password hashing
Cookie Parser	Parse cookies in requests
Dotenv	Environment variable management

Cloud Services

Vercel - Hosting and serverless functions
MongoDB Atlas - Cloud database
Cloudinary - Image storage and CDN
Firebase - Google OAuth

📁 Project Structure

mern-state/
├── api/                      # Backend source code
│   ├── controllers/          # Route controllers
│   │   ├── auth.controller.js
│   │   ├── listing.controller.js
│   │   └── user.controller.js
│   ├── models/              # Database models
│   │   ├── user.model.js
│   │   └── listing.model.js
│   ├── routes/              # API routes
│   │   ├── auth.route.js
│   │   ├── listing.route.js
│   │   └── user.route.js
│   ├── utils/               # Utility functions
│   │   ├── error.js
│   │   └── verifyUser.js
│   └── index.js             # Express app entry point
├── client/                  # Frontend source code
│   ├── src/
│   │   ├── Component/       # React components
│   │   │   ├── Header.jsx
│   │   │   ├── OAuth.jsx
│   │   │   ├── PrivateRoute.jsx
│   │   │   ├── ListingItem.jsx
│   │   │   └── Contact.jsx
│   │   ├── pages/           # Page components
│   │   │   ├── Home.jsx
│   │   │   ├── SignIn.jsx
│   │   │   ├── SignUp.jsx
│   │   │   ├── Profile.jsx
│   │   │   ├── CreateListing.jsx
│   │   │   ├── UpdateListing.jsx
│   │   │   ├── Listing.jsx
│   │   │   ├── Search.jsx
│   │   │   └── About.jsx
│   │   ├── redux/           # Redux store
│   │   │   ├── store.js
│   │   │   └── user/
│   │   │       └── userSlice.js
│   │   ├── App.jsx          # Main app component
│   │   ├── main.jsx         # Entry point
│   │   ├── firebase.js      # Firebase config
│   │   └── index.css        # Global styles
│   ├── public/              # Static assets
│   ├── index.html
│   ├── vite.config.js       # Vite configuration
│   ├── tailwind.config.js   # Tailwind configuration
│   └── package.json
├── vercel.json              # Vercel deployment config
├── package.json             # Root package.json
├── .gitignore
└── README.md

🚀 Getting Started

Prerequisites

Node.js (v16 or higher)
npm or yarn
MongoDB account (MongoDB Atlas)
Cloudinary account
Firebase project (for Google OAuth)

Installation

Clone the repository

git clone https://github.com/naqvi110k/mern-state.git
cd mern-state

Install backend dependencies
```
npm install
```
Install frontend dependencies
```
cd client
npm install
cd ..
```

Set up environment variables

Create a .env file in the root directory:

# MongoDB
MONGO=your_mongodb_connection_string

# JWT
JWT_SECRET=your_jwt_secret_key

# Cloudinary (Backend)
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Create a .env file in the client/ directory:

# Firebase (Google OAuth)
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_sender_id
VITE_FIREBASE_APP_ID=your_firebase_app_id

Run the application

Backend (Terminal 1):
```
npm run dev
```
Frontend (Terminal 2):
```
cd client
npm run dev
```
Access the application
- Frontend: http://localhost:5173
- Backend API: http://localhost:3000

☁️ Deployment

Deploy to Vercel

This project is configured for seamless deployment on Vercel with both frontend and backend in a single monorepo.

Quick Deploy

Push to GitHub

git add .
git commit -m "Ready for deployment"
git push origin main

Import to Vercel
- Go to Vercel Dashboard
- Click "New Project"
- Import your GitHub repository
Configure Build Settings
- Framework Preset: Vite (auto-detected)
- Root Directory: Leave as root
- Build Command: cd client && npm install && npm run build
- Output Directory: client/dist
- Install Command: npm install

Add Environment Variables

In Vercel Dashboard → Settings → Environment Variables, add:

MONGO=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLOUDINARY_CLOUD_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

Deploy 🚀
- Click "Deploy"
- Vercel will build and deploy your application
- Your app will be live at https://your-project.vercel.app

How It Works

Frontend: Built with Vite and served from client/dist
Backend: Runs as Vercel serverless functions at /api/*
Routing: Configured in vercel.json
API Requests: Frontend /api/* routes automatically proxy to backend

📚 API Endpoints

Authentication

POST   /api/auth/signup      - Register new user
POST   /api/auth/signin      - Login user
POST   /api/auth/google      - Google OAuth login
GET    /api/auth/signout     - Logout user

User

GET    /api/user/:id         - Get user profile
POST   /api/user/update/:id  - Update user profile
DELETE /api/user/delete/:id  - Delete user account
GET    /api/user/listings/:id - Get user's listings

Listings

POST   /api/listing/create   - Create new listing
DELETE /api/listing/delete/:id - Delete listing
POST   /api/listing/update/:id - Update listing
GET    /api/listing/get/:id  - Get single listing
GET    /api/listing/get      - Search listings with filters

🎯 Features in Detail

User Authentication Flow

User signs up with email/password or Google OAuth
JWT token generated and stored in HTTP-only cookie
Redux state persisted in localStorage
Protected routes check authentication status
Automatic token refresh on page reload

Property Listing Flow

User navigates to "Create Listing" page
Fills property details (name, description, address, price)
Uploads images to Cloudinary
Submits form → API creates listing in MongoDB
Redirects to property detail page

Search & Filter

Text Search: Property name and description
Type Filter: Rent, Sale, Offer
Amenities: Parking, Furnished
Sort Options: Price (high/low), Latest, Oldest
Pagination: Load more results

🔧 Configuration Files

`vercel.json`

Routes API requests to serverless functions:

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "/api/index.js"
    }
  ]
}

`vite.config.js`

Proxies API requests during development:

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: 'http://localhost:3000',
        changeOrigin: true,
      }
    }
  }
})

🤝 Contributing

Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Naqvi110k

GitHub: @naqvi110k
Project Link: https://github.com/naqvi110k/mern-state

🙏 Acknowledgments

⭐ Star this repo if you find it useful!

Made with ❤️ using MERN Stack

Name		Name	Last commit message	Last commit date
api		api
client		client
.gitignore		.gitignore
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
vercel.json		vercel.json

Latest commit

History

Folders and files

Repository files navigation