OLX Clone — React & Firebase Classifieds Marketplace

Open-source classifieds marketplace for buying and selling online. Built with React and Firebase only — no backend server, no Redux, no custom build. List cars, bikes, electronics, property, and more. Includes real-time chat, OTP authentication, admin panel, advanced search, offers, reviews, and SEO-friendly product pages.

Visit live demo

Features
Tech Stack
Project Structure
Firebase Data Model
Getting Started
Demo & Screenshots
Deployment
Contributing
License
Contact

Features

Marketplace and Ads

Create, edit, delete ads — Multi-step form with category selection, location, pricing, and delivery options.
Rich media — Up to 12 images per ad; optional video upload (Remote Config–controlled).
Ad promotion — Featured (7 days), Urgent badge (7 days), Top ad (14 days) via promote flow.
Price history — Track and display price changes over time.
Ad expiry — Configurable expiry (e.g. 30 days) via Remote Config.
Compare ads — Side-by-side comparison of up to 3 listings.
Marketing score — Used for home-page recommendations and sorting.
Ad analytics — Views, favorites, shares tracked in Firestore.

Search and Discovery

Advanced filters — Price range, location, condition, date posted, ad type, delivery, warranty, verified seller.
Voice search — Speech-to-text for search queries.
Map view — Browse ads on a map.
Recent searches — Stored and shown for quick repeat searches.
Saved searches — Persist search queries in Firestore for logged-in users.
Trending searches — Admin-managed trending terms.
Sort options — Newest, price low/high, relevance.
Nearby ads — Geolocation-based listings.
Category browsing — Category pages and category-specific fields.

Authentication

Email/password — Sign up, sign in, password reset, email verification.
Phone OTP — Sign-in and link phone via reCAPTCHA.
Google sign-in — Popup sign-in and account linking.
Email link — Passwordless sign-in via magic link.
Anonymous/guest — Browse as guest; upgrade to permanent account later.
Account management — Reauthentication for sensitive actions, account deletion, unlink providers.

Real-Time Chat

Firestore-backed conversations — One conversation per buyer–seller–product.
Image attachments — Send images in chat (Storage rules, 5MB max).
Typing indicators — Real-time typing status.
Unread count — Global unread message count in header.
Filters — Messages list filtered by buying vs selling.

Offers and Negotiations

Make offer — Send a price offer on an ad.
Counter offer — Seller can counter; buyer can accept or reject.
Offer history — All sent and received offers with status (pending, accepted, rejected).
Status tracking — Real-time offer state via Firestore listeners.

Reviews and Ratings

Seller reviews — 1–5 star ratings and text (up to 2000 characters).
Seller rating display — Aggregate rating on profile and seller store.
Review list — Public list of reviews per seller.

User Profiles and Dashboard

Dashboard — My ads, saved ads, settings, account management.
Profile — Avatar upload, edit profile, verification documents, linked accounts (e.g. Google).
Followers / following — Follow users; view followers and following lists.
Seller store page — Public store view for a user’s listings.
Watchlist — Save ads and optional price alerts (Firestore-backed).
Favorites / saved ads — Quick access from dashboard.
Transaction history — Buying and selling tabs with transaction records.
Address management — Add and manage delivery addresses.

Notifications

Real-time in-app notifications — Firestore listener; notification bell and list.
Unread count — Badge on bell icon.
Mark as read / mark all read — Update read state in Firestore.

Admin Panel

Protected admin routes — Role-based access; only users with admin role can access.
User management — View and manage users.
Ad moderation — Moderate product status (e.g. approve, reject).
Report management — Handle user reports on ads.
Category management — CRUD for categories.
Analytics dashboard — Overview metrics (user count, ad count, reports).
Verification approval — Review and approve verification requests.
Banner management — Promotional banners (via Firestore/Remote Config).

SEO Built-In

React Helmet — Dynamic <title> and <meta name="description"> per product page.
Open Graph — og:title, og:description, og:image, og:url, og:type for sharing.
JSON-LD structured data — Schema.org Product schema (name, description, image, category, price, currency).
Breadcrumbs — Home → Category → Product name on ad view page.
Sitemap page — /sitemap for discovery.
Sanitization — Safe meta and JSON-LD content (XSS prevention).

Security

Firestore security rules — Role-based read/write; admin-only fields; owner/admin checks per collection.
Storage rules — Path-based access; file size (e.g. 5MB) and content-type checks; uid-prefixed paths.
CSP headers — Content-Security-Policy in public/index.html.
Rate limiting — Utility for limiting sensitive actions.
Input sanitization — Sanitize user content for meta and structured data.
XSS prevention — SVG and script restrictions in storage and display.

Firebase Services

Firebase Authentication — All methods above; email verification; account linking.
Cloud Firestore — All app data; offline persistence; real-time listeners for notifications, offers, watchlist, chat.
Cloud Storage — Ad images, chat attachments, profile pictures, verification documents.
Firebase Analytics — Custom events (ad view/create/edit/delete/share, search, offers, chat, auth, favorites, profile).
Performance Monitoring — Custom traces and load time measurement.
Remote Config — Feature flags (e.g. maintenance mode, video upload), dynamic config (max images, ad expiry days), promo banner, min app version.
App Check — reCAPTCHA v3 (optional; requires REACT_APP_FIREBASE_APP_CHECK_RECAPTCHA_SITE_KEY).

Tech Stack

The app runs entirely on React and Firebase. No Express server, no Redux, no custom Webpack.

| Layer | Stack | |:------|:------| | Frontend | React 17, React Router 5, Context API (Auth, Post, AllPost, Location, Notification, Offer, Watchlist, Chat, Toast). | | Backend | Firebase 9 (compat) — Authentication, Firestore, Storage, Analytics, Performance, Remote Config, App Check. | | UI | Bootstrap 4, custom CSS. Responsive layout; mobile bottom navigation. | | SEO | React Helmet for dynamic meta tags and JSON-LD. | | Tooling | Create React App 4, Prettier, ESLint. Node 16.x. |

Built With

React · Firebase · Firestore · Firebase Auth · Firebase Storage · Bootstrap · React Router · React Helmet

Firebase Data Model

Key Firestore collections:

| Collection | Purpose | |:-----------|:--------| | users | User profiles, verification status, role, followers/following counts. | | products | Ads: name, price, description, images, category, location, status, moderation, stats (views, favorites, shares), marketing score. | | conversations | Chat threads; subcollection messages for messages. | | reports | User reports on ads (admin read). | | categories | Product categories (admin write). | | notifications | User notifications (real-time). | | offers | Price offers (buyer/seller/admin). | | reviews | Seller reviews and ratings. | | savedSearches | Saved search queries per user. | | blockedUsers | Blocked user references. | | priceHistory | Price change history per product. | | adPromotions | Promotion records (featured, urgent, top). | | verifications | User verification requests (admin update). | | userPreferences | User preferences. | | trendingSearches | Trending search terms (admin write). | | activityLog | Activity logs (admin read). | | transactions | Purchase transactions (buyer/seller/admin). | | followers | Follower/following relationships. | | addresses | User addresses. | | banners | Promotional banners (admin write). | | feedback | User feedback. |

Composite indexes are defined in firebase/firestore.indexes.json (25 indexes) for products, conversations, notifications, offers, reviews, transactions, followers, and related queries.

Getting Started

Prerequisites: Node.js 16.x (use .nvmrc with nvm use),

Olx

Install / Use

README