Hotel Booking System is a full-stack web application designed to streamline the process of reserving hotel rooms. This project serves as the front office for a reservation management system, providing users with an intuitive and user-friendly interface to search, filter, and book available rooms.
The front-end is built using Next.js, leveraging the power of Server-Side Rendering (SSR), Client-Side Rendering (CSR), and API routes for seamless navigation and interactivity. Key third-party libraries such as Auth.js are used for secure authentication, supporting both credential-based logins and OAuth providers like Google and Facebook.
The system includes:
- A dynamic homepage showcasing available offers, complete with a map using React Leaflet to display the hotel's location.
- A booking form allowing users to select a date range, with results filtered to show rooms available for the specified period.
- Sorting options based on the number of guests and price.
- Detailed room pages, featuring a friendly booking form and calendar with disabled dates for already reserved periods.
- An interactive checkout process that requires users to authenticate before completing their reservation.
- Profile management for users to update their information, view reservation history, cancel unconfirmed reservations, and delete past ones.
To ensure a smooth user experience, the project integrates bcrypt for password hashing, Zod for form validation, DayPicker for calendar reservations, and date-fns for date manipulation. The front-end styling is fully customized using pure CSS. Additionally, memoization mechanisms have been implemented to optimize rendering performance and avoid unnecessary re-renders.
This project is currently in progress, with the back office under development to handle reservation confirmations and other administrative functions.
