Random OLX Clone

An OLX Clone built with the MERN Stack (MongoDB, Express.js, React, Node.js)

This project is a complete replica of the OLX website, featuring a real-time chat system, user authentication, and product listing capabilities.

🌐 Live Demo: https://random.loophub.in/

📑 Table of Contents

Features
Tech Stack
Project Structure
React Component Tree
Database Models
API Routes
Categories
Getting Started
Available Scripts
Screenshots
Contributing
License

✨ Features

🔐 User Authentication - Email/Password & Google OAuth sign-in
📧 Email Verification - Secure account verification via Resend
📝 Product Listings - Create, view, and manage product ads
🖼️ Image Upload - Multiple image uploads via Cloudinary (up to 12 images)
💬 Real-time Chat - Direct messaging between buyers and sellers
🔍 Search & Filter - Search products by title, category, and location
👤 User Profiles - View and edit user profiles
📍 Location Support - Country, State, City selection for listings
🛡️ Admin Dashboard - Administrative controls for managing users and products
📱 Responsive Design - Works on desktop and mobile devices

🛠️ Tech Stack

Frontend

Technology	Version	Purpose
React	18.2.0	UI Framework
React Router DOM	6.11.1	Client-side routing
Chakra UI	2.6.1	Component library
Bootstrap	5.2.3	CSS framework
Axios	1.4.0	HTTP client
Framer Motion	10.12.14	Animations
React Icons	5.5.0	Icon library

Backend

Technology	Version	Purpose
Node.js	≥24.0.0	Runtime
Express	5.2.1	Web framework
MongoDB/Mongoose	9.0.0	Database
Cloudinary	2.8.0	Image storage
JWT	9.0.2	Authentication
Bcrypt	6.0.0	Password hashing
Resend	6.5.2	Email service

📁 Project Structure

Random-OLX-Clone/
├── client/                          # React frontend
│   ├── public/
│   │   ├── index.html
│   │   └── robots.txt
│   └── src/
│       ├── App.js                   # Main application component
│       ├── App.css                  # Global styles
│       ├── index.js                 # Entry point
│       ├── components/
│       │   ├── auth/                # Authentication components
│       │   │   ├── GoogleSignIn.js
│       │   │   ├── Login.js
│       │   │   └── Modallogin.js
│       │   ├── common/              # Shared/reusable components
│       │   │   ├── Catagories.js
│       │   │   ├── Loading.js
│       │   │   ├── MaintenancePage.js
│       │   │   ├── MapComponent.js
│       │   │   ├── NotFound.js
│       │   │   ├── NotListedAnything.js
│       │   │   └── SearchNotFound.js
│       │   └── layout/              # Layout components
│       │       ├── CatNavbar.js
│       │       ├── Footer.js
│       │       └── Navbar.js
│       ├── features/
│       │   ├── admin/               # Admin features
│       │   │   └── AdminDashboard.js
│       │   ├── ads/                 # Product/Ad features
│       │   │   ├── CatagoryView.js
│       │   │   ├── MyadCards.js
│       │   │   ├── Myads.js
│       │   │   ├── PreviewAd.js
│       │   │   └── ProductCards/
│       │   │       ├── ProductCard.js
│       │   │       └── ProductCardProfile.js
│       │   ├── chat/                # Chat features
│       │   │   ├── FetchChat.js
│       │   │   ├── Inbox.js
│       │   │   ├── MyChat.js
│       │   │   └── SendChat.js
│       │   ├── profile/             # User profile features
│       │   │   ├── Profile.js
│       │   │   ├── SearchProfile.js
│       │   │   └── UserProfileEdit.js
│       │   ├── search/              # Search features
│       │   │   ├── Searchbar.js
│       │   │   └── SearchResults.js
│       │   └── sell/                # Selling features
│       │       ├── Addetails.js
│       │       ├── AdSuccess.js
│       │       ├── Details.js
│       │       ├── multiple-image-upload.component.js
│       │       ├── Price.js
│       │       ├── SelectLocation.js
│       │       ├── Sell.js
│       │       └── SellForm.js
│       ├── pages/                   # Page components
│       │   ├── About.js
│       │   ├── Contact.js
│       │   ├── HelpCenter.js
│       │   ├── Home.js
│       │   ├── PrivacyPolicy.js
│       │   └── TermsOfService.js
│       └── utils/
│           └── imageUtils.js
│
├── server/                          # Express backend
│   ├── index.js                     # Server entry point
│   ├── package.json
│   ├── adminRoutes/
│   │   └── adminRoutes.js
│   ├── authRoutes/
│   │   ├── authRoutes.js
│   │   └── googleAuthRoutes.js
│   ├── chatRoutes/
│   │   └── chatRoutes.js
│   ├── contactRoutes/
│   │   └── contactRoutes.js
│   ├── middleware/
│   │   ├── adminAuth.js
│   │   └── auth.js
│   ├── models/
│   │   ├── Contact.js
│   │   ├── Message.js
│   │   ├── Product.js
│   │   ├── User.js
│   │   └── VerificationToken.js
│   └── profileRoutes/
│       └── profileRoutes.js
│
├── LICENSE
└── README.md

🌳 React Component Tree

graph TD
    A[App] --> B[Navbar]
    A --> C[Routes]
    A --> D[Footer]
    
    C --> E[Home]
    C --> F[PreviewAd]
    C --> G[CatagoryView]
    C --> H[SearchResults]
    C --> I[Profile Pages]
    C --> J[Sell Flow]
    C --> K[Chat]
    C --> L[Static Pages]
    C --> M[AdminDashboard]
    
    B --> B1[Searchbar]
    B --> B2[Modallogin]
    
    E --> E1[ProductCard]
    E --> E2[CatNavbar]
    
    F --> F1[ProductCardProfile]
    F --> F2[MapComponent]
    
    I --> I1[Profile]
    I --> I2[UserProfileEdit]
    I --> I3[SearchProfile]
    
    J --> J1[Sell]
    J --> J2[SellForm]
    J --> J3[AdSuccess]
    
    J2 --> J2A[Addetails]
    J2 --> J2B[Details]
    J2 --> J2C[Price]
    J2 --> J2D[SelectLocation]
    J2 --> J2E[MultipleImageUpload]
    
    K --> K1[MyChat]
    K --> K2[Inbox]
    K --> K3[FetchChat]
    K --> K4[SendChat]
    
    L --> L1[About]
    L --> L2[Contact]
    L --> L3[HelpCenter]
    L --> L4[PrivacyPolicy]
    L --> L5[TermsOfService]
    
    B2 --> B2A[Login]
    B2 --> B2B[GoogleSignIn]

Component Hierarchy Overview

graph LR
    subgraph Layout
        Navbar
        Footer
        CatNavbar
    end
    
    subgraph Auth
        Login
        GoogleSignIn
        Modallogin
    end
    
    subgraph Common
        Loading
        NotFound
        MaintenancePage
        MapComponent
        Catagories
    end
    
    subgraph Features
        subgraph Ads
            PreviewAd
            CatagoryView
            Myads
            ProductCard
        end
        
        subgraph Chat
            MyChat
            Inbox
            FetchChat
            SendChat
        end
        
        subgraph Profile
            ProfileView[Profile]
            UserProfileEdit
            SearchProfile
        end
        
        subgraph Sell
            SellPage[Sell]
            SellForm
            SelectLocation
            MultiImageUpload[MultipleImageUpload]
        end
    end

🗃️ Database Models

User Schema

{
  email: String,          // Required, unique
  password: String,       // Hashed with bcrypt
  name: String,
  isEmailVerified: Boolean,
  isAdmin: Boolean,
  picture: String,        // Profile picture URL
  phonenumber: String,
  createdAt: Date
}

Product Schema

{
  useremail: String,      // Owner's email
  title: String,
  description: String,
  address: Array,         // [Country, State, City]
  price: String,
  productpic1-12: String, // Up to 12 image URLs
  owner: String,
  ownerpicture: String,
  catagory: String,
  subcatagory: String,
  createdAt: Date
}

Message Schema

{
  from: String,           // Sender email (ref: User)
  to: String,             // Receiver email (ref: User)
  product_id: ObjectId,   // Reference to Product
  message: String,
  createdAt: Date
}

Contact Schema

{
  name: String,
  email: String,
  subject: String,
  message: String,
  status: String,         // 'new', 'read', 'replied', 'resolved'
  createdAt: Date
}

🔌 API Routes

Authentication Routes

Method	Endpoint	Description
GET	`/api/check-status`	Check backend status
GET	`/auth-endpoint`	Verify authentication
POST	`/register`	User registration
POST	`/login`	User login
POST	`/google-auth`	Google OAuth login
POST	`/forgot-password`	Password reset request

Product Routes

Method	Endpoint	Description
POST	`/add_product`	Create new product listing
GET	`/getProducts`	Get all products
GET	`/getProductsbyCategory/:category`	Get products by category
GET	`/getProductsbyemail`	Get products by user email
GET	`/myads_view`	Get user's own ads
DELETE	`/myads_delete/:id`	Delete a product
POST	`/previewad/:id`	Get product details (authenticated)
POST	`/previewad/notloggedin/:id`	Get product details (public)
GET	`/search`	Search products

Chat Routes

Method	Endpoint	Description
POST	`/sendMessage`	Send a message
GET	`/api/new-messages`	Get new messages
GET	`/api/inbox`	Get inbox messages
GET	`/api/chat/:productId/:userEmail`	Get chat history

Profile Routes

Method	Endpoint	Description
POST	`/send-verification-email`	Send email verification OTP
POST	`/verify-email`	Verify email with OTP
PUT	`/update-profile`	Update user profile
GET	`/profile/:email`	Get user profile

Contact Routes

Method	Endpoint	Description
POST	`/api/contact`	Submit contact form

Admin Routes

Method	Endpoint	Description
GET	`/admin/check`	Check admin status
GET	`/admin/stats`	Get dashboard statistics
GET	`/admin/users`	Get all users
GET	`/admin/products`	Get all products
DELETE	`/admin/users/:id`	Delete a user
DELETE	`/admin/products/:id`	Delete a product

📦 Categories

The platform supports the following product categories:

Category	Subcategories
OLX Autos (Cars)	Cars
Properties	Houses & Apartments (Sale/Rent), Lands & Plots, Shops & Offices, PG & Guest Houses
Mobiles	Mobile Phones, Accessories, Tablets
Jobs	Data Entry, Sales, BPO, Driver, Teacher, IT Developer, and more
Bikes	Motorcycles, Scooters, Spare Parts, Bicycles
Electronics & Appliances	TVs, Computers, Cameras, Fridges, ACs, Washing Machines
Commercial Vehicles	Commercial Vehicles, Spare Parts
Furniture	Sofa & Dining, Beds & Wardrobes, Home Decor
Fashion	Men, Women, Kids
Books, Sports & Hobbies	Books, Gym & Fitness, Musical Instruments, Sports Equipment
Pets	Fishes & Aquarium, Dogs, Pet Accessories
Services	Electronics Repair, Education, Health & Beauty, Packers & Movers

🚀 Getting Started

Prerequisites

Node.js ≥ 24.0.0
MongoDB instance (local or Atlas)
Cloudinary account
Google OAuth credentials
Resend account (for email verification)

Installation

Clone the repository

git clone https://github.com/naveedqadir/Random-OLX-Clone.git
cd Random-OLX-Clone

Install dependencies

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

Set up environment variables (see below)

Start the development servers

# Terminal 1 - Start server
cd server
npm run dev

# Terminal 2 - Start client
cd client
npm start

Environment Variables

Client (`client/.env`)

REACT_APP_BACKEND_URL=http://localhost:5000
REACT_APP_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
REACT_APP_CLOUDINARY_UPLOAD_PRESET=your_cloudinary_upload_preset
REACT_APP_GOOGLE_CLIENT_ID=your_google_oauth_client_id

Server (`server/.env`)

# Server Configuration
PORT=5000

# Google OAuth
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Cloudinary
CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
CLOUDINARY_API_KEY=your-cloudinary-api-key
CLOUDINARY_API_SECRET=your-cloudinary-api-secret

# Resend Email Configuration
RESEND_API_KEY=re_your_api_key_here
RESEND_FROM_EMAIL=Random <onboarding@resend.dev>

# MongoDB
MONGODB_URI=your-mongodb-uri

📜 Available Scripts

Client

Script	Description
`npm start`	Start development server
`npm run build`	Build for production
`npm test`	Run tests
`npm run eject`	Eject from Create React App

Server

Script	Description
`npm start`	Start production server
`npm run dev`	Start development server with nodemon

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
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.

Made with ❤️ by naveedqadir

Latest commit

History

Folders and files

Repository files navigation