The Wild Oasis Dashboard
React/ViteStyled-ComponentSupabaseRechartReactQuery/TanStack
The Wild Oasis Internal Management System streamlines operations for a boutique hotel with 8 cabins, handling reservations, room and customer management, payments, and more. Designed for staff, it features a dashboard with key stats and settings, and will integrate with a future customer website and API for seamless reservations.
Key Features
🧑💻 User Management
- Only hotel staff can sign up. Staff can upload profile pictures, change names, and update passwords.
🏠 Cabin Management
- View all cabins in a table with details like pictures, name, capacity, price, and discounts. Staff can add, update, or delete cabins.
💳 Payment Management
- Confirm customer payments at check-in. Option to add breakfast during check-in.
📊 Dashboard & Analytics
- View key stats for the last 7, 30, or 90 days. Includes check-ins, check-outs, bookings, sales stats, and daily sales charts.
📉 Stay Duration Statistics
- Visualize customer stay duration for important hotel metrics.
⚙️ App Settings
- Manage app-wide settings like breakfast price, minimum/maximum stay duration, and maximum customer number.
🌙 Dark Mode
- Offer dark mode for improved user experience.
Full Stack Technical Implementation 💻🌐
⚛️ React
- The core framework used to build the user interface of the project.
⚡ Vite
- Development server and build tool, providing fast builds and hot-reloading for a smooth development experience.
🗄️ Supabase
- A backend-as-a-service platform for database and authentication, integrated via @supabase/supabase-js.
📊 React Query
- State management for server data fetching and caching, integrated using @tanstack/react-query.
❗ React Error Boundary
- Used for error handling to catch JavaScript errors in the app’s components and display fallback UI.
📝 React Hook Form
- Library for handling forms, enabling easy form validation and management of form state.
🔥 React Hot Toast
- A notification library used to display toast notifications in the app.
🎨 Styled Components
- A library for writing CSS in JavaScript, used to style components in a modular way.
📈 Recharts
- A charting library used to display interactive and responsive charts.
📅 Date-fns
- Utility library for working with dates, providing functions for date manipulation.
✨ Others
- 🌍 Dotenv: Loads environment variables from a .env file, allowing the project to securely store API keys and other secrets.
- 🔍 ESLin: Linter tool to enforce code quality and consistency, with configurations for React and hooks.
- 🚀 Vite Plugin React: Plugin to support React JSX transformations in Vite for efficient compilation.
- 📦 NPM: Node package manager, used to manage project dependencies.
What I learned 📚
📊 Supabase Integration
- Learned how to efficiently integrate backend with Supabase, quickly setting up real-time databases and authentication in a serverless environment. It was more intuitive and easy to learn than traditional database/API setups.
🎨 Component-Based Styling
- Got familiar with using Styled-components for component-level styling, improving code reusability and maintainability. Created reusable Modal, Compound, and HOC components, and look forward to further exploring Styled-components.
⚡ Optimized Data Management
- Used React Query to optimize server data fetching, manage data synchronization, and cache efficiently.
📝 Efficient Form Management
- Learned to optimize form state management with React Hook Form, simplifying form validation and error handling.
📅 Date Management
- Utilized date-fns to handle date-related challenges, especially useful in booking systems for calculating and formatting dates.
🔧 API Data Handling
- Gained experience with client-side and API-side data filtering, sorting, and pagination, realizing their importance in backend data management patterns.
📈 Rechart Experience
- Used Rechart to design and display beautiful charts, enhancing data visualization for better understanding and experimenting with various datasets.
Problems & Challenges
| Title | Status | Difficulty Level | Date |
|---|---|---|---|
| Infinite Loop in useQuery | solved | low | Oct 23, 2024 |
| Incorrect Storage Bucket Configuration | solved | middle | Oct 11, 2024 |
| Dynamic Styling Based on Props Issue | solved | low | Oct 5, 2024 |