Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hayaaburaed/travel-sphere

✈️ Travel and Accommodation Booking Platform
https://github.com/hayaaburaed/travel-sphere

axios formik jest mui-material react react-redux storybook tanstack-react-query typescript vite yup

Last synced: 9 days ago
JSON representation

✈️ Travel and Accommodation Booking Platform

Host: GitHub
URL: https://github.com/hayaaburaed/travel-sphere
Owner: HayaAbuRaed
Created: 2024-07-19T08:12:58.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-09-07T09:00:36.000Z (2 months ago)
Last Synced: 2024-11-07T07:04:56.109Z (9 days ago)
Topics: axios, formik, jest, mui-material, react, react-redux, storybook, tanstack-react-query, typescript, vite, yup
Language: TypeScript
Homepage: https://travel-sphere.vercel.app
Size: 49.3 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

![Screenshot 2024-08-12 235100](https://github.com/user-attachments/assets/0b8422cd-5a43-4db9-8add-5a67d9c11fd1)

# 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](https://dev.to/bqardi/compound-components-react-1ag8).

### 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

1. Clone the repository

```bash
git clone
```

2. Install the dependencies

```bash
npm install
```

3. Run the project

```bash
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.

[Hotel.webm](https://github.com/user-attachments/assets/ca760b17-06b9-4723-9bef-31569c0dcaa5)

#### 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