TravelSphere - Travel and Accommodation Booking Platform
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
⚙️ Technologies Used
Frontend
- React: A JavaScript library for building user interfaces.
- Redux Toolkit: State management for modern apps with Redux.
- React Query: Data fetching, caching, and synchronization for React.
- React Router: Routing library for React applications.
- Material-UI: A popular React UI framework for building responsive web applications.
Development Tools
- Vite: Next-generation frontend tooling for fast builds and development.
- TypeScript: Strongly typed programming language that builds on JavaScript.
- ESLint & Prettier: Linting and formatting tools to maintain code quality.
- Husky & Lint-staged: Git hooks for pre-commit checks.
Data Visualization
- ApexCharts: A modern charting library to create dynamic visualizations.
- React ApexCharts: Integration of ApexCharts in React.
Forms & Validation
- Formik: Form management in React with easy-to-use validation.
- Yup: Schema builder for value parsing and validation.
Maps
- Leaflet: An open-source JavaScript library for mobile-friendly interactive maps.
- React Leaflet: React components for Leaflet maps.
Animations
- Framer Motion: A production-ready motion library for React.
- React Spring: Spring-physics-based animation library for React.
Other Libraries
- Axios: Promise-based HTTP client for the browser and Node.js.
- Moment: Parse, validate, manipulate, and display dates and times.
- Lottie React: Render Lottie animations in React apps.
- React Multi Carousel: A flexible React carousel component.
- React Spinners: A collection of loading spinner components for React.
💻 Design patterns
This project leverages several design patterns to ensure modularity, reusability, and maintainability of the codebase. Below are some key patterns implemented:
1. Provider Pattern
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.
2. Compound Components Pattern
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.
3. Context API
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.
4. Custom Hooks
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.
5. Higher-Order Components (HOCs)
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.
6. Container-Presenter Pattern
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.
📥 Installation
- Clone the repository
git clone
- Install the dependencies
npm install
- Run the project
npm run dev
⭐ Pages & Features
Landing Page
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
Authentication
Simple and smooth user authentication with username and password.
Normal User Features
Home Page
- Robust search functionality for hotels by location, check-in, and check-out dates and number of guests.
- Featured deals section showcasing special offers with hotel details and ratings.
- Trending destination highlights with engaging visuals.
- User's recently visited hotels with essential information.
https://github.com/user-attachments/assets/39d95b85-cd6b-4080-9fa1-f81972b6f0f1
Search Results Page
- Dynamic search results based on user input with filters for sorting and refining search results.
- Hotel cards displaying essential information like name, location, rating, price, and discounts.
No results handling:
Hotel Details Page
Detailed information about the hotel, including images, amenities, ratings, reviews, location with map integration, and rooms available.
Cart Page
- The list of selected hotels with the option to remove or confirm the booking.
Checkout Page
- Selected room details and booking form for user information and payment.
- Confirmation of booking with a success message and booking details within a printable post-checkout table.
Checkout in a room that is not added to the cart (e.g., by changing the route)
Admin Features
Home Page
Note: the chart is static just to fill the white space.
System Entities Management
- Navigation sidebar with links to manage cities, hotels, and users.
- Entities management pages displaying a list of entities within a table with multiple filters and sorting by clicking on the column headers.
- Ability to add, edit (by clicking on the entity's row), and delete entities.
Cities Management
Hotels Management
Rooms Management
General Pages
Error 404 Page
Access Denied Page
Unauthenticated Page
🚀 Have a live look
You can check the live version of the project here or [here] (https://travel-sphere.netlify.app/)
🙏🏻 Acknowledgment
I would like to thank my trainers Mohammad and Lara at Foothill Technology Solutions for all their guidance and support throughout the internship.