itsteatv hotel

full-stack hotel with booking and cabin features

Welcome to itsteatv hotel!

Experience the ultimate hotel management system, meticulously crafted with the latest web technologies to make your hotel stay exceptional. Our full-stack hotel application is designed to provide a seamless and enjoyable experience for both guests and hotel administrators. Here's what makes our hotel application stand out:

Cutting-Edge Front-End with ReactJS: Our modern and intuitive front-end is built with ReactJS, ensuring a smooth and responsive user interface. Whether you're exploring room options, managing your bookings, or customizing your preferences, the power of ReactJS brings it all to life.

Robust Back-End with Supabase: Behind the scenes, Supabase takes care of the heavy lifting. This powerful back-end solution ensures secure and efficient data storage, real-time updates, and authentication for users. Supabase allows us to provide a seamless booking experience, keeping you informed at all times.

Stunning User Interface with Tailwind CSS: The user interface of our application is visually appealing and user-friendly, thanks to Tailwind CSS. It combines sleek designs with a responsive layout, making your navigation a breeze. Expect a smooth, elegant, and visually delightful experience.

Efficient State Management with React Query: React Query enhances your experience with efficient state management, reducing loading times and offering real-time updates. It ensures that your data is always up-to-date, creating a seamless and dynamic booking process.

Hotel Features at Your Fingertips:

• Booking Feature: With just a few clicks, you can book your preferred room or cabin, choosing from a variety of options. Real-time availability and pricing information ensure you get the best deals. You can also check in your booking or delete it.

• Cabin Management: Have a change in plans? Our cabin management allows you to easily add, update, delete, or edit cabin details, giving you flexibility during your stay.

• User Authentication: Authenticated users can Securely create user profile and you can easily manage your personal account. Update your avatar, change your username, and maintain the highest level of account security with password management.

• Personalized Preferences: Tailor your hotel experience by updating your preferences. Want breakfast included in your stay? Set your preferred breakfast price and more.

Live Demo

itsteatv-hotel-demo

Technologies Used:

1. ReactJS:

• The front-end of our hotel application is built using ReactJS, a powerful JavaScript library that provides an interactive and responsive user interface.

2. Supabase:

• Supabase is our go-to back-end solution, offering secure data storage, real-time updates, and user authentication. It ensures the reliability and efficiency of our application.

3. Tailwind CSS:

• Tailwind CSS is responsible for the stunning visual design and responsive layout of our user interface. It brings an elegant and user-friendly design to the forefront.

4. React Query:

• React Query takes care of state management, offering efficient data loading and real-time updates. It plays a pivotal role in ensuring that users have the most up-to-date information.

5. Other Libraries:

• Our full-stack hotel application is enriched with a range of other libraries and tools to enhance performance and functionality. These include but are not limited to:

  • React Router: For seamless navigation between different pages.
  • React Icons: To provide a collection of icons for a visually appealing interface.
  • React Hook Form: Ensuring smooth and user-friendly form handling.
  • React Toastify: For notifications and alerts to keep users informed.
  • React Query Devtools: To monitor and manage the state of our application in real-time.
  • Tailwind CSS Plugins: For additional customization options and styles.
  • Supabase Client: The client library for Supabase, making it easier to interact with the Supabase back-end.
  • Preline & Flowbite: Two ui libraries for tailwind css which present stunning ui components for all kind of projects.

Getting Started

Prerequisites

Node.js and npm should be installed on your machine.

Installation

To run the project locally, follow these steps:

1️⃣ Clone the repository:

git  clone  https://github.com/itsteatv/itsteatv-hotel.git

2️⃣ Navigate to the project directory:

cd  itsteatv-hotel

3️⃣ Install dependencies

npm  install

4️⃣ Start the development server:

npm  run  dev

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvement, please feel free to submit a pull request.

Project todos.

• Header & Sidebar components added

• Routing added ( sidebar )

• Fetching table data added

• Deleting cabins added

• Creating new cabin added

• Handling & showing form error

• Uploading images to supbase

• Editing cabin

• Duplicating cabin

• Application setting

• Filtering cabins (based on discount)

• Sorting cabins

• Dark mode

• Getting booking table from api

• Uploading sample data

• Filtering Bookings

• Sorting Bookings

• Searching Cabins

• Pagination for bookings

• Booking detail page

• Authentication (Login)

• Creating new user (only authenticated users allowed)

• Update user info

• Dashboard layout (i will add more details to the dashboard later)

project is finished but i have some plans to add some new features in near future.

If you login with discord and after you are authenticated you get a page unavailable error, don't worry, you're discord profile is authorized (i suggest login with the default account).