Aron-Bookings

View Deployed Website

Table of Contents

• General Info
• Screenshot
• Features
• Technologies
• Getting Started

General Info

Mernstack hotel booking website created using the MERN stack and implementing Redux. This website contains multiple pages that showcase the hotel's amenties and offerings and allows users to browse multiple rooms and book them. All bookings are stored and managed in the backend and user's are only able to book rooms that are currently available based on their selected dates as well as number of guests.

Screenshot

1. Register Page

   • A seamless registration page collects basic user information like name, email, and password. When a user signs up, their password is encrypted for security purposes before being stored in the database. This ensures that sensitive information remains protected.

     

2. Login Page

   • When the user already have an account and clicks the sign in button, he/she will be directed to the login page where the user needs to enter the registered email id.

     

3. Home Page

   • The homepage is like a picture gallery of hotels. It shows images, names, ratings, and quick details about different places to stay. It's a visual snapshot to help you decide where you might want to book.

     

4. Profile Page

   • At the top right corner of the homepage, there's a little box you can click on. When you click it, a menu drops down. In that menu, there's an option called "Profile." If you select that, it takes you to a page where you can see and manage your personal information, like your name, email, and maybe other details you provided when you signed up.

     

   • This page shows your profile with all your details. It's like your personal info card, displaying things like your name, email, and any other information you shared when signing up.

     

5. Search bar

   • In the search bar, type where you want to go and pick the dates. Then, say how many adults, kids, and rooms you need. It helps find the right place for your stay based on those details.

     

6. Hotels page after filter

   • On the hotels page, you can use the search bar to type where you want to go. It then shows you all the hotels available in that destination.

     

   • On the hotels page, there's a way to set a price range using a minimum and maximum amount. When you do this, it filters and shows only the hotels that fit within that price range.

     

7. Particular Hotel page

   • When you click on a specific hotel, it gives you all the details you need: where it is, a description of the place, what facilities they have, and options to reserve or book a room right there. It's like a mini-guide for that hotel to help you decide if it's the right one for you.

     

8. Payment page

   • On the payment page, fill in your details. If there's a "pay at hotel" option, you might see that choice. Click "book now" after entering everything. A confirmation message will pop up, and that means your booking is complete!

     

     

9. Logout

   • The navbar has a dropdown on User's name from where user can click on logout button which directs the user back to the login page.

     

Also the website has a favicon icon to enhance its UI and increase its authenticity.

Features

• Fullstack MERN Hotel Website that utilizes CRUD functionality
• Users can browse rooms and create bookings on selected dates
• Users enter their details in a checkout form to create a booking and store their information
• Backend handles date collision's and notifies user's if a room is available or unavailable on the selected dates
• User can view and delete their bookings by entering the provivded confirmation code or email
• Room and booking data is stored within a MongoDB databse
• Website is fully responsive and looks great across multiple platforms

Technologies

The app was created with the following technologies

• MongoDB
• Express.JS
• ReactJS
• Redux
• NodeJS
• SASS

Getting Started

Prerequisites

Have NodeJS and MongoDB installed on your machine.

Required Environment Variables

VARIABLE	Sample value
JWT_SEC	sample_key
MONGO_URL	mongodb://localhost/

Installation

1. Clone the repo

   git clone https://github.com/gaurav147-star/booking-app.git

2. cd ./booking-app

3. Install node dependencies in all folders.

   npm install

4. Create a new .env file in server directory.
5. Setup the environment variables as described above.
6. Start the server

    nodemon ./index.js

7. Start the client

    npm start

8. The frontend is now running at http://localhost:3000/ and backend is now running at http://localhost:8080/