Public
Hotel Management System with booking and admin dashboard
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

🏨 Grand Palace Hotel Management System

A professional, full-featured Hotel Management System built as a modern web application with a premium hotel website design.

🌐 Live Demo

Open the Live App β†’

Demo Credentials

RoleUsernamePassword
Adminadminadmin123
Receptionistreceptionreception123

✨ Features

🌐 Public Website

  • Homepage β€” Hero banner, room showcase, amenities, testimonials, CTA sections
  • Rooms Page β€” Browse all rooms with filtering by type (Standard/Deluxe/Suite)
  • Booking Page β€” 4-step booking flow with auto bill calculation & GST
  • About Page β€” Hotel story, values, leadership team
  • Contact Page β€” Contact form and hotel info

πŸ” Admin Dashboard

  • Dashboard β€” Revenue, room stats, booking overview, rating summary
  • Room Management β€” Add/edit/delete rooms, set pricing, manage availability
  • Customer Management β€” Full CRUD with search functionality
  • Booking Management β€” Check-in/check-out flow, payment tracking, cancellations
  • Employee Management β€” Staff records, salary, department, role management
  • Payment Records β€” Transaction history with summaries
  • Feedback & Ratings β€” Guest review management with rating distribution

πŸ’‘ Key Capabilities

  • πŸ”’ Authentication system (Admin + Receptionist roles)
  • πŸ’° Auto bill calculation with 18% GST
  • πŸ“Š Real-time dashboard statistics
  • πŸ” Customer search
  • 🏷️ Status badges (available/booked/maintenance, paid/pending, etc.)
  • πŸ–¨οΈ Print booking confirmation
  • πŸ“± Professional UI with Playfair Display + Inter fonts

πŸ—„οΈ Database Schema

Rendering mermaid diagram...

πŸ› οΈ Tech Stack

LayerTechnology
BackendHono (TypeScript)
FrontendReact 18 (JSX)
DatabaseSQLite (Val Town)
RuntimeDeno (Val Town)
StylingInline styles + Google Fonts
ArchitectureMVC pattern with REST API

πŸ“ Project Structure

β”œβ”€β”€ index.ts                 # Main HTTP entry point (Hono server)
β”œβ”€β”€ api/
β”‚   └── routes.ts            # REST API routes
β”œβ”€β”€ database/
β”‚   β”œβ”€β”€ schema.ts            # Database table creation + seed data
β”‚   └── queries.ts           # All database query functions
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ App.tsx              # Main React app with routing
β”‚   β”œβ”€β”€ styles.ts            # Shared theme, colors, and style constants
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ Navbar.tsx       # Navigation bar
β”‚   β”‚   β”œβ”€β”€ Footer.tsx       # Site footer
β”‚   β”‚   └── AdminSidebar.tsx # Admin panel sidebar
β”‚   └── pages/
β”‚       β”œβ”€β”€ HomePage.tsx     # Landing page
β”‚       β”œβ”€β”€ RoomsPage.tsx    # Room listing
β”‚       β”œβ”€β”€ BookingPage.tsx  # Multi-step booking flow
β”‚       β”œβ”€β”€ AboutPage.tsx    # About the hotel
β”‚       β”œβ”€β”€ ContactPage.tsx  # Contact form
β”‚       β”œβ”€β”€ LoginPage.tsx    # Staff authentication
β”‚       β”œβ”€β”€ AdminDashboard.tsx
β”‚       β”œβ”€β”€ AdminRooms.tsx
β”‚       β”œβ”€β”€ AdminCustomers.tsx
β”‚       β”œβ”€β”€ AdminBookings.tsx
β”‚       β”œβ”€β”€ AdminEmployees.tsx
β”‚       β”œβ”€β”€ AdminFeedback.tsx
β”‚       └── AdminPayments.tsx
└── README.md

🎨 Design Inspiration

  • Booking.com β€” Search & filter UX
  • Marriott Hotels β€” Premium color theme
  • Taj Hotels β€” Luxury typography & layout