Hotel Booking SPA Project 😎 ( React/TailwindCSS )

App Live

Description 📝

The Hotel Booking Single Page Application (SPA) is A hotel Reservation Site that Allows you to Find the Desired Hotel Based on your needs and Conditions from the Main List of Hotels or the Filtered List or add the Desired Hotel from the Map to the Bookmark List;

Also, Each User can have his Own List of Bookmarks and Hotels and Manage his Own List of Bookmarks. (Delete, Edit or Add a Bookmark.)

Every User can Register through the Sign up Form and Perform the Authentication Process through the Login Form.

In This Project, For the Create of Different Routes (Pages), React Router DOM is used, Which Naturally Creates a Much Better User Experience, on the Other Hand To Provide a Beautiful User Interface, a Local Database is Used to Manage and Organize the Information of Hotels, Bookmarks and Users.

This is an Application Developed with the React.js Library and using the TailwindCSS Framework, On the other hand, This Project is Set up with Vite.

Which is Responsive in the Screen Sizes of Different Devices.

Also Speed of Work by the Tailwind Framework is very high and it results in an Optimal Output.

I am currently working on optimizing the app codes 🤓

Getting Started 🚀

To get started with this project, follow these steps:

1. Clone this repository to your local machine:

git clone https://github.com/FarzinKhosravi/Hotel-Booking-SPA-React-TailwindCSS.git

2. Open the project folder in your code editor.

3. Explore the src folder and check App.jsx file to understand the project structure and styling.

4. In this step, Install the Project Dependencies :

npm install

5. Don't Forget to Start the JSON Server to Create the Local Database, Use the Following Command to Do So :

npm run server

6. Note that in order to apply Development Server, be sure to enter the following command in the terminal editor:

 npm run dev

Usage 📋

• Customize the project to match your specific requirements.
• Add your own content and styles.
• Test the responsiveness on various devices and browsers.

Features ✅

• Dark Mode Feature. (Including All 3 Options Light, Dark and System)
• Hotel Reservation through Main List,Filtered List and Hotel Details Section,as well as Desired Hotel Filter by Entering Information such as Name of Destination,Length of Stay and Determining the Number of People (Adults and Children) and Rooms.
• Creating a Multi-Step Form (Without Using any Package or Component)
• Creating a Hamburger Menu for Responsive Mobile Design. (Display Active Links with Attractive Styles)
• Creating a Map Using the React Leaflet Package.
• Ability to View all Filtered Hotels and Desired Hotel on Map.
• Ability to Create Bookmarks and View all Bookmarks (and Desired Bookmarks) by Map.
• Management of bookmarks (You can Delete or Edit the Desired Bookmark.)
• Display total Number of Bookmarks and Hotels Reserved by User.
• Display Last Bookmark and Hotel Visited by User on List of Bookmarks and Hotels.
• Ability to Display User's Location by Map.
• Creating a Contact Us Page and Form.
• Ability to Register and Authenticate by User through Registration and Login Forms.
• Ability to Log out of User system through User Panel.
• Each User can have a List of Reserved Hotels and Bookmarks.
• Bringing JSON Server Local Database Online by Deploying it on Rendering Site.
• Creating Protected Route in Project.
• Creating a Calendar using Date Range Package.
• Management of forms (State Management, Validation and Submission) by Formik and Yup Libraries.
• Managing Errors on Server Side and Displaying them on Client Side.
• Feature Show/Hide Password (Toggle Button).
• Ability to Redirect User to Desired Page after Authentication.
• Ability to Validate Form in Initial Load.
• Ability to Adjust Information Already in Form.
• Ability to Check and Identify Duplicate Data in Form (Registration Forms and Adding Bookmarks from Map).
• Map Guide Feature to Better Show User's Route.
• Creating an Accordion Menu to Display Details of Hotels and Bookmarks.
• Creation of Common Styles by TailwindCSS Library.
• Creating a Not Found Page and the Ability to Return to Any of the Main Pages of the App.
• Fully Responsive on All Devices with any Screen Size.
• Change the Application Font.

Packages 📦

• React Leaflet (React Components for Leaflet Maps)
• React Country Flag (React Component for emoji/svg Country Flags)
• React Date Range (React Component for Choosing Dates and Date Ranges)
• Date fns (Toolset for Manipulating JavaScript Dates in a Browser)
• RRD (React Router DOM)
• Redux-Toolkit Library (to Manage and Centralize Application State)
• Formik and Yup (State Management,Validation and Submission)
• JSON Server (To Build a Local Database)
• Axios (For All Server Side Requests)
• React-Hot-Toast (To Display Server Side Errors and Loader)
• HeroIcons/React
• React-Icons
• Prettier Plugin TailwindCSS (To Automatically Sort Tailwind Classes)
• TailwindCSS/Forms (A Plugin that Provides a Basic Reset for Form Styles that Makes Form Elements Easy to Override with Utilities)

Tips 📌

• Fully Responsive for Mobile, Tablet, Laptop and Desktop.
• Using the React Router DOM Hooks, Nested and Dynamic Routes and Also Using Routes File for Optimal Management of Built Routes.
• Create a Root Layout Component for Optimal Organization for Fixed Sections of the App.
• Combination of Hooks Context and useReducer is used to Management States.
• Using the Components of Previous Projects and Matching Them with the Conditions of the Current Project.
• Creating Global Dynamic Components.
• Implementation of Click Area Principles on App Links and Buttons.
• Using the Concepts and Principles of AJAX and API Request.
• Using the Concepts and Principles of Clean Code.
• Using the Concepts Component Lifecycle.
• Using the Concepts and Principles React Hooks and Custom Hooks.
• Using the Concepts Local Storage. (To Store and Retrieve Data from the Browser Storage)
• Created API Request Functions and Base URL.

Web Development Technologies 🪄

• HTML5 (Semantic HTML)
• Flexbox and Grid Layout Systems
• TailwindCSS
• React.js
• Redux-Toolkit
• RRD (React Router DOM)
• JSON Server
• Vite
• NPM

Contact Me 📧