MERN Stack : Hotel Booking App with React ,Node ,Mongo 2021

Create a new React application named client in the showroom project. Run npm start to launch frontend on localhost:3000 and edit src to add an h1 tag for hot reloading.

Create a Bootstrap navbar component in a React project, install Bootstrap, and structure components and screens while styling the navbar with Bootstrap classes for the hotel booking app.

Set up the backend by installing npm modules, creating an Express app and server.js, configuring a port, and running with nodemon for auto-restart during development.

Explore configuring a MongoDB database with Atlas and Compass, create a database and collection, and establish a mongoose connection with use unified topology for the application.

Create a Mongoose room model for the hotel booking app, defining name, max count, phone number, type, rent per day, facilities, images, current bookings, and description.

Import room data into a MongoDB rooms collection for the MERN stack hotel booking app, allowing the home page to display available rooms and lay groundwork for the admin panel.

Create an express router, import the room model, and implement a get all rooms endpoint to fetch all rooms from MongoDB, then test with postman.

Designs the homescreen by fetching all rooms from the backend, handling loading and error states, and rendering a reusable room component within a responsive bootstrap grid.

Implement a room modal popup on the home screen using react bootstrap, displaying the room name, description, and a carousel of images with show and close controls.

Design the front-end booking screen with a room image and room details on one side and booking details on the other, including loading and error handling and static user data.

Design and implement the booking room screen in a MERN stack app, showing availability and a book now flow with a backend route to fetch room details via parameters.

Design and implement loading, success, and error components for a hotel booking app, integrate react spinners, and manage UI states to show loading indicators, success messages, and error alerts.

Create register and login front-end screens in react with name, email, password, and confirm password, using hooks and bootstrap styling on routes /register and /login.

Create the booking model and backend flow using a Mongoose schema for room, room type, user, from date, to date, total amount, transaction id, and status, with Stripe checkout integration.

Build and finalize room booking endpoints in a MERN stack app by sending booking details from the front end and updating the room's current bookings with dates formatted using moment.

Filter rooms by current bookings to hide unavailable options when dates are selected, update the room list, and use moment.js to compare from and to dates.

Demonstrates payment gateway integration in a MERN hotel booking app using Schreibman gateway, processing payments in frontend and backend, and booking after payment.

Learn to integrate Stripe front-end checkout in a React app using the publishable key, generate a token on checkout, and send it with booking details to the backend.

Learn to build a Stripe backend for a hotel booking app by creating a Stripe customer, processing a payment with a unique transaction flow, and booking rooms on success.

Style the payment gateway in a MERN hotel booking app by showing a loading indicator, displaying success or error alerts with sweet alert, and navigating to bookings after payment.

Implement and refine a three-part room filtering system (data, search, and type filters) for the hotel booking app, enabling all, deluxe, or non-deluxe room filtering and live search.

Explore building the user bookings screen in a MERN stack hotel booking app, featuring a profile with tabs, rendering bookings by user, showing status and a cancel booking option.

Learn to implement cancel booking in a mern stack hotel app by updating booking status and room availability on both frontend and backend, ensuring canceled slots move to available.