The Wild Oasis Website

Welcome to "The Wild Oasis Website" repository! This project is a customer-facing website for "The Wild Oasis," a boutique hotel with eight charming wooden cabins. The site enables guests to explore the hotel, view cabin details, make reservations, manage their profiles, and more.

Table of Contents

• Project Overview
• Functionality
• Screenshots
• Technology Stack
• Installation
• Usage
• Contact Information

Project Overview

"The Wild Oasis Website" is designed to offer potential and actual guests a seamless experience while interacting with the boutique hotel. Guests can explore the hotel, learn about its cabins, check availability, and make reservations. The website is built on Next.js, leveraging Supabase as the backend to manage data related to cabins, bookings, and guests.

This website integrates directly with an internal application previously developed for the hotel's staff to manage bookings, cabins, and guest information. Both the internal application and this customer-facing website share the same Supabase database and API. This ensures that any updates made to the cabins or bookings in the internal application are immediately reflected on the customer-facing website.

Functionality

The Wild Oasis Website offers a variety of features to enhance the user experience for guests:

1. Explore the Hotel: Guests can visit the /about page to learn more about The Wild Oasis, its offerings, and its ambiance.

2. View Cabin Information: The /cabins page allows guests to view all available cabins, with the ability to filter cabins by their maximum guest capacity.

3. Check Cabin Details: On the cabins/:cabinId page, guests can see detailed information about each cabin, including images, amenities, and booked dates.

4. Make a Reservation: Guests can reserve a cabin for a specific date range directly from the cabins/:cabinId page. Reservations are initially set to 'unconfirmed' and will be confirmed upon arrival at the property.

5. Manage Reservations: Logged-in guests can view their reservation history, including past and future bookings, on the /account/reservations page. They can also update or delete their reservations from the /account/reservations/edit/:bookingId page.

6. User Authentication: Guests must sign up and log in before they can make reservations or manage their profiles. Upon signing up, a profile is created in the database, which guests can update to expedite the check-in process.

7. Profile Management: Guests can update their profile information on the /account/profile page to ensure a smooth check-in experience when they arrive at the hotel.

Screenshots

Here are some screenshots showcasing the key pages and functionalities of The Wild Oasis Website:

1. Homepage: The main landing page with links to various sections.
   

2. Login Page: The authentication page for guests.
   

3. About Page: Provides detailed information about The Wild Oasis.
   

4. Booking Process: Shows the steps involved in booking a cabin.
   

5. Reservation Deletion Confirmation: Confirms deletion of a reservation.
   

6. Profile Editing: Allows guests to update their profile.
   

7. Reservation Editing: Interface for editing a reservation.
   

8. Cabins Page: Displays all cabins with sorting options by capacity.
   

9. Reservations History: Displays a guest’s past and future reservations.
   

10. Single Cabin Page: Detailed view of an individual cabin.
    

11. Account Page: The guest's account area with options to manage profile and reservations.
    

Technology Stack

The Wild Oasis Website is built using the following technologies and tools:

1. Framework: - A React framework for building fast and scalable web applications.
2. UI State Management: - For managing state across the application.
3. Database/API: - A backend as a service providing a PostgreSQL database with RESTful API endpoints.
4. Styling: - A utility-first CSS framework for rapidly building custom designs.
5. Icons: - A set of free, MIT-licensed high-quality SVG icons for React.
6. Date Handling: - A modern JavaScript date utility library.
7. Authentication: - Authentication for Next.js applications.
8. React 18: - A JavaScript library for building user interfaces.
9. Date Picker: - A flexible date picker component for React.

Installation

To run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/yourusername/the-wild-oasis-website.git
   cd the-wild-oasis-website

2. Install dependencies:

   npm install

3. Set up environment variables:

   Create a .env.local file in the root of your project and add your environment variables for Supabase, NextAuth, and other services.

4. Run the development server:

   npm run dev

   The website will be available at http://localhost:3000.

Usage

Once the development server is running, you can explore the website's various functionalities:

• Visit the homepage to start exploring.
• Use the navigation bar to visit different sections, like About, Cabins, and Account.
• Sign up and log in to manage reservations and profile details.

Contact Information

Feel free to reach out if you have any questions or suggestions!

• 📧 Email: [email protected]
• 🌐 Portfolio: paulanik.com
• 💼 LinkedIn: LinkedIn Profile
• 📝 Dev.to: Dev.to Profile