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.

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.

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.

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.

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.