Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mohit7067/bookozee

It's my major project where I used the MERN stack to build a hotel reservation web app, including backend integration and an admin panel. The app features functionalities such as nearby hotel search, hotel search by date, and booking specific rooms in a hotel, among others.
https://github.com/mohit7067/bookozee

css3 express-js firebase-storage html5 materialui mongo-db mongoose node-js react scss

Last synced: 7 days ago
JSON representation

Host: GitHub
URL: https://github.com/mohit7067/bookozee
Owner: mohit7067
Created: 2023-02-17T13:32:33.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-04-18T18:21:44.000Z (over 1 year ago)
Last Synced: 2024-09-13T17:51:09.379Z (20 days ago)
Topics: css3, express-js, firebase-storage, html5, materialui, mongo-db, mongoose, node-js, react, scss
Language: JavaScript
Homepage: https://bookozee.netlify.app
Size: 5.12 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

Hotel Reservation App with Admin Panel

demopic
demopic width=

A Hotel Reservation Web App

Want to see live preview of App »

Want to see live preview of Admin Panel »

Credentials for Admin Panel

Email: [email protected]

Password: badmin7067

✧
View Demo ✧
Report Bug ✧
Getting Started ✧ Installing ✧
Author ✧

The project is a hotel reservation web app that allows users to search for hotels in India using specific search criteria. The app can detect a user's current location and display nearby hotels. Additionally, users can search for hotels by specific dates or location in India. The app allows users to see details of a specific hotel, including price, images, location, and description.

To use the app, users need to enter the name of the city they want to search for, select check-in and check-out dates, and indicate the number of people and rooms needed. Once the search button is clicked, the app will redirect the user to a page displaying all the hotels available in the chosen location. By clicking on the "see availability" button, users can access details about a specific hotel, including its price, location, address, and images. If a user decides to book a hotel, they can click the "reserve now" button, which will open a modal with available rooms and room descriptions, including room numbers. After confirming the details, users can click the "book now" button, and their booking will be completed. If a user needs to cancel their booking, they can do so by going to the user bookings page and canceling from there.

The project includes an Admin Panel that can be accessed by logging in using the provided credentials (email: [email protected], password: badmin7067). The home page displays a graph showing the user count for the previous six months. The panel also allows users to view, create, and delete users, hotels, and rooms.

To create a hotel detail, users need to click on the "add new" button on the hotel page, which will redirect them to an "add hotel" page. On this page, users need to upload six images that will appear on the page instantly, fill in all necessary information related to the hotel, and select the hotel room they want to add. After clicking the "upload" button, the images will be uploaded to Firebase, and the progress bar will display the percentage of images uploaded. Once all images are uploaded, users can click the "create hotel" button to create a hotel detail in the database. All fields will be cleared for the next hotel creation.

To create a room detail, users need to go to the room page and click on the "add new room" button, which will redirect them to an "add room" page. Here, users need to fill in all details related to the room, including room numbers, and select the hotel to attach the room to. After filling in all necessary details, users can click the "create" button to create a room in the database.

## 🚀 Features

- Search for hotels by location or nearby location.
- Select check-in and check-out dates.
- Choose the number of rooms and people who will be staying.
- View the availability of hotels and rooms with all the necessary details, such as price, location, address, and images.
- Receive an error notification if they try to book a room without selecting check-in and check-out dates.
- View their bookings and delete them. If the booking is completed, it will show "booking closed."
- The app is responsive and can adjust to every screen size.

## Demo

## Getting Started

This project was built using Html5, Css3, Scss, React (18.2.0), Node js (18.14.2) , Express js (4.18.2), Mongo Db. It is a web application and for running on your local environment you should follow these guidelines.

### Prerequisites

- NPM

### Setup

The project repository can be found in [GitHub link](https://github.com/mohit7067/bookozee) or just clone the project using this command.

```
Using HTTPS

# git clone https://github.com/mohit7067/bookozee.git
```

+ Open terminal on your workspace with

```
cd /home/workspace/bookozee
```
+ then to access folders of frontend, admin and backend

for admin panel
```
cd /home/workspace/bookozee/bookozee_admin
```

for bookozee app
```
cd /home/workspace/bookozee/bookozee_frontend
```
for bookozee backend
```
cd /home/workspace/bookozee/bookozee_backend
```

## Install

Install NPM

Check that you have node and npm installed

To check if you have Node.js installed, run this command in your terminal:

```
node -v
```

To confirm that you have npm installed you can run this command in your terminal:

```
npm -v
```

To install all the dependences of the project, run the following command:

```
npm install
```
or

```
npm install --legacy-peer-deps
```

To run the application, run the following command:

```
npm start
```

### Tools used on this project

- Visual Studio Code

## Contact

If you want to contact me, you can reach me through below handles.

[![linkedin](https://img.shields.io/badge/Mohit_Patil-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mohit-profile/)
[![Github](https://img.shields.io/badge/Mohit_Patil-20232A?style=for-the-badge&logo=Github&logoColor=white)](https://github.com/mohit7067/)

## Show your support

Give a ⭐️ if you like this project!