🏡 Rental Studio: Modern Property Rental & Booking Platform

Overview

Rental Studio is an end-to-end, full-stack web application inspired by modern hospitality platforms like Airbnb. Tailored specifically for the rental accommodation and studio property market, it bridges property hosts and travelers by providing a streamlined ecosystem to showcase places, manage comprehensive amenities, upload high-resolution galleries, and reserve stays with instant pricing calculations.

🎯 Key Features

🔐 Authentication & User Sessions

• Custom JWT Security: Token-based authentication with secure HTTP-only cookies preventing XSS attacks.
• Encrypted Passwords: Salted password hashing with Bcrypt.js.
• Protected User Profiles: Role-aware routes ensuring private booking histories and property management panels.

🏡 Property Discovery & Exploration

• Visual Home Feed: Browse available studio stays with high-quality photo previews, location tags, and transparent price tags.
• Detailed Place Pages: Explore comprehensive property descriptions, host details, max guest counts, check-in/out times, and perk lists.

➕ Host & List Places

• Full Listing CRUD: Property owners can publish new rental listings, edit existing details, update photo galleries, and remove listings.
• Custom Information: Configure specific studio rules, check-in windows, and accommodation guidelines.

📸 Dual Photo Upload System

• Local File Uploads: Upload multiple high-resolution photos directly from disk handled via Multer.
• Remote Image Scraper: Paste external image URLs for automatic server-side downloading and local storage caching.

💵 Flexible Multi-Tier Pricing

• Custom Rates: Configure dynamic price points tailored for hourly, daily, or monthly rental periods.
• Automated Price Calculator: Instant calculation of total stay costs based on selected dates and duration.

🛋️ Comprehensive Amenities & Perks

• Highlight essential studio perks including:
  • 📶 High-Speed WiFi
  • 🚗 Free Parking on Premises
  • 📺 TV & Entertainment
  • 🛋️ Fully Furnished
  • 🐾 Pets Allowed
  • 🚪 Private Entrance
  • ⚡ 24x7 Electricity Backup
  • 📍 Nearby Amenities (Library, Hospital, Park, Public Transit)
  • 🛡️ 24x7 Security & CCTV

📅 Dynamic Date & Price Calculator

• Integrated date picker powered by date-fns computing total days/nights and multiplying by rate tiers.
• Real-time input validation preventing invalid check-in/check-out selections.

🛎️ Booking & Reservation Management

• Complete reservation workflow recording guest contact details, total price, and date ranges.
• Dedicated My Bookings view allowing travelers to track upcoming and past stays.

📱 Responsive Mobile-First Design

• Clean, accessible user interface built from scratch with Tailwind CSS.

⚙️ Tech Stack & Architecture

Frontend

• React 18: Dynamic component-driven user interface.
• Vite: Next-generation fast frontend bundler and HMR.
• React Router DOM (v6): Declarative client-side routing.
• Tailwind CSS: Modern utility-first responsive styling.
• Axios: HTTP client with credentials and session cookie support.
• Date-fns: Lightweight date manipulation and stay duration math.
• React Hot Toast: Elegant interactive notification toasts.

Backend & Database

• Node.js & Express.js: Modular RESTful API architecture.
• MongoDB & Mongoose: Flexible NoSQL document schemas for Users, Places, and Bookings.
• JWT (JSON Web Tokens): Stateless token authentication via HTTP-only cookies.
• Bcrypt.js: Cryptographic password hashing.
• Multer: Multi-part form-data handler for disk-based image uploads.
• Image-Downloader: Utility for server-side remote image fetching via URL.

🏗️ Project Architecture

rental-studio/
├── Client/                     # Frontend Application (React + Vite + Tailwind)
│   ├── public/                 # Static assets
│   ├── src/
│   │   ├── Components/         # Layouts, Navigation, Auth, & Property Details
│   │   │   ├── AccountSubComponents/   # Bookings, Sell Property, Place Form, Perks
│   │   │   ├── Placedetailscomponents/ # Place Details, Booked Place, Booking Operations
│   │   │   ├── Header.jsx      # Top navigation with user dropdown
│   │   │   └── IndexPage.jsx   # Home feed displaying all rental places
│   │   ├── context/            # User Authentication Context Provider
│   │   ├── App.jsx             # Route definitions & global configs
│   │   └── main.jsx            # Application entry point
│   ├── package.json
│   └── vite.config.js
│
└── Server/                     # Backend Application (Node.js + Express + MongoDB)
    ├── modals/                 # Mongoose Schemas (User, Place, Booking)
    ├── uploads/                # Static storage for uploaded property images
    ├── index.js                # Express server & API route endpoints
    └── package.json

🧪 Demo Account (For Testing)

You can explore all features of the application directly using the demo credentials below:

• Email: tester@test.com
• Password: Tester

[!TIP] Use this account to test property listing, image uploads, amenities configuration, and booking reservations without signing up.

📡 API Endpoints Overview

| Method | Endpoint | Description | Auth Required | | :----- | :---------------- | :------------------------------------------ | :-----------: | | POST | /signup | Register a new user | ❌ | | POST | /login | Authenticate user & issue JWT cookie | ❌ | | POST | /logout | Invalidate user session cookie | ❌ | | GET | /profile | Fetch logged-in user profile | ✅ | | GET | /places | Retrieve all listed properties | ❌ | | GET | /places/:id | Get details of a single property | ❌ | | POST | /places | Create a new property listing | ✅ | | PUT | /places | Update an existing property | ✅ | | GET | /user-places | Get properties listed by the logged-in host | ✅ | | POST | /upload-by-link | Download & store image from URL | ✅ | | POST | /upload | Upload multiple images from local disk | ✅ | | POST | /booking | Create a new reservation | ✅ | | GET | /booking | List all bookings for the logged-in user | ✅ |

🤸 Quick Start & Local Setup

Follow these steps to set up the project locally on your machine:

1. Clone the Repository

git clone https://github.com/Souvik-223/rental-studio.git
cd rental-studio

2. Backend Setup

Navigate to the Server directory:

cd Server
npm install

Create a .env file inside the Server directory:

PORT=5000
MONGO_URI=your_mongodb_connection_string

Start the backend server:

npm start

The server will start running on http://localhost:5000.

3. Frontend Setup

Open a new terminal window and navigate to the Client directory:

cd Client
npm install

Create a .env file inside the Client directory:

VITE_URL=http://localhost:5000
VITE_DataURL=http://localhost:5000/uploads/

Start the Vite development server:

npm run dev

Open http://localhost:5173 in your browser to explore Rental Studio!