The Wild Oasis - Booking

Live Site

View website • Report Bug • Request Feature

---

Welcome to The Wild Oasis! This is the customer version of the hotel management web app, where users can view and book cabins based on availability, manage their bookings, and update their profiles. This project was a great learning experience for me as I explored Next.js, Auth.js (NextAuth), and many other advanced techniques.

Live Site

Check out the live app here: The Wild Oasis - Booking

Admin Version

I also built an admin version of this app for hotel employees to manage cabins, bookings, and guests. The repository is here, and the live site is here.

Features

• View all available cabins with descriptions and images.
• Book a cabin based on available dates and select the number of guests.
• Sign in with Google to manage bookings.
• View your booked cabins, edit them, or cancel if needed.
• Update your profile information.
• Fully responsive on all devices (I made sure to make it mobile-friendly!).

Technologies Used

• Next.js (App Router)
• Tailwind CSS for styling
• Supabase for the database (shared with the admin app)
• NextAuth.js for authentication (Google sign-in)
• Date-fns for date handling

What I Learned

This project deepened my knowledge of Next.js (especially the App Router) and introduced me to using libraries like NextAuth.js. I learned to build a fully functional booking system, integrate user authentication, and ensure the app is responsive on all devices.

Setup Instructions

To run this project locally:

1. Clone the repo:

   git clone https://github.com/CodeWithAlamin/The-Wild-Oasis-Booking.git

2. Install dependencies:

   npm install

3. Set up environment variables:
   • You’ll need to configure Supabase and NextAuth (Google sign-in). Add your environment variables in a .env.local file. Check out the .env.local.example for what you need to include.
4. Run the development server:

   npm run dev

5. Open http://localhost:3000 to see the app.

Author

👤 Alamin

• LinkedIn - @CodeWithAlamin
• Twitter - @CodeWithAlamin
• GitHub - @CodeWithAlamin

Feel free to contact me with any questions or feedback!

Acknowledgments

This app was developed as part of the Udemy course by Jonas Schmedtmann. His teaching style and guidance were instrumental in helping me build this project and learn Next.js at a deeper level. Huge thanks to Jonas for making the learning experience enjoyable and impactful.