The Haven

The Haven Website: Luxury Cabin Booking

Haven Website is an elegant, responsive platform where users can explore luxury cabins located in the breathtaking Italian Dolomites and book them for their desired dates and number of guests. Powered by Next.js, Tailwind CSS, Auth.js, and Supabase, the website provides a seamless and secure user experience, focusing on modern UI features and the natural beauty of the location.

Preview

Check out the live demo

Table of Contents

• Project Description
• Features
• Technologies Used
• How to Clone and Run the Project
  • Prerequisites
  • Steps to Clone and Run
• License
• Contributing

Project Description

Haven Website is a modern hotel website designed for users to explore and book luxury cabins nestled in the heart of the Italian Dolomites. Built using Next.js and Tailwind CSS, the website offers an immersive experience, allowing users to browse available cabins, check availability for specific dates, and book their stays with ease. Auth.js is integrated for secure user authentication, while Supabase is used for seamless data management. The website provides a visually engaging and fully responsive interface that emphasizes modern design trends and offers a smooth, intuitive booking process for users.

Features

• Cabin Browsing: Explore luxury cabins with detailed descriptions, images, and amenities.
• Booking System: Book cabins based on availability for specific dates and number of guests.
• Authentication: Secure user login and account creation with Auth.js for a personalized experience.
• Responsive Design: Fully responsive design that adapts to all devices.
• Seamless User Experience: Smooth interactions and easy-to-use navigation, inspired by the beauty of the Dolomites.
• Modern UI Elements: Sleek animations, intuitive navigation, and contemporary design patterns.

Technologies Used

• Next.js: React framework for building fast and scalable websites.
• Tailwind CSS: Utility-first CSS framework for creating custom designs.
• Auth.js: Authentication library for user login and account management.
• Supabase: Open-source backend-as-a-service for database management and user data.
• React Hook Form: Library for managing form inputs and validation in React.

How to Clone and Run the Project

Prerequisites

• Ensure you have Node.js installed. You can download it from here.
• You should have Git installed. Download it from here.
• You need a Supabase account to set up the backend and authentication. Sign up here.

Steps to Clone and Run:

1. Clone the repository

   git clone https://github.com/prabhsingh20/haven-website.git
   

2. Navigate to the project directory

   Change into the project directory by running:

   cd haven-website
   

3. Install dependencies

   Run the following command to install all required dependencies:

   npm install
   

4. Set up Supabase

   • Create a new project on Supabase and set up the database and authentication API keys.
   • Update the .env file with your Supabase credentials.

5. Start the development server

   Once the dependencies are installed and the environment is set up, start the application with:

   npm run dev
   

   The application will be running at http://localhost:3000.

Core Dependencies

• Next.js: React framework for building fast and scalable websites.
• Tailwind CSS: Utility-first CSS framework for building custom designs.
• Auth.js: Authentication library for user login and account management.
• Supabase: Backend-as-a-service for database and authentication.
• React Hook Form: Library for managing form handling in React.

For a full list of dependencies, check the package.json file.

Contributing

✨ We welcome contributions to improve Haven Website! If you'd like to contribute, follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bugfix.
3. Make your changes.
4. Run tests (if applicable) and ensure everything works.
5. Commit your changes and push them to your forked repository.
6. Open a Pull Request to the main repository.

Please make sure to adhere to the project's coding standards and write meaningful commit messages. If you're unsure about anything, feel free to ask!

Testing

Testing for this project is encouraged to ensure its stability and functionality. To run tests (if applicable), use:

npm run test

If you'd like to help write or improve tests, feel free to contribute.

License

This project is open-source and available under the MIT License. You can freely use, modify, and distribute the code. Please see the LICENSE file for more detailed information.