https://github.com/codewithalamin/the-wild-oasis-booking
Hotel booking app - Next.js web app where customers can book cabins, manage bookings, and update profiles with Google sign-in and Supabase integration.
https://github.com/codewithalamin/the-wild-oasis-booking
authjs fullstack-development hotel-booking-website nextauthjs nextjs nextjs14 the-wild-oasis wild-oasis
Last synced: about 2 months ago
JSON representation
Hotel booking app - Next.js web app where customers can book cabins, manage bookings, and update profiles with Google sign-in and Supabase integration.
- Host: GitHub
- URL: https://github.com/codewithalamin/the-wild-oasis-booking
- Owner: CodeWithAlamin
- Created: 2024-09-06T12:17:30.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T10:53:45.000Z (9 months ago)
- Last Synced: 2024-10-30T10:38:30.499Z (8 months ago)
- Topics: authjs, fullstack-development, hotel-booking-website, nextauthjs, nextjs, nextjs14, the-wild-oasis, wild-oasis
- Language: JavaScript
- Homepage: https://the-wild-oasis-booking-alamin.vercel.app
- Size: 11.7 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.linkedin.com/in/CodeWithAlamin)
[](https://x.com/CodeWithAlamin)
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](https://the-wild-oasis-booking-alamin.vercel.app/)
## Admin Version
I also built an **admin version** of this app for hotel employees to manage cabins, bookings, and guests. The repository is [here](https://github.com/CodeWithAlamin/The-Wild-Oasis), and the live site is [here](https://the-wild-oasis-alamin.vercel.app).
## 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:
```bash
git clone https://github.com/CodeWithAlamin/The-Wild-Oasis-Booking.git
```
2. Install dependencies:
```bash
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:
```bash
npm run dev
```
5. Open [http://localhost:3000](http://localhost:3000) to see the app.
### Author
👤 Alamin
- LinkedIn - [@CodeWithAlamin](https://www.linkedin.com/in/CodeWithAlamin)
- Twitter - [@CodeWithAlamin](https://www.twitter.com/CodeWithAlamin)
- GitHub - [@CodeWithAlamin](https://github.com/CodeWithAlamin)
Feel free to contact me with any questions or feedback!
### Acknowledgments
This app was developed as part of the [Udemy course](https://www.udemy.com/course/the-ultimate-react-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.
