Hostel Management Web

Overview

Hostel Management Web 🏨

Hostel Management Web is a mobile-first application designed for comprehensive hostel operations, perfect for teams who need:

• Role-based access control (Management, Ground Crew, Non-Room staff)
• Unified room and non-room booking management
• A centralized Operations Center for bills, checklists, and performance
• An approval workflow for staff edit requests
• Seamless mobile experience with PWA "Add to Home Screen" support

Key Features

• Authentication: Secure email/password login with role-based routing
• Dashboard: Interactive room type overview, availability tracking, and date navigation
• Booking Management: Create, view, and seamlessly manage room reservations
• Non-Room Bookings: Organize tours, shuttles, and other off-room services
• Operations Center: Handle bills, follow-ups, checklists, petty cash, staff clock in/out, incidents, and performance tracking
• Edit Requests: Built-in approval workflow for ground crew data modifications

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Backend: Firebase (Auth, Firestore, Storage)
• Styling: Tailwind CSS + shadcn/ui (Radix UI)

Architecture

The application leverages a real-time, client-side architecture where Next.js provides the routing and UI layer, while the Firebase Client SDK handles data synchronization and state management directly from the frontend.

'use client'
import { useAuth } from '@/lib/auth-context'
import { doc, updateDoc } from 'firebase/firestore'
import { db } from '@/lib/firebase'

export default function Dashboard() {
  // Real-time global state managed via Context + Firebase listener
  const { userRole, roomTypeDetails, bookings } = useAuth()

  // Direct, secure mutations via Firebase Client SDK
  const checkInGuest = async (bookingId: string) => {
    await updateDoc(doc(db, 'bookings', bookingId), {
      status: 'CHECKED_IN'
    })
  }

  return <DashboardView data={roomTypeDetails} onCheckIn={checkInGuest} />
}