🏨 Elegant Hotel - Booking System Frontend

A modern, responsive hotel room booking system built with Next.js 14, featuring real-time availability checking, multi-step booking flows, and comprehensive admin management capabilities.

🌐 Live Demo: https://elegant-hotel-booking.vercel.app

🔗 Related Projects

🎨 Backend API: Hotel Booking System - Backend

✨ Features

🎯 Core Functionality

• Real-time Room Search: Advanced availability checking with date range selection
• Multi-step Booking: Intuitive booking flow with form validation
• User Authentication: JWT-based auth with role management (Customer/Admin)
• Room Management: Comprehensive CRUD operations for hotel rooms
• Admin Dashboard: Statistics, analytics, and booking management
• Responsive Design: Responsive design for all devices

🏗️ Technical Features

• Modern React Patterns: Hooks, Context, Custom hooks
• State Management: Zustand for client state, TanStack Query for server state
• Form Handling: react-hook-form with Zod validation
• Data Tables: Advanced tables with sorting, filtering, and pagination
• Error Boundaries: Comprehensive error handling
• Loading States: Skeleton loaders and optimistic updates
• Cache Management: Intelligent query invalidation and prefetching

🛠️ Technology Stack

Frontend Core

• Framework: Next.js 14
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI + Shadcn/ui

State & Data Management

• Server State: TanStack Query v5
• Client State: Zustand
• Form Handling: React Hook Form
• Validation: Zod

Development Tools

• Data Tables: TanStack Table
• Icons: Lucide React
• Code Quality: ESLint + TypeScript strict mode

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Backend API running (see backend setup)

Installation

# Clone the repository
git clone https://github.com/yourusername/hotel-booking-system-fe.git
cd hotel-booking-system-fe

# Install dependencies
npm install

# Install Shadcn UI components (already configured)
npx shadcn@latest add button card input label form select textarea checkbox dialog table badge

Environment Variables

Create a .env file:

NEXT_PUBLIC_API_URL=http://localhost:8080/api

Development

# Start development server
npm run dev

# Open browser
# http://localhost:3000

Build & Deploy

# Build for production
npm run build

# Start production server
npm start


### UI Components Setup

The project uses Shadcn/ui components. If you need to add new components:

```bash
# Install additional Shadcn components
npx shadcn@latest add [component-name]

# Example: Add new components
npx shadcn@latest add dropdown-menu tooltip avatar

# List all available components
npx shadcn@latest

Already installed components:

• button - Primary UI buttons
• card - Container components
• input - Form input fields
• label - Form labels
• form - Form wrapper components
• select - Dropdown selectors
• textarea - Multi-line text inputs
• checkbox - Checkbox inputs
• dialog - Modal dialogs
• table - Data tables
• badge - Status indicators

📁 Project Structure

src/
├── app/                    # Next.js App Router pages
│   ├── admin/              # Admin dashboard pages
│   ├── auth/               # Authentication pages
│   ├── bookings/           # Booking management
│   ├── rooms/              # Room browsing & details
│   └── page.tsx            # Homepage
├── components/
│   ├── auth/               # Authentication forms
│   ├── booking/            # Multi-step booking flow
│   ├── layout/             # Layout components
│   ├── providers/          # Context providers
│   ├── rooms/              # Room-related components
│   ├── tables/             # Data table components
│   └── ui/                 # Reusable UI components
├── hooks/                  # Custom React hooks
│   ├── useRooms.ts         # Room management hooks
│   ├── useBookings.ts      # Booking management hooks
│   └── useMultiStepForm.ts # Multi-step form logic
├── lib/
│   ├── api.ts              # API client & endpoints
│   ├── utils.ts            # Utility functions
│   └── validations/        # Zod validation schemas
├── stores/                 # Zustand stores
│   ├── authStore.ts        # Authentication state
│   └── bookingStore.ts     # Booking workflow state
└── types/                  # TypeScript type definitions
    └── index.ts            # Shared types

🎨 UI Components

Built with Shadcn/ui

// Example component usage
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { DataTable } from "@/components/ui/data-table";

Custom Components

• MultiStepBookingForm - Complete booking workflow
• RoomSearchForm - Advanced search with filters
• VirtualizedRoomList - Performance-optimized room listing
• RoomsTable / BookingsTable - Admin data tables

Admin Dashboard

• Room occupancy statistics
• Booking management with status updates
• Revenue analytics
• User role-based access control

Search & Filtering

• Date range availability checking
• Category and amenity filters
• Real-time search with debouncing
• Sorting by price, category, room number

🚀 Performance Optimizations

Query Optimization

• Intelligent query key management
• Automatic cache invalidation
• Prefetching for improved UX
• Stale-while-revalidate strategy

UI Performance

• Virtualized lists for large datasets
• Skeleton loading states
• Optimistic updates
• Lazy loading for images

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

İsmet Can Bıyık

• GitHub: @ismetcanbyk

For backend setup and API documentation, see Backend Repository

⭐ If you like this project, please give it a star to support us!