Hotel_Booking_MERN_App

✨ Full-stack MERN Hotel Booking Engine! 🏨 Search hotels, pick dates 📅 & book rooms seamlessly. Powered by Node.js, Express, MongoDB Atlas, React & Tailwind CSS. Features JWT auth 🔐, CRUD resources, date-availability logic & admin dashboard! ⚡🚀

🚀 Features

Authentication & User Management: Secure sign-up, login, and session persistence powered by Clerk.
Room Search & Availability: Real-time room availability verification based on selected check-in and check-out dates.
Smart Booking Engine: Automated multi-night pricing calculation and guest management system.
Automated Email Confirmations: Instant HTML email receipts sent to users upon successful reservation via Nodemailer SMTP.
Media Cloud Management: Seamless image upload, handling, and fast distribution using Cloudinary and Multer.
Hotel Owner Dashboard: Centralized management panel for tracking total revenue, reservation metrics, and active bookings.
Responsive Dark UI: Fully responsive interface built with Tailwind CSS v4 and interactive notification alerts using React Hot Toast.

🛠️ Tech Stack

Frontend: React 19, Vite, React Router DOM, Tailwind CSS v4, Axios, React Hot Toast, Clerk React
Backend: Node.js, Express.js (v5), Mongoose ODM, Nodemailer, Cloudinary, Multer, Svix, Stripe SDK, CORS, Dotenv, Nodemon, Stripe
Database: MongoDB Atlas
Authentication: Clerk Express & Clerk React
Version Control: Git, GitHub
DevOps: Vercel

✨ Features

🏗️ Full-Stack MERN Architecture – Seamless integration connecting a React 19 client to a Node.js & Express 5 REST API server.
⚡ Axios API Integration – Clean client-side HTTP requests utilizing structured controllers for real-time frontend-backend communication.
🔐 Authentication & Access Control – Secure session management and role-based access handling powered by Clerk.
📅 Real-Time Booking & Availability – Automated room availability checking for custom dates with multi-night price calculation.
📧 Automated Email Confirmation – Dynamic HTML reservation receipts dispatched instantly via Nodemailer SMTP.
🖼️ Cloud Media Pipeline – Seamless multi-image room uploads and asset delivery powered by Cloudinary and Multer.
📊 Hotel Owner Analytics Dashboard – Centralized metrics overview tracking total bookings, occupancy, and cumulative revenue.
🗄️ MongoDB & Mongoose Validation – Structured database schemas, data validation, and persistent cloud storage using MongoDB Atlas.
🌐 Dynamic Client-Side Routing – Multi-view navigation managed via React Router DOM for explore, room details, and dashboard views.
🎨 Responsive Dark-Themed UI – Modern interface designed with Tailwind CSS v4 and interactive notification alerts via React Hot Toast.
⚙️ Centralized Environment Vault – Secure management of sensitive configurations (MONGODB_URI, CLERK_SECRET_KEY, Cloudinary, and Nodemailer) via .env integration.
⚡ Developer Workflow – Accelerated development loop using Vite on the frontend and hot-reloading tooling on the backend.

Prerequisites

Node.js (v16 or higher)
npm package manager
Basic knowledge of JavaScript & MongoDB

💳 Payment Gateway Testing (Stripe Test Cards)

This project integrates Stripe Checkout (Test Mode). Use the credentials below to test different payment workflows:

1. Successful Transaction (Default Card)

Card Number: 4242 4242 4242 4242
Expiry Date (MM / YY): Any future date (e.g., 12 / 28)
CVC: 123
Postal / ZIP Code: 54000 (or any 5-digit postal code)

2. Payment Edge Cases & Failure Testing

You can use the following dedicated card numbers to test error handling and status responses:

Test Scenario	Card Number	Expected Behavior
Generic Card Decline	`4000 0000 0000 0002`	Triggers a standard card decline error
Insufficient Funds	`4000 0000 0000 0010`	Triggers an insufficient funds alert
Expired Card	`4000 0000 0000 0069`	Triggers a card expiration validation error
Incorrect CVC	`4000 0000 0000 0127`	Triggers a CVC verification failure

📂 Project Directory Structure

Generated: 9/14/2026, 8:27:28 PM Root Path: workspace\Hotel_Booking_MERN_App

├── 📁 client
│   ├── 📁 public
│   │   └── 🖼️ favicon.svg
│   ├── 📁 src
│   │   ├── 📁 Routes
│   │   │   ├── 📁 OwnerRoutes
│   │   │   │   ├── 📄 AddRoom.jsx
│   │   │   │   ├── 📄 Dashboard.jsx
│   │   │   │   ├── 📄 Layout.jsx
│   │   │   │   └── 📄 ListRooms.jsx
│   │   │   ├── 📄 AllRooms.jsx
│   │   │   ├── 📄 Home.jsx
│   │   │   ├── 📄 MyBookings.jsx
│   │   │   └── 📄 RoomDetails.jsx
│   │   ├── 📁 assets
│   │   │   ├── 🖼️ logo.svg
│   │   │   └── 🖼️ starRatings.svg
│   │   ├── 📁 components
│   │   │   ├── 📁 OwnerComponents
│   │   │   │   ├── 📄 Navbar.jsx
│   │   │   │   └── 📄 Sidebar.jsx
│   │   │   ├── 📄 FeaturedDestination.jsx
│   │   │   ├── 📄 Footer.jsx
│   │   │   ├── 📄 Hero.jsx
│   │   │   ├── 📄 HotelCard.jsx
│   │   │   ├── 📄 HotelReg.jsx
│   │   │   ├── 📄 Loader.jsx
│   │   │   ├── 📄 Navbar.jsx
│   │   │   ├── 📄 Newsletter.jsx
│   │   │   ├── 📄 Offers.jsx
│   │   │   ├── 📄 RecommendedHotels.jsx
│   │   │   ├── 📄 Reviews.jsx
│   │   │   └── 📄 Title.jsx
│   │   ├── 📁 context
│   │   │   └── 📄 AppContext.jsx
│   │   ├── 📄 App.jsx
│   │   ├── 🎨 index.css
│   │   └── 📄 main.jsx
│   ├── 📝 README.md
│   ├── 📄 eslint.config.js
│   ├── 🌐 index.html
│   ├── ⚙️ package-lock.json
│   ├── ⚙️ package.json
│   ├── ⚙️ vercel.json
│   └── 📄 vite.config.js
├── 📁 server
│   ├── 📁 configs
│   │   ├── 📄 cloudinary.js
│   │   ├── 📄 db.js
│   │   └── 📄 nodemailer.js
│   ├── 📁 controllers
│   │   ├── 📄 bookingController.js
│   │   ├── 📄 clerkWebhooks.js
│   │   ├── 📄 stripeWebhooks.js
│   │   ├── 📄 hotelController.js
│   │   ├── 📄 roomController.js
│   │   └── 📄 userController.js
│   ├── 📁 middlewares
│   │   ├── 📄 authMiddleware.js
│   │   └── 📄 uploadMidddleware.js
│   ├── 📁 models
│   │   ├── 📄 UserModel.js
│   │   ├── 📄 bookingModel.js
│   │   ├── 📄 hotelModel.js
│   │   └── 📄 roomModel.js
│   ├── 📁 routes
│   │   ├── 📄 bookingRoute.js
│   │   ├── 📄 hotelRoutes.js
│   │   ├── 📄 roomRoute.js
│   │   └── 📄 userRouter.js
│   ├── ⚙️ package-lock.json
│   ├── ⚙️ package.json
│   ├── 📄 server.js
│   └── ⚙️ vercel.json
├── ⚙️ .gitignore
├── 📄 LICENSE
└── 📝 README.md

🌐 Deployment & Environment Setup

1. MongoDB Atlas Configuration

Before deploying, ensure your database access is open to Vercel:

Go to MongoDB Atlas.
Navigate to Network Access under Security.
Click Add IP Address and select Allow Access from Anywhere (0.0.0.0/0).
Save changes.

2. Environment Variables on Vercel

Set up your environment variables in Vercel before or after deployment:

In your Vercel Project Dashboard, go to Settings ➔ Environment Variables.
Add your environment key-value pairs (e.g., MONGO_URL, JWT_SECRET, PORT).
⚠️ Important Requirement:
- Ensure Production, Preview, and Development targets are ALL CHECKED.
- DO NOT toggle on the "Sensitive" option for MONGO_URL to prevent variable save/sync issues.

3. Deploy to Vercel

Push your latest code to GitHub.
Go to vercel.com and log in.
Click "New Project".
Connect your GitHub repository.
Select/Connect the exact project root folder containing package.json (to avoid nested directory deployment issues).
Configure Build Settings:
- Vercel automatically detects Vite/Node settings.
- Toggle the "Build Command" switch and manually type npm run build to override it (if using a build step).
Ensure all Environment Variables (MONGO_URL, etc.) are added under the project settings.
Click "Deploy".

💡 Note: If you edit or update any Environment Variable after deploying, always go to the Deployments tab, click the three dots (...) on the latest deployment, and select Redeploy to apply changes! & Make sure your project structure strictly follows the root layout:

Project_Folder/
├── client/
├── server/ vercel.json

📦 MERN Stack: Frontend Architecture Setup Guide

This documentation provides a step-by-step guide to setting up a production-ready Frontend Workspace for a MERN stack application using React + Vite. It covers project initialization, dependency configuration, and local setup—preparing the UI layer to seamlessly connect with an Express/Node.js backend.

1. Initialize Vite Project

Run the following command in your terminal:

npm init vite

During the prompt configuration, fill out the selections exactly like this:

Proceed? y

Project Name: name

Package Name: name

Select a framework: React

Select a variant: JavaScript

Select oxlintrc? Yes

Install with npm? Yes

💻 How to Run the frontend of the MERN Project Locally

If you want to pull this project and run it again locally, simply execute these commands:

# Navigate to the project folder
cd Project_dir

# create node_modules folder by running this command
npm i

# Start the local development server
npm run dev

2. Installing Core Dependencies for MERN Stack Backend

Run this command inside your project directory to install npm pakages in pakages.json file:

npm i @clerk/react
npm i react-router-dom
npm i @tailwindcss/vite
npm i react-hot-toast
npm i axios

It automatically Create package.json if not exists. Like

{
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@clerk/react": "^6.14.3",
    "@tailwindcss/vite": "^4.3.3",
    "axios": "^1.19.0",
    "react": "^19.2.8",
    "react-dom": "^19.2.8",
    "react-hot-toast": "^2.6.0",
    "react-router-dom": "^7.18.2",
    "tailwindcss": "^4.3.3"
  },
  "devDependencies": {
    "@eslint/js": "^10.0.1",
    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.4",
    "eslint": "^10.8.0",
    "eslint-plugin-react-hooks": "^7.1.1",
    "eslint-plugin-react-refresh": "^0.5.3",
    "globals": "^17.7.0",
    "vite": "^8.2.0"
  }
}

Note: Install packages when needed

Installing Tailwind CSS v4 (Vite)

npm install tailwindcss @tailwindcss/vite

Add plugin to vite.config.js:

import tailwindcss from "@tailwindcss/vite";

export default {
  plugins: [tailwindcss()],
};

Add to index.css:

@import "tailwindcss";

Setting Up React Router v7 (via `create-react-router`)

Installed using the official React Router CLI as per reactrouter.com:

npx create-react-router@latest
cd my-project
npm run dev

Or add to an existing Vite project:

npm install react-router-dom

Will add guide how to install and configure clerk

📦 MERN Stack: Backend Architecture Setup Guide

1. Installing Node.js & NPM

Download and install the LTS version from Node.js Official Site. Verify installation in your terminal:

node -v
npm -v

2. Installing MongoDB Community Server & Mongosh

Download MongoDB Community Server from MongoDB Download Center.
Download MongoDB Shell (mongosh) to run CLI database operations.
Start the local server daemon:

# Verify connection using mongosh CLI
mongosh

3. Setting Up `package.json` with ES Modules

Initialize your Node project inside any project directory:

npm init

During the prompt configuration, fill out the selections like this:

package name: (name)

version: (1.0.0)

description: may add entry point: (server.js)

test command: just enter

git repository: (https://github.com/username/repo_name.git)

keywords: may add

author: may add

license: (ISC) may be MIT for open source

type: (commonjs) recommended module

Is this OK? (yes)

💻 How to Run the backend of the MERN Project Locally

If you want to pull this project and run it again locally, simply execute these commands:

# Navigate to the project folder
cd Project_dir

# create node_modules folder by running this command  
npm i

# Start the local development server
npm start

To enable modern ES6 import/export syntax instead of require(), open package.json and add "type": "module":

{
  "name": "node",
  "version": "1.0.0",
  "bugs": {
    "url": "https://github.com/username/repo/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/username/repo.git"
  },
  "license": "ISC",
  "author": "",
  "type": "commonjs",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js" // add manually write "nodemon index.js" if installed
  }
}

4. Installing Core Dependencies for MERN Stack Backend

Run this command inside your project directory to install npm pakages in pakages.json file:

npm i express
npm i mongoose
npm i nodemon
npm i cors
npm i dotenv
npm i cloudinary
npm i svix
npm i multer
npm i @clerk/express
npm i stripe
bpm i nodemailer

It automatically Create package.json if not exists. Like

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "type": "module",
  "dependencies": {
    "@clerk/express": "^2.1.61",
    "cloudinary": "^2.10.1",
    "cors": "^2.8.6",
    "dotenv": "^17.4.2",
    "express": "^5.2.1",
    "mongoose": "^9.9.3",
    "multer": "^2.2.0",
    "nodemailer": "^10.0.9",
    "nodemon": "^3.1.14",
    "stripe": "^22.6.2",
    "svix": "^2.0.0"
  }
}

Note: Install packages when needed

📚 Modern Full-Stack Learning Resources

⚛️ Frontend Framework & Build Tools

React Documentation — (Official docs for hooks, state management, and modern component architecture)
Vite Guide — (Ultra-fast frontend build tool and local development server)
React Router Documentation — (Client-side routing, page navigation, and dynamic loaders)
Tailwind CSS Documentation — (Utility-first CSS framework for rapid UI and responsive styling)

🔑 Authentication & User Management

Clerk Documentation — (Complete user authentication, webhooks, and session management for React & Express)

🐍 Backend & REST APIs

FastAPI Documentation — (Modern, high-performance Python framework for building REST APIs)
PyJWT Documentation — (JSON Web Tokens for secure backend authentication and authorization)

📁 File Uploads & Cloud Storage

Multer Documentation — (Node.js middleware for handling multipart/form-data and file uploads)
Cloudinary Node.js SDK — (Cloud media management service for storing, optimizing, and transforming images)

🍃 Database & Package Management

MongoDB Manual — (NoSQL document database, aggregation pipelines, and CRUD operations)
PyMongo Documentation — (Official Python driver for MongoDB integration)
NPM Documentation — (Node package manager for installing frontend dependencies)

🌐 References & General Tutorials

W3Schools Tutorials — (Quick reference guides for JavaScript, Web APIs, and Node.js)
MDN Web Docs — (The gold standard documentation for HTML, CSS, JavaScript, and HTTP standards)

👤 Author

MehmoodCoder

🔗 GitHub: https://github.com/MehmoodCoder
🌐 Portfolio: My Portfolio Link

📄 License

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

🤝 Contributing

Contributions are welcome! If you'd like to improve the API, add new features, or optimize database queries, please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 Changelog

v1.0.0 (Initial Release)

✨ Full-Stack MERN Integration: Connected React 19 frontend with Express 5/Node.js backend and MongoDB Atlas using Mongoose ODM.
🔐 Clerk Authentication Engine: Integrated Clerk authentication across frontend and backend for user session handling and role-based access.
📅 Real-Time Reservation Logic: Implemented availability checking and dynamic multi-night cost calculation algorithms for room bookings.
📧 Automated Nodemailer Workflows: Integrated SMTP mailer to automatically dispatch detailed HTML reservation confirmation emails upon booking.
🖼️ Cloudinary Image Pipeline: Implemented multi-file upload middleware using Multer and Cloudinary for hotel room image management.
📊 Hotel Analytics Dashboard: Built owner dashboard tracking real-time metrics, total booking counts, and total revenue aggregation.
⚡ Axios API Integration: Configured structured API requests using Axios with bearer token authentication headers for all server communication.
🎨 Responsive Dark UI: Designed a modern, fully responsive dark-themed interface built with Tailwind CSS v4 and instant feedback alerts via React Hot Toast.
🛠️ Serverless Deployment Setup: Configured environment configurations and modular controllers optimized for Vercel serverless functions deployment.

Name		Name	Last commit message	Last commit date
client		client
server		server
.gitignore		.gitignore
CASE_STUDY.md		CASE_STUDY.md
LICENSE		LICENSE
PROJECT_BRIEF.md		PROJECT_BRIEF.md
README.md		README.md

Latest commit

History

Folders and files

Repository files navigation