TravelHub is an all-in-one travel booking platform developed with React and TypeScript, aimed at delivering a seamless and user-friendly experience for finding and booking accommodations. The application boasts an easy-to-navigate interface with powerful features that serve both travelers and administrators. Users can look for hotels, access detailed information, and make reservations, while the admin panel facilitates efficient management of cities, hotels, and rooms.
🌟 What is TravelHub?
📄 Table of Contents
🕰️ Project Management and Tracking
🖌️ Website Design
👾 Technologies Used
🎯 Features
👁️ Website Pages
🛠️ Installation
🏅 Acknowledgements
📩 Contact
For the development process of TravelHub, I utilized Linear.app, a project management tool designed to help track tasks, deadlines, and overall progress. Below is the workflow overview:
- Workspace Creation: I created a new workspace in Linear specifically for the TravelHub project.
- Timeline Setup: I established the start and expected finish times for the application development.
- Milestones Definition: Major milestones were defined along with deadlines for each. Breaking the project into manageable tasks simplifies tracking and management.
- Development Process: I initiated the development by implementing the first milestone, followed by subsequent ones.
- Task Management: Each new milestone was divided into multiple issues or 'todos,' which I implemented sequentially until the milestone was completed.
Below is a snapshot of the workspace showing the project details and major milestones.
Below are the key components and resources used in the design process:
-
Initial Flow: the initial flow of the website was outlined by FTS, which can be viewed here -> Excalidraw Flow
-
Icons: Bootstrap Icons were used throughout the website for a cohesive visual language. You can view the available icons here -> Bootstrap Icons
-
Typography: Google Fonts was used for the website's typography, incorporating the following fonts:
- Main Font: "League Spartan"
- Secondary Font: "Montserrat"
You can explore the font options here: Google Fonts
-
Color Reference: the following color palette was utilized in the design to create a harmonious visual identity:
| Color | Hex |
|---|---|
| Primary Color | |
| Secondary Color1 | |
| Secondary Color2 | |
| Secondary Color3 | |
| Secondary Color4 |
- Prototyping: Figma was utilized to create the initial design for TravelHub. You can explore the design by following this link -> Figma Prototype
This project utilizes a variety of modern technologies and libraries to create a robust and efficient web application. The following technologies are used in TravelHub:
Frontend Technologies
- React: A JavaScript library for building user interfaces.
- TypeScript: A superset of JavaScript that adds static types for better development experience and code quality.
- React Router DOM: A routing library for managing navigation and rendering different components based on the URL.
- Axios: A promise-based HTTP client for making API requests.
- Formik: A library for building forms in React with easy validation and state management.
- Yup: A schema builder for value parsing and validation.
- Date-fns: A library for date manipulation and formatting.
- Leaflet: A JavaScript library for interactive maps.
- React-Leaflet: A React wrapper for Leaflet to easily integrate maps into React applications.
Development Tools
- ESLint: A tool for identifying and fixing problems in JavaScript/TypeScript code.
- Prettier: A code formatter that enforces a consistent style.
- React Scripts: Scripts for running and building React applications.
Testing Libraries
- React Testing Library: A set of utilities for testing React components.
- Jest: A JavaScript/TypeScript testing framework for unit testing components and functions.
- Jest-DOM: Custom matchers for Jest to test the state of the DOM.
Other Dependencies
- JWT Decode: A library for decoding JSON Web Tokens.
- jsPDF: A library for generating PDF documents in JavaScript.
- React Error Boundary: A React component for handling errors in the component tree gracefully.
-
🎨 User-Friendly Interface
TravelHub offers a clean, intuitive interface that enhances the user experience for both travelers and administrators. The streamlined booking process ensures easy navigation and hassle-free reservations for users of all backgrounds. -
📱 Responsive Design
The platform is fully responsive, providing optimal performance across all screen sizes. Whether on desktops, tablets, or mobile devices, users can expect a consistent and enjoyable experience without compromising functionality or aesthetics. -
🤝 Accessibility
TravelHub is designed with inclusivity in mind, adhering to accessibility standards. The platform is optimized for screen readers, ensuring that users with special needs can navigate and utilize its features effectively. -
🔒 Secure System
Best-in-class security practices are implemented throughout TravelHub. Protected routing ensures that only authenticated users can access the platform. Regular users are directed to user-specific pages, while administrators have secure access to the admin portal, safeguarding sensitive information. -
❗ Graceful Error Handling
TravelHub enhances the user experience by providing clear and informative feedback during operations. Users receive success notifications for completed actions and error alerts when issues arise. The application also effectively handles HTTP errors, such as:- 401 (Unauthorized) -> Displays a dedicated page for this error.
- 404 (Page Not Found) -> Displays a dedicated page for this error.
- 500 (Server Error) -> Uses an error boundary to catch unexpected errors and displays a specific page with a "Try Again" option, allowing users to attempt their actions once more.
-
🏠 Dynamic Home Page
TravelHub offers a visually captivating homepage designed to engage users from the start. Key sections include:- Featured Deals: Showcases special hotel offers with star ratings and essential details for quick and easy comparison.
- Recently Visited Hotels: A personalized section displaying the last hotels a user visited, making it convenient to revisit or book again.
- Trending Destinations: A curated list of popular cities, presented with attractive visuals to spark interest and inspire travel plans.
-
🔍 Robust Search Functionality
TravelHub provides a powerful and user-friendly search experience with:- Central Search Bar: Allows users to easily find hotels, with an interactive calendar for selecting check-in and check-out dates.
- Guest and Room Controls: Users can specify the number of adults, children, and room preferences.
- Infinite Scroll: Displays search results on a dedicated page with seamless infinite scrolling, allowing users to browse hotels without page reloads.
- Comprehensive Filters: Advanced filtering options for refining search results by price range, star rating, amenities, and room types, ensuring users find exactly what they’re looking for.
-
🛠️ Detailed Hotel Pages
Each hotel has a dedicated page packed with all the information a user needs to make an informed booking decision, including:- High-Quality Image Galleries: Featuring fullscreen view options for an immersive visual experience.
- Comprehensive Information: Detailed descriptions, guest reviews, and an interactive map highlighting nearby attractions.
- Available Rooms: Users can view room descriptions, images, and prices, with an easy "Add to Cart" option for booking.
-
✅ Secure Checkout Process
TravelHub ensures a smooth and secure checkout experience by providing:- Cart Overview: A checkout page displaying all selected rooms with options to remove any, alongside a summary of total items and price.
- User-Friendly Forms: Simple forms for entering personal and payment details securely.
- Booking Confirmation: Upon completion, users are directed to a confirmation page that provides booking details, including confirmation number, hotel address, and total price, with the option to save the booking confirmation as a PDF.
-
📈 Comprehensive Admin Portal
- Intuitive Management Tools: TravelHub includes an admin portal designed for easy management of the website’s content and data.
- Detailed Grids: Provides a clear overview of all data, allowing admins to view, update, create, or delete entities with ease, ensuring the website remains up-to-date and well-maintained.
You can access a live demo of this application here -> https://travelhub-dohmeid.netlify.app/
-
Login page
-
Home page
-
Search Page
-
Hotel Page
-
Cart & Checkout Page
-
Booking Confirmation Page
Booking Confirmation Pdf
-
Admin Page - manage cities
-
Admin Page - manage hotels
-
Admin Page - manage rooms
Delete item
Add item
Update item
-
Unauthorized Error Page - 401 http error
-
Page Not Found Error Page - 404 http error
-
Unexpected Error Page
The used Node version in this app is -> Node.js v20.12.2. To run TravelHub locally, follow these steps:
- Clone the repository:
git clone https://github.com/dohmeid/travel-accommodation-booking-platform.git - Navigate to the project directory:
cd travel-accommodation-booking-platform - Install the required dependencies from package.json
npm install - Start the development server using:
npm start - Once the server is running, open your web browser and navigate to http://localhost:3000 to view the application.
Running tests - if you want to run the tests for TravelHub, follow these steps:
- Ensure dependencies are installed
- Run the test suite
npm test
Test Results
Now, you are ready to explore and contribute to the TravelHub project!
TravelHub was created as the capstone project for my Front-End Development internship at Foothill Technology Solutions.
This project incorporates all the skills and technologies I acquired during this experience.
I extend my gratitude to FTS for offering this incredible opportunity and providing guidance and support throughout the process.
If you have any questions or comments about TravelHub, please contact [Doha Hmeid] via doha.hmeid@gmail.com.
❤️ Happy Coding ❤️