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.
Check out the live app here: The Wild Oasis - Booking
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.
- 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!).
- 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
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.
To run this project locally:
- Clone the repo:
git clone https://github.com/CodeWithAlamin/The-Wild-Oasis-Booking.git
- Install dependencies:
npm install
- Set up environment variables:
- You’ll need to configure Supabase and NextAuth (Google sign-in). Add your environment variables in a
.env.localfile. Check out the.env.local.examplefor what you need to include.
- You’ll need to configure Supabase and NextAuth (Google sign-in). Add your environment variables in a
- Run the development server:
npm run dev
- Open http://localhost:3000 to see the app.
👤 Alamin
- LinkedIn - @CodeWithAlamin
- Twitter - @CodeWithAlamin
- GitHub - @CodeWithAlamin
Feel free to contact me with any questions or feedback!
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.