The Wild Oasis Web
The Wild Oasis Web is a fullstack NextJS application build for hotel reservations. I built this project while practicing NextJS, Stripe, backend and more. This application is minimalistic, accessible to everyone.
Project Purpose and Goal
This project included the following 5 phases and iterations of the site. Phase 1 is simply the cabins page where visitors can see all the info about a specific cabin and sort the cabins. Phase 2 is implemented log in with NextAuth and creating a profile page with home, reservations and guest profile where user can edit his profile. Phase 3 is all about creating a reservation. When user visits one of the cabins first, he needs to be logged in so he can create a reservation. User can select how many days he wants to stay and see if some days are already reserved, how many guests and should breakfast be included. Phase 4 is enabling users to see their reservations and edit or delete them. The last phase 5 is about enabling stripe hosted checkout page for paying the reservation.
The most effective approach I found to implement these 5 phases is to create a cabins page, and after that to create log in logic with NextAuth and profile page. Afterwards create seperate cabins where user can create a reservation and see his reservations. And when everything was working to enable paying with stripe.
- React
- NextJS
- TailWindCSS
- Axios
- Stripe
- Supabase
- Vercel
Web Stack and Explanation
I wanted to use NextJs so i can practice my backend skills with new technologies that i learned. Supabase was chosen because of the ability how easy it to connect to it and to add data that we need by creating tables.
I chose to do the data mutations for deleting the reservations with useOptimistic hook from React. For styling the application I used TailWindCSS because it's very easy to use and it's very quick to style the application and I wanted to practice my tailwind skills. And for the paying the reservation I chose Stripe. Vercel is also an obvious choice for deployment because of its speed and reliability for NextJS projects.
Problems and Thought Process
Like most projects, there is always some problem on your journey, the most difficult area was the using the stripe for the first time with NextJS. I had to learn how to use the stripe and how to connect it to the NextJS application. The most difficult part was to enable a hosted checkout page for the first time.
As well for the application the to be the fast as possible I was making components as reusable as could be and utilized props for as many components.
Lessons Learned
I could spend all day describing the lessons that I learned while working on this project, but the most important ones involved in my newfound understanding of NextJS, Stripe, backend logic and useOptimistic hook. As my third large full stack project using NextJS, I learned a lot about NextJS hydration and how to use it, how to develop server side rendering with combination with client side rendering, and how to use the NextAuth for log in. Stripe checkout was also a great experience for me because I learned how to create a hosted checkout page and how to connect it to the NextJS application.
Other Projects
The Wild Oasis
The Wild Oasis is a user friendly hotel management application. That helps employees manage everything about hotel data.
View Project
The Bug Book
An fullstack social media application built to help you find other people and talk with them.
View ProjectWant to get in touch?
Send me a message!
If you're searching for a developer, need help with something, or just want to connect, don't hesitate to get in touch.