Vigyata.AI
Is this your channel?

How To Make Full Stack Hotel Booking App Using MERN | Hotel Booking System Project In React

170.7K views· 2,643 likes· 649:24· May 15, 2025

🛍️ Products Mentioned (9)

Learn how to build and deploy a full stack Hotel Booking Website using MERN Stack, Hotel Booking app project for college | Full stack project with admin dashboard 👉 Clerk Auth: https://go.clerk.com/UvYL8uU 👉 Live Preview: https://hb-gs.vercel.app/ 👉 Source code: Please check the pinned comment 👉 Download the assets: https://greatstack.dev/assets/hotel-booking-react-app 👉 Figma Design: https://www.figma.com/design/vWAjka7MDKh3QWfvERF6Mx/QuickStay SUBSCRIBE: @GreatStackDev 👉Beginner's React JS: https://youtu.be/gbAdFfSdtQ4 👉 30 Days React.js Learning Plan: https://topmate.io/greatstack/1514677 Timestamp: 00:00 Project Overview 06:24 Project Creation 22:08 Create Navigation bar 42:51 Create Home Page 57:29 User Authentication using Clerk 02:15:07 Hotel List Page 02:50:36 Hotel Details Page 03:25:41 My Bookings Page 03:47:48 Create admin dashboard 05:00:16 Create Backend of project 05:13:10 Connect mongoDB database 05:31:27 setup Clerk authentication in Backend 06:00:41 Create API for users 06:15:08 Create API for Hotels 06:55:12 Create Booking API 07:27:07 Connect Frontend with Backend 09:42:28 sending booking confirmation email 09:59:27 Deploy project on Vercel 10:08:26 Add Stripe payment gateway ------------------- In this full stack project tutorial we are going to build a fully functional Hotel Booking website using MERN Stack. This is a Hotel booking system where users can book hotel rooms. Users can also add new hotel rooms on this website and manage the hotel bookings from the admin dashboard. In this MERN Stack project we will create the user Login & registration feature using Clerk. Clerk is a user authentication & user management platform. It also provides beautiful and ready to use UI components like Sign-In, Sign-up and profile component for react app. We will also add the email functionality in this project so that when user book any hotel they will instantly get the booking confirmation on their email. After booking user can pay the hotel fee online using Stripe payment gateway. After completing this hotel booking system project using mongoDB, Express, React and Node JS, we will deploy it online on Vercel. #fullstack #fullstackproject #fullstackwebdevelopment #greatstack #mernstack #mernstackproject #hotelbooking #collegeprojects #coding ------------------- Watch Full Stack Grocery Delivery App tutorial: 👉 https://youtu.be/PaQX0pktLnw Watch Full Stack Food Order Website tutorial: 👉 https://youtu.be/DBMPXJJfQEA Watch Full Stack Chat App tutorial: 👉 https://youtu.be/gbocZlm71nE Watch Full Stack Music Streaming Website 👉 https://youtu.be/KdGfhSpT6pc Watch Full Stack Blog Website Tutorial 👉 https://youtu.be/HdWCh_4XE1Q ------------------------------------- Build more React JS projects: Complete Portfolio Website In React: 👉 https://youtu.be/4ag1LsgIUc0 Build ChatGPT Clone In React: 👉 https://youtu.be/EzkWAviyYgg Build AI Image Generator with OpenAI In React 👉 https://youtu.be/PZG2MvOjud0 Create Weather App In React 👉 https://youtu.be/7JqdjWB88Kk ------------------------------------- Images Credit: https://www.pexels.com/ https://unsplash.com/ https://www.freepik.com/ ------------------------------------- Connect with me: 👉 https://linktr.ee/iamavinashkr Connect with GreatStack: Instagram: https://instagram.com/GreatStackDev Twitter: https://twitter.com/GreatStackDev Facebook: https://facebook.com/GreatStack

About This Video

Hi guys, in this tutorial I build a complete full stack Hotel Booking website using the MERN stack—MongoDB, Express, React, and Node.js—exactly like a real-world booking system. I start with the frontend setup using Vite + React, add Tailwind CSS, Google fonts, and React Router, and then I create the main UI flow: a sticky navbar with scroll effect, a proper homepage layout, search form, featured destinations, exclusive offers, testimonials, newsletter, and footer. After that, I build the hotel list page, hotel details page with availability check, and the “My Bookings” page where you can track payment status. Then I connect everything to the backend: MongoDB connection, Clerk authentication setup on both frontend and backend, and APIs for users, hotels/rooms, and bookings. I also add the important real product features—booking confirmation email (so the user instantly receives booking details) and Stripe payments (including test card flow) so the booking can move from unpaid to paid. Finally, I deploy the project on Vercel. If you’re a student, you can use this as a final year project, and if you’re job hunting, a deployed full stack project like this is a strong portfolio piece.

Frequently Asked Questions

🎬 More from GreatStack