atechseva-logo

Hotel Booking App using MERN

Hotel Booking App using MERN

Table of Contents

Why Use MERN to Develop Hotel Booking APP ?

React is an open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser

Express.js, or simply Express, is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.

MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js frontend framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any frontend JavaScript framework can work.

MongoDB is a flexible, general-purpose document database that is ideally suited for modern applications.. Node.js is a JavaScript runtime that commonly powers web servers. Developers can use these two pieces of technology, along with MongoDB Atlas, a fully managed, multi-cloud database service, to rapidly create modern applications.

MongoDB and Node.js have a long history of working well together and are paired in many popular tech stacks, including the MEAN stack (MongoDB, Express.js, AngularJS, and Node.js) and and, more recently, the MERN stack (MongoDB, Express.js, React.js, and Node.js).

The MongoDB Node.js driver makes working with MongoDB from inside a Node.js script simple and intuitive for developers—saving time and increasing productivity.

Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform. 

In this project, you will learn the following topics

  • Working with Complex topics in React Node.
  • React - Node API Connections
  • Advanced MONGO DB Queries
  • React State Management
  • Searching
  • Light Mode/Dark Mode
  • JWT
  • bcryptjs
  • multer used for uploading files
  • React Data Table Component with Pagination , Search & Action.
  • Lazyload Image
  • sass
  • animations
  • Material UI Components
  • Custom Form Validations 
  • Working with YUP and FORMIK Validation
  • Image Uploads to Cloudinary in React with Drag & Drop
  • Booking Rooms,
  • Add Hotes in different city & place
  • SEO Friendly Secure URL can be made byselfs
  • Adding Rooms data to Database,
  • Edit , Delete Hotels after adding,
  • PayPal Payment Gateway Integration,
  • User Account,
  • Admin dashboard,
  • Manage Users, Rooms,  Hotels, Bookings, Enquiries, City, Amenities from the Admin panel
  • Working with React Context API, Local Storage &Cookies.
  • Date Range Filter
  • Enquiry Form
  • Advanced CRUD Operation using MERN
  • MERN Moderate Concepts

APP REQUIREMENTS to RUN

  • Install Node.js installer for windows. Click on this link.
  • Open command prompt  to check whether it is completely installed or not type the command –> 
node –v
  • Install Postman to test API’s. Click on this link.

This project is suitable for:

  • React Developers
  • Javascript Developers
  • MERN Developers

INSTALLATION STEPS

  • Download zip file and Unzip it.
  • You get 3 folders (admin, api, client)

allfolder.png

  • Switch to client, admin & api folder and run the following command
npm install –legacy-peer-deps
  • Now change the .env variables in all the folders that includes
REACT_APP_DEFAULT_USER_IMAGE="https://res.cloudinary.com/dpjpz26qm/image/upload/v1668238076/hotel-booking/default/user_oxl61p.png"

REACT_APP_DEFAULT_LOGO="https://res.cloudinary.com/dpjpz26qm/image/upload/v1669407804/hotel-booking/default/logo_wrm4se.png"

MONGO = Your MONGODB URI

CLIENT_ID_PAYPAL= YOUR PAYPAL ID

REACT_APP_SUCCESS_IMG=https://res.cloudinary.com/dpjpz26qm/image/upload/v1669014556/hotel-booking/default/success_zh2kn5.gif

REACT_APP_HOTEL_NAME=OYES
  • Switch to client to run User Interface
npm start
  • Switch to api  folder to run Server & Admin Interface Concurrently
npm start

FRONTEND DEMO (PART-1)

BACKEND DEMO (PART-2)

If You Want Any Modification Please contact me !

ENJOY APP !