Booking Hotel App Project

A web application for searching hotels and adding bookmarks, developed using the React.js library.

Table of Contents

• Installation
• Features
• Key Concepts
• Packages
• Custom Hooks
• Contact Information

Installation

Prerequisites

• Node.js and npm should be installed on your machine.

Steps

1. Clone the repository:

   git clone https://github.com/mahdi-q/Booking-Hotel-App-Project.git

2. Navigate to the project directory:

   cd Booking-Hotel-App-Project

3. Install the dependencies:

   npm install

4. Run the app:

   npm run dev

5. Click on the link provided in the terminal to open the app in your browser.

Features

• Searching hotels based on cities name and rooms count
• Watching locations of hotels and bookmarks on map
• Adding and Deleting locations from bookmarks list
• Watching the hotels of bookmarks country
• Login and Logout with fake authentication

Key Concepts

This project explores several important concepts from the React library and JS:

• Authentication Concepts: Core principles and practices for securing web apps, focusing on user authentication and session management.
• Advance State Managements: Techniques for managing state in complex React apps using tools like Redux and Context API.
• React-Router-Dom Routes: Managing navigation in React using routes to render different components based on the URL.
• Link and Navlink Component: Components in React Router for creating links, with NavLink offering active link styling.
• Programmatically Navigation: Redirecting users or changing routes dynamically within React applications.
• Fetch URL with Params and SearchParams: Handling and retrieving data from URLs that include parameters and search queries in React.

Packages

Packages used in this project:

• axios: HTTP client for making API requests.
• date-fns: Date utility library for manipulating and formatting dates.
• react-country-flag: Component for displaying country flags in React.
• react-date-range: Date range picker component for React.
• react-hot-toast: Easy and customizable toast notifications in React.
• react-icons: Library of React components for popular icon sets.
• react-leaflet: React wrapper for creating interactive maps with Leaflet.
• react-router-dom: Routing library for navigation in React applications.

Custom Hooks

Custom hooks created in this project:

• useFetch: A hook that retrieves data from a specified URL based on the provided query.
• useOutSideClick: A hook for closing a toggle or dropdown when a click is detected outside of it.
• useLocationUrl: A hook that extracts the latitude and longitude from a URL query.
• useGeoLocation: A hook that captures and returns the user's current location.

Contact Information

For any questions or feedback, please contact me at [email protected].

---

Thank you for using the Booking Hotel App!