Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahdi-q/booking-hotel-app-project
A web application for searching hotels and adding bookmarks, developed using the React.js library.
https://github.com/mahdi-q/booking-hotel-app-project
booking-hotel bookmarks hotel map react single-page-applications web-application
Last synced: 1 day ago
JSON representation
A web application for searching hotels and adding bookmarks, developed using the React.js library.
- Host: GitHub
- URL: https://github.com/mahdi-q/booking-hotel-app-project
- Owner: mahdi-q
- Created: 2024-08-01T06:16:00.000Z (4 months ago)
- Default Branch: master
- Last Pushed: 2024-08-14T18:10:48.000Z (3 months ago)
- Last Synced: 2024-08-14T19:47:25.523Z (3 months ago)
- Topics: booking-hotel, bookmarks, hotel, map, react, single-page-applications, web-application
- Language: JavaScript
- Homepage:
- Size: 108 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Booking Hotel App Project
A web application for searching hotels and adding bookmarks, developed using the React.js library.
## Table of Contents
- [Installation](#installation)
- [Features](#features)
- [Key Concepts](#key-concepts)
- [Packages](#packages)
- [Custom Hooks](#custom-hooks)
- [Contact Information](#contact-information)
## Installation
### Prerequisites
- Node.js and npm should be installed on your machine.
### Steps
1. Clone the repository:
```bash
git clone https://github.com/mahdi-q/Booking-Hotel-App-Project.git
```
2. Navigate to the project directory:
```bash
cd Booking-Hotel-App-Project
```
3. Install the dependencies:
```bash
npm install
```
4. Run the app:
```bash
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]](mailto:[email protected]).
---
Thank you for using the Booking Hotel App!