Travelo - Your Ultimate Travel Booking Platform

Travelo is your gateway to discovering and booking the best hotels and accommodations around the globe. Designed with simplicity and efficiency in mind, our platform makes it easier than ever to find your ideal place to stay, whether for leisure or business.

Quick Links

• Live Site
• Documentation

Built With

• React: UI library for building the user interface.
• TypeScript: Static type checking for catching errors early.
• React Query: Data-fetching and caching for improved performance.
• MUI: UI component library for building responsive, beautiful interfaces.
• Zustand: State management for handling complex application states.
• Storybook: Frontend workshop for building UI components and pages in isolation.
• Prettier: Code formatter ensuring consistent styling.

Features

• Token-based Authentication: Secure login with role-based access for users and admins.
• User Roles: Different roles for Users and Admins, providing specialized access and functionality.
• Admin Dashboard: Manage hotels, bookings, and user data efficiently.
• Search and Filtering: Advanced filtering options for users to find hotels based on specific criteria.
• Fully Responsive: The platform is optimized for all screen sizes, providing a smooth experience on mobile, tablet, and desktop.
• Loading Skeletons: Ensure better user experience with loading skeletons while fetching data.
• Optimized Performance: Client-side caching with React Query for fast and efficient data retrieval.
• Custom Hooks: Reusable custom hooks for logic separation and cleaner code.
• Form Handling: Integration with Formik and Yup for seamless and validated form submissions.
• Payment Integration: Secure and easy-to-use payment options for seamless booking.

Authentication

Travelo features a robust token-based authentication system with distinct user roles. Here are the credentials for testing the application:

• User:

  • Username: user
  • Password: user

• Admin:

  • Username: admin
  • Password: admin

How to Run Locally

Follow these steps to clone and run the Travelo project locally:

Clone the Repository

git clone https://github.com/Jamal-SaadEddin/Travelo.git

Navigate to the Project Directory

cd Travelo

Install Dependencies

npm install

Start the Development Server

npm run dev

Once the server starts, the application will be available at http://localhost:5173.

Testing Storybook

The Storybook design system for Travelo allows you to visualize and interact with individual UI components in isolation.

Running Storybook

npm run storybook

Storybook will be available at http://localhost:6006.

Authors

👨‍💻 Jamal SaadEddin

• GitHub
• LinkedIn

Acknowledgements

• This project is the final project of the Foothill Solutions internship program.

---

License

This project is licensed under the MIT License. Feel free to use it for your own projects!