Skip to content

Latest commit

 

History

History
117 lines (91 loc) · 3.67 KB

README.md

File metadata and controls

117 lines (91 loc) · 3.67 KB
Raw

Booking.com Clone

Overview

This project is a clone of Booking.com, built using React.js. It provides a comprehensive platform for users to browse and book cabins, authenticate their accounts, manage bookings, and access a user dashboard. The application uses modern React concepts and tools to ensure a robust and scalable architecture.

Features

  • Cabin Listings: Browse and search for available cabins.
  • Authentication: User registration, login, and logout functionalities.
  • Bookings: Make, view, and manage bookings.
  • Settings: User settings to update personal information.
  • Dashboard: Access to user-specific information and actions.
  • Check-in/Check-out: Manage the check-in and check-out process for bookings.

Technologies and Concepts

  • React Query: For data fetching, caching, synchronization, and more.
  • Axios: For making HTTP requests to the backend API.
  • Custom Hooks: To encapsulate and reuse logic across the application.
  • Styled Components: For styling React components with a CSS-in-JS approach.
  • React Router DOM: For handling routing within the application.

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/booking-clone.git
cd booking-clone

  2. Install the dependencies:

    npm install

  3. Start the development server:

    npm start

Project Structure

booking-clone/
├── public/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── pages/
│   ├── services/
│   ├── styles/
│   ├── ui/
│   ├── features/
│   ├── App.js
│   ├── index.js
│   └── routes.js
├── package.json
└── README.md

Key Components

Auth

  • Login.js: Handles user login.
  • Register.js: Handles user registration.
  • AuthProvider.js: Provides authentication context and logic.

Bookings

  • BookingList.js: Displays a list of user bookings.
  • BookingDetail.js: Displays details of a specific booking.

Cabins

  • CabinList.js: Displays a list of available cabins.
  • CabinDetail.js: Displays details of a specific cabin.

Dashboard

  • Dashboard.js: Main dashboard view for users.

Settings

  • UserSettings.js: Allows users to update their personal information.

CheckinCheckout

  • Checkin.js: Handles the check-in process.
  • Checkout.js: Handles the check-out process.

Custom Hooks

  • useAuth.js: Manages authentication logic.
  • useFetch.js: Fetches data using React Query.
  • useBooking.js: Manages booking-related logic.

Styled Components

  • GlobalStyle.js: Defines global CSS styles.
  • ThemeProvider.js: Provides theming support.

Routing

  • routes.js: Defines the routes and navigation for the application.

API Service

  • api.js: Contains functions to make HTTP requests using Axios.

Getting Started

  1. Authentication: Register and login to access the application's features.
  2. Browse Cabins: Search and view details of available cabins.
  3. Make a Booking: Book a cabin for desired dates.
  4. Manage Bookings: View and manage your bookings through the dashboard.
  5. Settings: Update your personal information in the settings section.
  6. Check-in/Check-out: Complete the check-in and check-out process for your bookings.

Contributing

Currently this project is in development reach out to me if you can contribute and add new fresh ideas to the project.

Acknowledgements

  • Inspired by Booking.com
  • Built with React, React Query, Axios, Styled Components, and React Router DOM.

Feel free to reach out with any questions or feedback. Happy coding!