/travel-booking-platform

Launch and immerse yourself in the experience πŸš€βœ¨ Note: To login as user: username: user, password: user, and to login as admin: username: admin and password: admin

Primary LanguageJavaScript

Travel Booking Platform 🌐✈️🏨

Welcome to the Travel Booking Platform! Dive into a user-friendly experience that streamlines the way you search and book accommodations. From cosy B&Bs to luxurious resorts, my platform connects you to your next stay with just a few clicks.

fts-final-project.mp4

πŸš€ Technologies

The platform harnesses the power of cutting-edge technologies to deliver a seamless and responsive user experience:

  • React: Crafting dynamic UIs with modern React, ensuring a fast, efficient, and scalable application. βš›οΈ
  • Vite: Supercharging our development with Vite's next-generation front-end tooling. ⚑
  • PropTypes: Utilizing Prop Types for component prop type checking, ensuring the props passed to components are valid. βœ”οΈ
  • Axios: Streamlining HTTP requests with Axios for robust and elegant asynchronous operations. 🌐
  • Day.js: Manipulating and displaying dates with the lightweight Day.js library. πŸ“…
  • JWT Decode: Safely decoding JWTs to extract user credentials and information. πŸ”
  • React Cookie: Managing browser cookies with ease, facilitating state management across sessions. πŸͺ
  • React Router Dom: Navigating the application with ease using the robust routing solutions of React Router. πŸ›£οΈ
  • Formik: Streamlining form creation and handling, making complex forms simple. πŸ“‹
  • Yup: Leveraging Yup for effective schema validation, keeping data integrity in check. βœ…
  • Material UI: Styling the platform with a suite of pre-designed components from Material-UI for a polished look and feel. 🎨
  • React Date Range: Implementing intuitive date selection with a customizable date range picker. πŸ“†
  • React Slick: Showcasing images and content with a responsive carousel that adds a dynamic edge to our UI. πŸ–ΌοΈ
  • React Leaflet: Integrating interactive maps with React Leaflet, enhancing location-based features. πŸ—ΊοΈ
  • React To Print: Providing users with the convenience of printing documents directly from the platform. πŸ–¨οΈ
  • Testing Frameworks: Ensuring code quality and functionality with comprehensive testing suites using:
    • Jest: A delightful JavaScript Testing Framework with a focus on simplicity. βœ…
    • React Testing Library: Building strong tests for React components without relying on their implementation details. πŸ§ͺ

πŸ“š Notion Documentation Link

Dive into the details of my project with the Complete Project Documentation on Notion.

🌟 Features

1. Login Page

image

  • Authenticate securely with username and password entry fields. πŸ”

  • User Login:

    • Username: user
    • Password: user
  • Admin Login:

    • Username: admin
    • Password: admin

2. Home Page

image

2.1 Robust Search Functionality

  • Central search bar with the placeholder: "Search for hotels, cities..."
  • Interactive calendar for selecting check-in and check-out dates.
  • Controls for specifying the number of adults, children and rooms.

2.2 Featured Deals Section

  • Special offers are highlighted in the "Featured Deals" section.

2.3 User's Recently Visited Hotels

  • Personalized display of the last visited hotels with detailed information.

2.4 Trending Destination Highlights

  • A curated list of popular cities with visually appealing thumbnails.

3. Search Results Page

image

3.1 Comprehensive Search Filters

  • Sidebar with filters for price range, star rating, and amenities.

3.2 Hotel Listings

  • Listings of hotels matching search criteria.

4. Hotel Page

image

4.1 Visual Gallery

  • Fullscreen viewable high-quality images of the hotel.

4.2 Detailed Hotel Information

  • Hotel name, star rating, description, reviews, and map location.

4.3 Room Availability and Selection

  • List of room types with images, descriptions, prices, and add-to-cart options.

5 Checkout Page

image

5.1 User Information and Payment

  • Form for personal details and payment method.

5.2 User Cart Items

  • List of booked rooms with their details (room number, price, capacity and amenities).

6. Confirmation Page

image

  • Booking details with confirmation number and printable options.

6. Admin Page for Easy Management

image

6.1 Functional Left Navigation

  • Navigator with links to Cities, Hotels, and Rooms.

6.2 Admin Search Bar

  • Filters for the grids.

6.3 Detailed Grids

  • Detailed information and management options for Cities, Hotels, and Rooms.

6.4 Create Button

  • Form for creating new entities like Cities, Hotels, or Rooms.

6.5 Entity Update Form

  • Forms for updating information on entities within the platform.

6. Page Not Found

image

  • This page is displayed whenever a user navigates to a URL that does not correspond to any active route within the application.

πŸ’Ύ Installation

To get this project up and running on your machine, follow these simple steps:

  1. Clone the repository:
 git clone https://github.com/Rahaf-Mansour/travel-booking-platform.git
  1. Install npm packages: Navigate to the project directory and install the required dependencies.
 npm install

If you encounter any issues, try forcing the npm installation:

npm install --force
  1. Run the project: Start the development server and begin exploring.
  npm run dev

Enjoy your journey through the Travel Booking Platform! πŸš€

🀝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have suggestions for improvements, please feel free to:

  1. Open an issue with the tag "enhancement".
  2. Give the project a star! ⭐

How to Contribute

  1. Fork the Project: Create your own copy of the project to start working on your changes.

  2. Create your Feature Branch:

 git checkout -b feature/AmazingFeature
  1. Commit your Changes:
git commit -m 'Add some AmazingFeature'
  1. Push to the Branch:
git push origin feature/AmazingFeature
  1. Open a Pull Request:
    • Once you've pushed your feature branch to your fork, open a pull request in the original repository so that your changes can be reviewed and eventually merged.

Looking forward to seeing your contributions!

πŸ“¬ Contact

If you have any questions or want to reach out, feel free to connect with me:

πŸ’– Acknowledgement

I extend my sincere gratitude to Foothill Technology Solutions for granting me the opportunity to participate in this internship cycle. Their unwavering support has been instrumental throughout the development of this project.

fts-logo