Serenity Resort Dashboard
Built with:
React.js, React Router DOM, React Query, Vite, Recharts, Supabase
Inspiration:
The inspiration came as a project I thought would be great to make for various complexities to learn React. The project offers a variety of different functionalities that enabled me to learn the in-and-out of React.js
What it does:
This project is a comprehensive web application designed to streamline operations at a faux luxury wildlife resort. It offers secure employee authentication, cabin and booking management, guest data, a dynamic dashboard, application-wide setting adjustments, and a dark mode.
How it was built:
The project first focused on the initial frontend followed by the backend. I first built the UI components using React, styled them with Styled Components, and then added in routes via React Router DOM. I then implemented the various features, moving back and forth between the frontend and backend functionalities. I then added in the backend services with the database integration (Supabase).
Challenges I ran into:
I ran into challenges with UI/UX design considering this was my first React project and thus I faced a learning curve when building components and routing pages. State management was also something new for me to encounter and using hooks such as React Hook form.
What I learned:
I learned how to build UI components using React and manage routes with React Router DOM. I also learned how to use hooks. Additionally, I learned advanced React patterns, secure authentication methods with React, and dynamic data presentation through implementing features such the employee authentication, cabin and booking management, guest data handling, and the dynamic dashboard. I also learned how to use React Query for data fetching, caching, and state synchronization and how to use Recharges for data visualization.
What's next:
In the future, integrations with AI-powered guest recommendations and user dashboard could be incorporated. I could also work on learning React Native and turning the web application into a mobile application