RentHub - Premium Rental Marketplace

A modern, full-stack rental marketplace platform for renting physical products like clothes, shoes, boots, and accessories. Built with React, Node.js, Express, and MongoDB.

🎯 Features

Buyer Features

• Browse products by categories with advanced filtering
• Search products by name, brand, or description
• View detailed product information with image gallery
• Check real-time availability before booking
• Book products with date/time selection
• Track booking status (Pending, Confirmed, Completed, Cancelled)
• Leave reviews and ratings after completion
• Wishlist functionality
• Personal dashboard with booking history

Seller Features

• Comprehensive dashboard with statistics and analytics
• Add/Edit/Delete product listings
• Upload multiple product images
• Set rental prices (hourly/daily)
• Manage product availability and time slots
• Handle booking requests (Accept/Reject)
• Track earnings and rental history
• View booking analytics

Technical Features

• JWT-based authentication with role-based access control
• Double-booking prevention with date validation
• RESTful API architecture
• Responsive, mobile-first design
• Smooth animations and hover effects
• Modern gradient-based UI design
• Real-time form validation
• Secure password hashing with bcrypt

🚀 Tech Stack

Frontend

• React 18 - UI library
• React Router v6 - Navigation and routing
• Tailwind CSS - Utility-first styling
• Axios - HTTP client
• React Icons - Icon library
• date-fns - Date manipulation
• React DatePicker - Date selection

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM
• JWT - Authentication
• bcryptjs - Password hashing
• CORS - Cross-origin resource sharing
• dotenv - Environment variables

📋 Prerequisites

• Node.js (v14 or higher)
• MongoDB (v4.4 or higher)
• npm or yarn

🛠️ Installation & Setup

1. Clone the Repository

git clone <repository-url>
cd rental-marketplace

2. Backend Setup

cd backend

# Install dependencies
npm install

# Create .env file
cp .env.example .env

# Edit .env with your configuration
# PORT=5000
# MONGODB_URI=mongodb://localhost:27017/rental-marketplace
# JWT_SECRET=your_super_secret_jwt_key
# NODE_ENV=development

3. Frontend Setup

cd frontend

# Install dependencies
npm install

# Optional: Create .env file for custom API URL
echo "REACT_APP_API_URL=http://localhost:5000/api" > .env

4. Start MongoDB

Make sure MongoDB is running on your system:

# For macOS with Homebrew
brew services start mongodb-community

# For Linux
sudo systemctl start mongod

# For Windows
# Start MongoDB service from Services panel or run mongod.exe

5. Run the Application

Terminal 1 - Backend:

cd backend
npm start
# Server runs on http://localhost:5000

Terminal 2 - Frontend:

cd frontend
npm start
# App opens on http://localhost:3000

📱 Usage

Registration

1. Visit http://localhost:3000/register
2. Choose role: Buyer (to rent items) or Seller (to list items)
3. Fill in the registration form
4. Login automatically after registration

For Buyers

1. Browse products from the homepage or /products page
2. Use filters to narrow down search (category, price range)
3. Click on a product to view details
4. Select rental dates and submit booking request
5. Track bookings from the dashboard
6. Leave reviews after rental completion

For Sellers

1. Access seller dashboard after login
2. Click "Add Product" to list new items
3. Fill in product details, upload images, set pricing
4. Manage incoming booking requests
5. Accept/Reject bookings
6. Track earnings and statistics

🗂️ Project Structure

rental-marketplace/
├── backend/
│   ├── controllers/         # Request handlers
│   │   ├── authController.js
│   │   ├── productController.js
│   │   ├── bookingController.js
│   │   └── reviewController.js
│   ├── models/             # Database schemas
│   │   ├── User.js
│   │   ├── Product.js
│   │   ├── Booking.js
│   │   └── Review.js
│   ├── routes/             # API routes
│   │   ├── authRoutes.js
│   │   ├── productRoutes.js
│   │   ├── bookingRoutes.js
│   │   └── reviewRoutes.js
│   ├── middleware/         # Custom middleware
│   │   └── auth.js
│   ├── server.js           # Express app setup
│   ├── package.json
│   └── .env.example
│
└── frontend/
    ├── public/
    │   └── index.html
    ├── src/
    │   ├── components/     # Reusable components
    │   │   ├── Navbar.js
    │   │   ├── Hero.js
    │   │   ├── Categories.js
    │   │   └── ProductCard.js
    │   ├── context/        # React Context
    │   │   └── AuthContext.js
    │   ├── pages/          # Page components
    │   │   ├── Home.js
    │   │   ├── Products.js
    │   │   ├── Login.js
    │   │   ├── Register.js
    │   │   ├── seller/
    │   │   │   └── Dashboard.js
    │   │   └── buyer/
    │   │       └── Bookings.js
    │   ├── utils/          # Utilities
    │   │   └── api.js
    │   ├── App.js
    │   ├── index.js
    │   └── index.css
    ├── package.json
    └── tailwind.config.js

🔌 API Endpoints

Authentication

• POST /api/auth/register - Register new user
• POST /api/auth/login - Login user
• GET /api/auth/me - Get current user
• PUT /api/auth/profile - Update user profile

Products

• GET /api/products - Get all products (with filters)
• GET /api/products/featured - Get featured products
• GET /api/products/:id - Get single product
• POST /api/products - Create product (Seller only)
• PUT /api/products/:id - Update product (Seller only)
• DELETE /api/products/:id - Delete product (Seller only)
• POST /api/products/:id/check-availability - Check availability

Bookings

• POST /api/bookings - Create booking (Buyer only)
• GET /api/bookings - Get user's bookings
• GET /api/bookings/:id - Get single booking
• PUT /api/bookings/:id/status - Update booking status (Seller only)
• PUT /api/bookings/:id/cancel - Cancel booking (Buyer only)
• GET /api/bookings/stats/dashboard - Get seller statistics

Reviews

• POST /api/reviews - Create review (Buyer only)
• GET /api/reviews/product/:productId - Get product reviews
• GET /api/reviews/my-reviews - Get user's reviews

🎨 Design Features

• Color Scheme: Primary blue (#0ea5e9) with accent purple (#d946ef)
• Typography: Archivo for headings, Inter for body text
• Animations: Smooth transitions, hover effects, fade-in animations
• Responsive: Mobile-first design, works on all screen sizes
• Accessibility: ARIA labels, keyboard navigation, high contrast

🔒 Security Features

• Password hashing with bcryptjs
• JWT token authentication
• Protected routes with role-based access
• Input validation and sanitization
• CORS configuration
• MongoDB injection prevention

🚧 Future Enhancements

• Payment integration (Stripe/PayPal)
• Real-time chat between buyers and sellers
• Email notifications
• Advanced search with Elasticsearch
• Image upload to cloud storage (AWS S3/Cloudinary)
• Social media authentication
• Admin dashboard
• Multi-language support
• Mobile app (React Native)

📝 License

This project is open source and available under the MIT License.

👥 Contributing

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

📧 Contact

For questions or support, please open an issue in the repository.

---

Built with ❤️ using React, Node.js, and MongoDB