The Wild Oasis
The Wild Oasis is a React application build for hotel service. I built this project while practicing React, Supabase and more. This application includes a lot of connections with Supabase so everyone can have the same overall experience as well to stay updated about customers.
- Type
- Practice
- Desktop only
- Stack
- React
- React Query
- Styled Componets
- React Hook Form
- Supabase
- Netlify
Project Purpose and Goal
This project included the following 5 phases and iterations of the site. Phase 1 is simply the cabins page where employee can see all the info about a specific cabin, sort the cabins, edit and add a new cabin. Phase 2 is by far the largest and the most complex, as it includes all booking information and all functions so the employee can edit them. Phase 3 is all about overall UX, where employees can set their settings, create other user account and update their own account. Phase 4 is the second largest phase, where we created the beautiful dashboard about all information that's happening. And the last phase 5 is about enabling login, logout and beautiful dark mode.
The most effective approach I found to implement these 5 phases is to create a distinct page first, and then add the global states and login functions. This way dashboard information was rendered conditionally with bookings being updated.
- React
- React Query
- Styled Components
- React Hook Form
- Supabase
- Netlify
Web Stack and Explanation
React made the most sense for this web application because it's very simple to use Supabase in combination with ReactQuery which provide very smooth experience. Supabase was chosen because of the ability how easy it to connect to it and to add data that we need by creating tables.
ReactQuery is used across the entire project to provide the fastest performance, because we can store stale data in it and as we go to the same page that is using that data loading will be significantly faster. Reach Hook Form came first in mind for using the forms, because how fast and easy you can work with it. Netlify is also an obvious choice for deployment because of its speed and reliability.
Problems and Thought Process
Like most projects, there is always some problem on your journey, the most difficult area was the organization of the data and loading the same data as fast as possible so our app doesn't get slow. I realized how important maintaining the speed of data flow is important.
As well for the application the be the fastest as possible I was making components as reusable as possible and utilized props for as many components. That' why i used styled components, because the structure of CSS in JS is much easier to use, especially because styled components uses their own props too.
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 React Hooks, Supabase, ReactQuery and Styled components. As my first large project using React, I learned a lot of data structure and code organization. When I first began, I was confused about ReactQuery and Supabase tables, but as soon as I understood how it works, everything went really well. With a lot of refactoring code and resolving issues, for better readability and fewer late night problems.
Other Projects
The Wild Oasis Web
The Wild Oasis Web is a user friendly fullstack application. The purpose of this is to enable users to book cabins that WildOasis company offers.
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.