Building a Full-Stack Hotel Booking App: A Developer’s Journey

Creating a hotel booking application was a fulfilling project that allowed me to blend UI/UX design with functional backend integration. Using React.js for the front end and a scalable routing system, I developed an interactive platform for users to explore properties, check availability, and make reservations. Here’s a breakdown of the app and the thought process behind its development.

Features Overview

The app consists of three main pages, each offering unique functionality:

1. Home Page: Showcases featured properties and popular destinations.
2. Hotel Listings: Displays a searchable list of hotels based on user preferences.
3. Hotel Details: Provides an in-depth view of a selected hotel, including images, descriptions, and booking options.

Home Page Highlights

The Home Page serves as the app’s gateway, designed to attract users with visually appealing content and easy navigation. Here’s a breakdown of the key components:

Navbar and Header

The Navbar and Header create a seamless user experience by providing access to the main pages.

<div>
  <Navbar />
  <Header />
  <div className="homeContainer">
    <Featured />
    <h1 className="homeTitle">Browse by property type</h1>
    <PropertyList />
    <h1 className="homeTitle">Homes guests love</h1>
    <FeaturedProperties />
    <MailList />
    <Footer />
  </div>
</div>

• Components:
  • Featured displays high-demand destinations.
  • PropertyList categorizes listings (e.g., apartments, hotels, villas).
  • FeaturedProperties highlights top-rated properties based on guest reviews.

Hotel Listings Page

This page allows users to search for accommodations based on their preferences. The search functionality is dynamic and includes filters for dates, price range, and room options.

Search Panel

The search panel collects user inputs and updates the displayed results in real time.

<div className="listSearch">
  <h1 className="lsTitle">Search</h1>
  <div className="lsItem">
    <label>Destination</label>
    <input placeholder={destination} type="text" />
  </div>
  <div className="lsItem">
    <label>Check-in Date</label>
    <span onClick={() => setOpenDate(!openDate)}>{`${format(date[0].startDate, "MM/dd/yyyy")} to ${format(date[0].endDate, "MM/dd/yyyy")}`}</span>
    {openDate && (
      <DateRange
        onChange={(item) => setDate([item.selection])}
        minDate={new Date()}
        ranges={date}
      />
    )}
  </div>
</div>

• Dynamic Input Handling: React’s state management ensures seamless updates as users interact with the form.

Results Display

Each hotel is displayed using the SearchItem component, which includes key details like price, location, and amenities.

Hotel Details Page

The Hotel Details page offers a closer look at individual properties, featuring:

1. Image Carousel: A slider allows users to view multiple images of the hotel.

<div className="slider">
  <FontAwesomeIcon
    icon={faCircleXmark}
    className="close"
    onClick={() => setOpen(false)}
  />
  <FontAwesomeIcon
    icon={faCircleArrowLeft}
    className="arrow"
    onClick={() => handleMove("l")}
  />
  <div className="sliderWrapper">
    <img src={photos[slideNumber].src} alt="" className="sliderImg" />
  </div>
  <FontAwesomeIcon
    icon={faCircleArrowRight}
    className="arrow"
    onClick={() => handleMove("r")}
  />
</div>

• User Interaction: Users can navigate the carousel using left and right arrows.

2. Booking Section: Highlights pricing and includes a “Book Now” button for easy reservations.

<div className="hotelDetailsPrice">
  <h1>Perfect for a 9-night stay!</h1>
  <span>Located in the real heart of Krakow, this property has an excellent location score of 9.8!</span>
  <h2><b>$945</b> (9 nights)</h2>
  <button>Reserve or Book Now!</button>
</div>

Routing System

The app’s routing is managed with React Router, enabling navigation between pages:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/hotels" element={<List />} />
    <Route path="/hotels/:id" element={<Hotel />} />
  </Routes>
</BrowserRouter>

• Dynamic Routing: The :id parameter allows the app to load specific hotel details dynamically.

Key Takeaways

1. Component Reusability: Breaking down the UI into reusable components like Navbar, Header, and MailList streamlined development and ensured consistency.
2. Responsive Design: CSS ensured the app looked great on all devices, enhancing user experience.
3. State Management: React’s useState hook enabled dynamic user interactions, such as search filtering and carousel navigation.

Future Improvements

1. Backend Integration: Connect to a database and API to store and fetch real-time data.
2. User Authentication: Implement secure login functionality for personalized experiences.
3. Enhanced Filtering: Add more filters, such as ratings and amenities, to improve search results.

This hotel booking app project allowed me to practice building a user-friendly interface and solidify my understanding of React’s core concepts. It’s a testament to how modular design and thoughtful user experience can create an engaging application.