🏨 Hotelly

A full-featured Hotel Management Dashboard for hotel employees, built with modern frontend tools and a real-world workflow in mind.

Hotelly is a hotel management dashboard built for hotel employees to manage cabins, bookings, guests, and daily operations efficiently.

The app focuses on real-world hotel workflows such as check-ins, check-outs, payments, and operational statistics , all in one clean dashboard.

🚀 Live Demo

🔗 Netlify Deployment: https://hootelly.netlify.app

🔐 Test Employee Account

Use the following credentials to explore the app as a hotel employee:

• Email: employee@hotelly.com

• Password: Hotelly#

⚠️ New users cannot sign up publicly. Accounts are created inside the application only, ensuring access is limited to hotel staff.

🧑‍💼 Target Users

• Hotel employees

• Receptionists

• Hotel administrators

All users must be authenticated to access any part of the system.

🛠️ Tech Stack

This project is built using a modern and scalable frontend stack:

• Frontend: React + Vite

• Backend & Auth: Supabase

• Styling: Styled Components

• Charts & Statistics: Recharts

• Deployment: Netlify

✨ Features

🔐 Authentication & Users

• Secure login for hotel employees

• New users can only be created from inside the app

• Upload and update user avatar

• Change user name and password

🏠 Cabins Management

• View all cabins in a table layout

• Displayed data includes:

  • Cabin photo

  • Name

  • Capacity

  • Price

  • Current discount

• Create new cabins (with image upload)

• Update existing cabins

• Delete cabins

📖 Bookings Management

• View all bookings in a detailed table

• Booking data includes:

  • Arrival & departure dates

  • Booking status

  • Paid amount

  • Cabin & guest information

Booking Statuses:

• Unconfirmed – booked but not checked in

• Checked in

• Checked out

➡️ Bookings table can be filtered by status

Additional Booking Details:

• Number of guests

• Number of nights

• Guest observations

• Breakfast booking status

• Breakfast price

Booking Actions:

• Delete booking

• Check in guest

• Check out guest

Editing bookings is not required at this stage

💰 Payments & Check-in Flow

• Bookings may be unpaid on arrival

• On check-in:

  • Payment is accepted outside the app

  • Employee confirms payment inside the app

• Guests can add breakfast for the entire stay during check-in if not already included

👤 Guests Data

Each guest record includes:

• Full name

• Email

• National ID

• Nationality

• Country flag for quick identification

📊 Dashboard & Analytics

The dashboard is the initial screen after login and shows key hotel insights.

Time Ranges:

• Last 7 days

• Last 30 days

• Last 90 days

Dashboard Includes:

• Guests checking in today

• Guests checking out today (with quick actions)

• Recent bookings statistics

• Sales statistics

• Check-ins summary

• Occupancy rate

Charts:

• 📈 Daily hotel sales

  • Total sales

  • Extras sales (currently breakfast only)

• 📊 Stay duration statistics

⚙️ Application Settings

Employees can manage global hotel settings:

• Breakfast price

• Minimum nights per booking

• Maximum nights per booking

• Maximum guests per booking

🌙 Dark Mode

• Full dark mode support

• Can be toggled inside the application

📦 Installation (Local Development)

git clone https://github.com/Hussein-Mohamed1/Hotelly.git
cd Hotelly
npm install
npm run dev

🔑 Environment Variables

The project uses Supabase. Create a .env file in the root directory:

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

👨‍💻 Author

Hussein Mohamed

⭐ If you find this project useful, feel free to star the repository!