Booking hotel with React.js

Project Description

This project is a hotel booking application. Within the application, users can:

• Log in and search for hotels in a specific location or find them on a map.
• Book a hotel by entering the reservation date and the number of people.
• Find and save favorite locations on the map.

Technologies Used

• HTML
• CSS
• JavaScript
• React
• Axios
• JSON Server
• React-Hot-Toast
• React-Leaflet
• React-Date-Range
• React-Country-Flag

Main Features

1. Login and Registration Page

   • Design login and registration forms with HTML and CSS.
   • Use JSON Server to manage user data.
   • Use Axios to send HTTP requests to the server.

2. Home Page and User Dashboard

   • Display available hotels using React.
   • Use Axios to fetch data from the server.
   • Display hotels as a list or on a map using React-Leaflet.

3. Hotel Search

   • Design a search form to enter information such as reservation dates and the number of people.
   • Use React-Date-Range for date selection.
   • Display search results to the user.

4. Hotel Booking

   • Design a booking form with HTML and CSS.
   • Use Axios to send booking data to the server.

5. Favorite Locations

   • Display user’s favorite locations on a map with React-Leaflet.
   • Allow saving and managing favorite locations.

Technology Implementation

• HTML and CSS: For designing the user interface and styling components.
• JavaScript: To add interactivity and logic to the application.
• React: To build a dynamic user interface and manage application state.
• Axios: For sending and receiving data to/from the server.
• JSON Server: To simulate a simple API and manage data.
• React-Hot-Toast: To display notifications to the user.
• React-Leaflet: To display maps and hotel/favorite locations.
• React-Date-Range: To select reservation dates.
• React-Country-Flag: To display country flags.

Implementation Steps

1. Set Up Development Environment:

   • Install and set up React using Create React App.
   • Install required libraries with npm or yarn.

2. Create Components:

   • Build components for login, registration, search, hotel display, map, etc.

3. Connect to Server:

   • Configure JSON Server and create JSON files for data.
   • Use Axios to send and receive HTTP requests.

4. Add Application Logic:

   • Manage state using useState and useEffect.
   • Implement search and filter functionality for hotels.
   • Manage bookings and save favorite locations.

5. Improve User Interface:

   • Add styles with CSS and use styling libraries.
   • Display notifications with React-Hot-Toast.

Final Notes

• Test and debug the application in the development environment.
• Optimize code and improve application performance.
• Document the project and write a user guide.

---

Preview 👈

Getting started

Step 1: Clone the repository

git clone https://github.com/Mohajer2002/Booking-Hotel.git

Step 2: Install Packages

npm i

Step 3: Run the Frontend

npm run dev

Step 4: Run the Backend Server

npm run server