hyperball123/the-wild-oasis

The Wild Oasis - Project README 🌿 Welcome to The Wild Oasis project! This README file will guide you through the project, its goals, technologies used, and how to get started.

Table of Contents 📚 Project Overview Technology Stack Project Requirements Application Features Getting Started

Project Overview 🏨 The Wild Oasis is an application designed for hotel employees to manage cabins, bookings, and guest information efficiently. The application ensures that only authorized hotel employees can create accounts, upload avatars, and perform various tasks related to cabin and booking management.

Technology Stack ⚙️ The application is built using the following technology stack:

Frontend: HTML, CSS, JavaScript, React.js Routing: React Router Styling: Styled Components Remote State Management: React Query UI State Management: Context API Form Management: React Hook Form Other Tools: React Icons, React Hot Toast, Recharts, Date-fns, Supabase, React Error Boundary

What I Learned Building The Wild Oasis Project 🚀

<<<<<<< HEAD ➡️Users must log in to the application to perform tasks.
➡️New users can only be signed up within the application,ensuring only genuine hotel employees have accounts.
➡️Users can upload avatars, change their names, and passwords.
➡️Detailed table views for cabins and bookings with relevant information.
➡️Booking status includes "unconfirmed," "checked in," and "checked out," and should be filterable.
➡️Users can create, update, and delete cabins.
➡️Users can delete, check in, or check out bookings as guests arrive.
➡️Guests can add breakfast during check-in.
➡️Guest data includes full name, email, national ID, nationality, and a country flag.
➡️A dashboard displaying important information for the last 7, 30, or 90 days.
➡️Statistics on recent bookings, sales, check-ins, and occupancy rate.
➡️Application-wide settings for breakfast price, min and max nights/booking, and max guests/booking.
➡️Dark mode for enhanced user experience.

Technical Skills➡️ React.js Mastery: Learned how to architect a React application from scratch, leveraging the power of components, state management, and hooks.

Styled Components: Explored the benefits of styling components with Styled Components, enhancing modularity and maintainability.

React Router: Implemented navigation with React Router, ensuring a smooth user experience with seamless page transitions.

React Query for Remote State Management: Utilized React Query to efficiently manage and synchronize state with the server, optimizing performance.

Advanced Context API for UI State Management: Delved into advanced uses of Context API for managing UI state across components, enhancing overall application responsiveness.

Form Management with React Hook Form: Mastered form handling with React Hook Form, improving user interactions and data validation.

Reusable Components and Logic with Custom Hooks: Explored the creation of custom hooks to encapsulate and reuse components and logic, promoting code reusability.

Compound Components and Render Props: Implemented React compound components and utilized render props to create flexible and extensible UI structures.

External Libraries Integration: Incorporated various external libraries such as React Icons, React Hot Toast, Recharts, and Date-fns to enhance functionality and user experience.

CRUD Operations and Data Management➡️ Supabase Integration: Integrated Supabase for backend services, gaining hands-on experience in database interactions and CRUD operations.

Use of useRef: Employed useRef for efficient handling of references, particularly useful in managing form input focus and data manipulation.

Application Design and Layout➡️

-Layout Strategies: Explored different strategies for laying out the application, organizing components, and structuring the user interface to ensure scalability and maintainability.

Project-Specific Functionalities➡️

Authentication and User Management: Implemented secure user authentication, allowing only authorized hotel employees to access and manage the application.

Avatars and User Profile Management: Enabled users to upload avatars, and change names, and passwords, enhancing personalization and user control.

Detailed Table Views and Filtering: Designed detailed table views for cabins and bookings, with filterable booking statuses for better information retrieval.

Guest Interaction and Data Management: Implemented features for guest interactions, including check-in, check-out, and the addition of breakfast during check-in. Managed guest data effectively.

Dashboard and Statistics: Created a dynamic dashboard displaying crucial information over specified time frames, incorporating statistics on bookings, sales, check-ins, and occupancy rates.

Application-wide Settings: Implemented application-wide settings for parameters such as breakfast price, minimum and maximum nights/booking, and maximum guests/booking.

Dark Mode: Enhanced the user experience by implementing a dark mode feature for improved visibility and aesthetics.

Collaboration and Contribution➡️ Git and Version Control: Utilized Git for version control, ensuring a collaborative and organized development process.

Getting Started➡️

To contribute or explore The Wild Oasis project:

Clone the repository: git clone (https://github.com/hyperball123/the-wild-oasis) Install dependencies: npm install Start the development server: npm start Explore the application at http://localhost:3000 Feel free to contribute, report issues, or suggest improvements. Happy coding! 🌟