Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/othmanenissoukin/nextjs-hotel-booking
Hotel Booking System is a full-stack app for reserving hotel rooms, featuring authentication, date filtering, room sorting, and user-friendly booking with dynamic availability.
https://github.com/othmanenissoukin/nextjs-hotel-booking
authjs compound-components date-fns hotel-booking memoization nextjs oauth react-datepicker react-hot-toast react-leaflet serveractions serverside-rendering supabase zod-validation
Last synced: 5 days ago
JSON representation
Hotel Booking System is a full-stack app for reserving hotel rooms, featuring authentication, date filtering, room sorting, and user-friendly booking with dynamic availability.
- Host: GitHub
- URL: https://github.com/othmanenissoukin/nextjs-hotel-booking
- Owner: OthmaneNissoukin
- License: mit
- Created: 2024-08-25T00:03:43.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-09-16T21:29:26.000Z (19 days ago)
- Last Synced: 2024-09-30T15:04:04.357Z (5 days ago)
- Topics: authjs, compound-components, date-fns, hotel-booking, memoization, nextjs, oauth, react-datepicker, react-hot-toast, react-leaflet, serveractions, serverside-rendering, supabase, zod-validation
- Language: JavaScript
- Homepage: https://nextjs-hotel-booking-five.vercel.app
- Size: 17.1 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hotel Booking System
## Overview
Hotel Booking System is a full-stack web application designed to streamline the process of reserving hotel rooms. This project represents the **front office** of a hotel reservation management system, offering users an intuitive and user-friendly interface to search, filter, and book available rooms.
This app is built using **Next.js** for the front-end and **Supabase** for the database. It integrates several key libraries such as **bcrypt** for password security, **Auth.js** for authentication, and **Zod** for form validation. The system is designed to provide a smooth booking experience with features such as date filtering, sorting by guests and price, and user profile management.
## Features
- **Homepage with Offers**: A dynamic homepage showcasing available offers, hotel description, and a **React Leaflet** map displaying the hotel location.
- **Booking Form**: Users can select a date range, and the system will display available rooms for that period.
- **Room Sorting**: Sorting functionality based on the number of guests and price.
- **Detailed Room Pages**: Each room has a dedicated page with a detailed description, booking form, and disabled dates for already reserved periods.
- **Authentication**: The system supports both credential-based login and **OAuth** with Google and Facebook providers via **Auth.js**.
- **Checkout Process**: Users are forwarded to a checkout page after selecting a room. If not authenticated, they are redirected to the login/signup page.
- **Profile Management**: Users can update their profile, check their reservation history, cancel unconfirmed reservations, and delete past ones.
- **Unconfirmed Reservations**: All bookings are marked as unconfirmed and can be confirmed upon arrival (back office still in development).
## Technologies Used
### Front-end
- **Next.js**: Server-Side Rendering (SSR), Client-Side Rendering (CSR), and API routes.
- **CSS**: Fully customized styling using pure CSS.
- **React Leaflet**: For map integration.
- **DayPicker**: For friendly date selection.
- **date-fns**: For handling date manipulation.
- **Zod**: For form validation.
- **React Hot Toast**: Showing user friendly feedbacks for errors, success and other status.
- **Memoization**: Applied to prevent unnecessary re-renders.
### Back-end
- **Supabase**: Used as the database for storing and retrieving reservation and user data.
- **bcrypt**: For secure password hashing and comparison.
- **Auth.js**: For authentication (credentials and OAuth with Google and Facebook).
## Installation
1. Clone the repository:
```bash
git clone https://github.com/OthmaneNissoukin/nextjs-hotel-booking.git
cd nextjs-hotel-booking
```
2. Install the dependencies:
```bash
npm install
```
3. Set up your environment variables:
- Create a `.env.local` file in the root directory and include the following:
```env
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
NEXTAUTH_SECRET=your-nextauth-secret
NEXTAUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret
```
4. Run the development server:
```bash
npm run dev
```
5. Visit [http://localhost:3000](http://localhost:3000) to view the app in your browser.
## Screenshots
1. **Homepage**
2. **Room Listing**
3. **Room Details**
4. **Checkout Page**
5. **Reservation Update Page**
6. **Sign In Page**
## Future Development
- **Back Office**: The next phase will include building the back office for reservation management, where admins can confirm or cancel reservations.
- **Payment Integration**: While this is a practice project, future iterations could include payment gateway integration for live transactions.
## Contributing
Feel free to submit issues or pull requests. Contributions, suggestions, and improvements are always welcome!
## License
This project is licensed under the MIT License. See the [LICENSE](./blob/main/Licence.txt) file for details.