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.
- Features
- Tech Stack
- Project Structure
- Firebase Data Model
- Getting Started
- Demo & Screenshots
- Deployment
- Contributing
- License
- Contact
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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).
- React Helmet — Dynamic
<title>and<meta name="description">per product page. - Open Graph —
og:title,og:description,og:image,og:url,og:typefor 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 —
/sitemapfor discovery. - Sanitization — Safe meta and JSON-LD content (XSS prevention).
- 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 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).
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. |
React · Firebase · Firestore · Firebase Auth · Firebase Storage · Bootstrap · React Router · React Helmet
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.
Prerequisites: Node.js 16.x (use .nvmrc with nvm use), npm, and a Firebase project with Authentication, Firestore, and Storage enabled.
git clone https://github.com/sijeeshmiziha/olx.git
cd olx
npm installCopy .env.example to .env. In Firebase Console → Project settings → General, add your web app config:
| Variable | Required | Description |
|---|---|---|
REACT_APP_FIREBASE_API_KEY |
Yes | Web API key |
REACT_APP_FIREBASE_AUTH_DOMAIN |
Yes | Auth domain (e.g. project.firebaseapp.com) |
REACT_APP_FIREBASE_PROJECT_ID |
Yes | Project ID |
REACT_APP_FIREBASE_STORAGE_BUCKET |
Yes | Storage bucket |
REACT_APP_FIREBASE_MESSAGING_SENDER_ID |
Yes | Messaging sender ID |
REACT_APP_FIREBASE_APP_ID |
Yes | Web app ID |
REACT_APP_FIREBASE_MEASUREMENT_ID |
No | Analytics measurement ID |
REACT_APP_FIREBASE_APP_CHECK_RECAPTCHA_SITE_KEY |
No | reCAPTCHA v3 site key for App Check |
Do not commit .env.
npm startIf you use your own Firebase project, deploy Firestore rules and indexes:
npm run deploy:rules # Firestore rules + Storage rules
npm run deploy:indexes # Firestore indexes| Script | Description |
|---|---|
npm start |
Start dev server |
npm run build |
Production build |
npm test |
Run tests |
npm run deploy |
Build and full Firebase deploy |
npm run deploy:hosting |
Build and deploy only Firebase Hosting |
npm run deploy:rules |
Deploy Firestore and Storage rules |
npm run deploy:indexes |
Deploy Firestore indexes |
npm run format |
Format code with Prettier |
npm run format:check |
Check formatting |
See it in action — How to sell using OLX Clone
how.to.sell.product.using.olx-clone.sijeesh.mp4
Sneak peek
| Home / Listings | Post detail / View |
|---|---|
 |
 |
-
Build:
npm run build— output is in thebuild/folder. -
Firebase Hosting (recommended):
- Install Firebase CLI:
npm install -g firebase-tools - Login:
firebase login - Init (if needed):
firebase init hostingand setbuildas public directory. - Deploy:
npm run deploy:hostingorfirebase deploy --only hosting - Set the same environment variables in Firebase Hosting (e.g. via build config or CI secrets).
- Install Firebase CLI:
-
Other hosts — Deploy the
build/folder to Vercel, Netlify, or any static host. Configure env vars in the hosting dashboard for production.
Contributions are welcome. Open an issue or submit a pull request. Keep code style consistent and run npm test before submitting.
MIT. See LICENSE for details.
Feel free to reach out through the links below.
