RentLoop - Renter OLX Platform

A modern rental marketplace platform built with React and MongoDB, featuring subscription-based product rentals with support for three user personas: Renter, User, and Admin.

Features

• 🎨 Dark/Light Theme Toggle - Seamless theme switching
• 👥 Multi-Persona Support - Renter, User, and Admin views
• 📦 Product Listings - MongoDB-backed product catalog
• 💳 Subscription Management - Monthly subscription plans
• 🔄 Real-time Data - Fetch products from MongoDB API

Tech Stack

Frontend

• React 18
• Vite
• Lucide React (Icons)
• Custom CSS with CSS Variables

Backend

• Node.js
• Express.js
• MongoDB with Mongoose
• RESTful API

Setup Instructions

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or MongoDB Atlas)

Installation

1. Clone and install dependencies:

   npm install

2. Set up environment variables:

   cp .env.example .env

   Edit .env and add your MongoDB connection string:

   MONGODB_URI=mongodb://localhost:27017/renter-olx
   # Or for MongoDB Atlas:
   # MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/renter-olx
   PORT=3000
   

3. Start MongoDB:

   • Local MongoDB: Make sure MongoDB is running on your machine
   • MongoDB Atlas: Use your connection string in .env

4. Run the application:

   Option 1: Run both frontend and backend together:

   npm run dev:all

   Option 2: Run separately:

   # Terminal 1 - Backend server
   npm run server
   
   # Terminal 2 - Frontend
   npm run dev

5. Access the application:

   • Frontend: http://localhost:5173
   • Backend API: http://localhost:3000
   • Health Check: http://localhost:3000/api/health

API Endpoints

Products

• GET /api/products - Get all products
• GET /api/products/:id - Get single product
• POST /api/products - Create product
• PUT /api/products/:id - Update product
• DELETE /api/products/:id - Delete product

Users

• GET /api/users - Get all users
• GET /api/users/:id - Get single user
• POST /api/users - Create user
• PUT /api/users/:id - Update user
• DELETE /api/users/:id - Delete user

Subscriptions

• GET /api/subscriptions - Get all subscriptions
• GET /api/subscriptions/:id - Get single subscription
• POST /api/subscriptions - Create subscription
• PUT /api/subscriptions/:id - Update subscription
• PATCH /api/subscriptions/:id/cancel - Cancel subscription

Database Models

Product

• name, price, duration, status, category
• features (array), description, images
• renterId (reference to User)
• location, isActive

User

• name, email, password, role (renter/user/admin)
• phone, address, isVerified, kycStatus

Subscription

• userId, productId (references)
• planType, monthlyPrice
• startDate, endDate, status
• paymentStatus, nextBillingDate

Project Structure

renter-olx/
├── server/
│   ├── index.js           # Express server entry
│   ├── models/            # MongoDB models
│   │   ├── Product.js
│   │   ├── User.js
│   │   └── Subscription.js
│   └── routes/            # API routes
│       ├── products.js
│       ├── users.js
│       └── subscriptions.js
├── src/
│   ├── App.jsx            # Main React component
│   ├── main.jsx           # React entry point
│   └── styles.css         # Global styles
├── .env                   # Environment variables
├── package.json
└── vite.config.js

Development

• Frontend runs on port 5173 (Vite dev server)
• Backend runs on port 3000 (Express server)
• Vite proxy configured to forward /api/* to backend

Next Steps

• Add authentication (JWT)
• Implement user registration/login
• Add product image uploads
• Create subscription checkout flow
• Add admin dashboard
• Implement payment integration

License

MIT

rentlx-prototype