Into the Valley Business App is a full-stack application designed for a rental resort business to managing bookings, guests, and cabins located in the Stardew Valley. This application provides a wide range of features to assist in the operation, offering a one-stop solution for managers to handle rentals smoothly.
In addition, I have developed a client-facing website for this business. [GitHub]. Both the business app and the client-facing app communicate with the back-end database using RESTful APIs, allowing data about bookings, cabins, and guests to be shared between the apps.
- Booking Management: Create, update, and delete of booking. Filter and sort existed bookings.
- Guest Management: Register, update and delete guest-related information.
- Cabin Management: Create, update, and delete cabin details and upload photos. Filter and sort of cabins.
- Dashboard: Visualized charts and sales for booking information, simplified check-in and check-outs of guests on that day.
- User Authentication: Secure login and authentication system for users. Only existing user(hotel staff) could signup new users. Created users can update account details and reset password.
- System Setting: Configure and customize settings that apply to all bookings with ease.
- Dark Mode: Dark mode to follow device.
- Responsive design: Ensure compatibility across devices.
- Real-Time Booking Validation: Prevent doublebooking and check for available time slots while making bookings.
Into the Valley is built using React framework and Supabase as the backend, providing a modern and scalable architecture. The application is designed with a focus on reusability, scalability, and performance.
- RESTful APIs: API seamlessly integrated to manager server state and global state.
- Supabase: A open-source Firebase alternative database that utilizes the Postgres architecture.
- Tanstack React Query: Used with RESTFUL APIs to manage global and server state with Supabase.
- React Hook Form: Handle form state, validation and submission.
- React Router: Navigation between pages.
- Styled Components: CSS styling solution.
- Error Boundary: Catch errors in the child component tree.
- Recharts: A charting library to display charts and statistics.
- Framer Motion: Animation in Modal and form elements.
- React day picker: Calendar library used to select data while make bookings.
- Reusable Components: Designed with reusability in mind, components can be easily integrated and adapted across the application.
- Compound Components: A pattern used to build complex UI such as modals and tables.
- Custom Hooks: To manage state and logic across the application.
