TravelSphere is a travel and accommodation booking platform that allows users to search for and book hotels. Moreover, it allows admins to manage the different aspects of the platform.
This project is built as the final project of my front-end internship at Foothill Technology Solutions.
[!NOTE] Login credentials:
- Normal User: username:
user
, password:user
- Admin: username:
admin
, password:admin
This project leverages several design patterns to ensure modularity, reusability, and maintainability of the codebase. Below are some key patterns implemented:
The Provider Pattern is used extensively across the project to manage and pass down global state and contextual data. For example, in the HotelCard
component, HotelCardContext
is used to provide hotel data to its child components without prop drilling.
The Compound Components Pattern allows related components to be grouped together as part of a single parent component. This pattern is implemented in components like HotelCard
, where subcomponents such as DiscountChip
, InfoCard
, Heading
, Description
, Rating
, and PriceSegment
are attached directly to the HotelCard
component. This provides flexibility in composing UI elements. Here is an article that I find helpful in understanding the Compound Components Pattern: Compound components - React.
The Context API is utilized throughout the project to share data and functions across components without having to pass props manually. This is especially useful in managing state and actions related to authentication, user preferences, and theming.
Custom React hooks are created to encapsulate reusable logic across the application. For example, custom hooks are used for data fetching with React Query like useGetHotel
in src/pages/Hotel/hooks
, form validation with Formik like useAddHotelForm
in src\pages\HotelsManagement\hooks
, and handling user authentication.
Higher-Order Components (HOCs) are used to extend the functionality of existing components by wrapping them with additional logic. In this project, the routeHOC
is utilized to handle access control based on user roles and dynamically set the document title for different pages. This pattern allows for the injection of role-based access checks and other enhancements, ensuring that only authorized users can view specific pages while maintaining a clean and modular codebase.
This pattern is used to separate the logic and data fetching responsibilities (Container) from the UI rendering responsibilities (Presenter). This helps in keeping the components clean, focused, and easier to test.
git clone
npm install
npm run dev
The Landing Page of TravelSphere offers a visually engaging introduction with sections for featured deals, inspiring imagery, and motivational content, guiding users through the platform’s key features and benefits.
https://github.com/user-attachments/assets/3e6a5d80-0b61-4e44-b7e9-e528bcf49550
Simple and smooth user authentication with username and password.
https://github.com/user-attachments/assets/39d95b85-cd6b-4080-9fa1-f81972b6f0f1
No results handling:
Detailed information about the hotel, including images, amenities, ratings, reviews, location with map integration, and rooms available.
Checkout in a room that is not added to the cart (e.g., by changing the route)
Note: the chart is static just to fill the white space.
You can check the live version of the project here or [here] (https://travel-sphere.netlify.app/)
I would like to thank my trainers Mohammad and Lara at Foothill Technology Solutions for all their guidance and support throughout the internship.