Welcome to Vista Voyage, a cutting-edge web application designed for booking travel and accommodation effortlessly. Built with React TypeScript and leveraging the power of Vite for fast development cycles, Vista Voyage offers a seamless user experience for travelers worldwide.
- Features
- Technologies
- How to Access the Project
- How to Use the Project
- References
- Acknowledgment
- License
The website has a wide range of features aimed to enhance the booking experience.:
- Login Page: Secure login with separate access for users and administrators.
- Home Page: Includes robust search functionality, featured deals, recently visited hotels, and trending destination highlights.
- Search Results Page: Offers comprehensive search filters and hotel listings.
- Hotel Page: Features a visual gallery, detailed hotel information with a map showing the hotel's location, available rooms.
- Secure Checkout and Confirmation: For user information and payment, with options to print or save the confirmation as a PDF.
- Admin Page for Easy Management: With functional left navigation, admin search bar, detailed grids for cities, hotels, and rooms, create button, and entity update form.
Below are the frontend technologies utilized in this project:
-
Frontend:
- React
- TypeScript
- Vite - A lightning-fast build and development server for modern web applications.
-
UI Components:
- MUI - A comprehensive library of pre-built React components based on Material-UI.
-
Form Handling:
-
Server Calls:
- Axios - A popular promise-based HTTP client for making API requests.
-
Routing:
- React Router DOM - A collection of libraries for routing in React applications.
-
Date/Time Handling:
- dayjs - A minimalist JavaScript library that parses, validates, manipulates, and displays dates and times.
-
PDF Generation:
- jsPDF - A JavaScript library for generating PDF documents in the browser.
-
Printing:
- react-to-print - A React hook for handling printing in web applications.
-
Map Integration:
- Google Maps - Embed interactive maps and geospatial features in your web applications.
-
UI Enhancements:
- react-sticky-box - A React component that makes elements sticky as you scroll, perfect for sidebars and ads.
-
Testing:
- Vitest - A lightning-fast unit test framework powered by Vite.
- React Testing Library - A set of testing utilities specifically designed for React applications.
-
To view and explore the project, you can simply visit the following link:
https://vistavoyage.netlify.app/
This link will take you to the live version of the project, where you can browse through my work and experience interactive elements and responsive layouts.
-
To execute this project on your machine, take these simple steps:
-
Prerequisites:
Node.js and npm (or yarn) installed on your system.
-
Steps:
-
Clone the repository:
git clone git clone https://github.com/Mohammad-Mans/vista-voyage.git
-
Install npm packages:
Navigate to the project directory and install the required dependencies.
npm install
-
Run the project:
npm run dev
-
-
Upon opening the project, you will land on the login page. There are two login options available: user and admin.
-
Login as User:
- Enter the following credentials:
- Username: user
- Password: user
- Enter the following credentials:
-
Explore Home Page:
- Upon logging in, you will land on the home page.
- Explore featured deals, trending destination highlights, and recently visited hotels directly from the home page.
- Click on any featured deal or recently visited hotel to view detailed information.
- Click on trending destinations to search for hotels based on the selected location.
-
Search for Hotels:
- Use the search bar on the home page to enter criteria such as city name, check-in and check-out dates, number of rooms, and number of adults or children.
- Press the search button to navigate to the search page.
- Refine your search using filters available on the search page.
- Alternatively, click on a trending location from the home page to initiate a search based on that location.
-
View Hotel Details:
- Click on a hotel from the home page to view detailed information, including room availability and selection.
- Alternatively, click on the "View Hotel" button on the search results page to access hotel details.
-
Secure Checkout:
- After selecting a hotel and room, proceed to checkout by clicking the "Book" button.
- Enter necessary booking and payment information on the checkout page.
- Optionally provide special requests.
- Upon clicking checkout, a confirmation page will appear displaying booking details.
- From the confirmation page, you can choose to print or download the confirmation as a PDF.
-
Login as Admin:
- Enter following credentials:
- Username: admin
- Password: admin
- Enter following credentials:
-
Access Admin Page:
- Once logged in, Navigate through various sections such as cities, hotels, and rooms from the navigation menu.
- Use the search bar to search for cities, hotels, or rooms based on the section you are in.
-
Manage Entities:
- Sliding window will appear from the right when clicking create button to create a new entity or when clicking on a grid row to update a certain entity.
- Delete entity by clicking on the trash icon located at the end of each row.
- React Folder Structure Best Practices
- React Login, Registration, and Authentication
- React Material UI Tutorial
- Use Formik and Yup With MUI
- Getting Started with Google Maps API in React.js
- React to Pdf Printing
- An effective ‘Cancel’ dialog confirmation on Web
- Checkboxes vs. Switches
- Checkboxes vs. Radio Buttons
Special thanks to Foothill Technology Solutions for the opportunity to work on this project during my internship. The experience and knowledge gained have been invaluable.
This project is licensed under the MIT License. Feel free to use, modify, and distribute the code as long as you retain the original license notice.