🍽️ TableHUB

The Next-Generation Luxury Restaurant Operating System & Table Reservation Engine

An end-to-end multi-tenant dining ecosystem built with bespoke micro-interactions, an interactive Spline 3D viewport, real-time spatial table allocation, multi-gateway checkouts, and dedicated management portals for Guests, Restaurateurs, and Platform Administrators.

✨ Live Demo • 📸 Visual Showcase • 📐 System Architecture • ⚡ Quickstart • 🔑 Role Credentials

🌟 Executive Summary & Philosophy

Most restaurant reservation platforms feel like clunky spreadsheets masquerading as software: rigid forms, stale slot lists, zero tactile visual feedback, and disconnected admin tools.

TableHUB was engineered to redefine how guests discover, preview, and book dining experiences—and how restaurants manage inventory and floor layout in real time. We merged high-fidelity design engineering (glassmorphic dark-gold luxury styling, GPU-accelerated motion curves, and real-time interactive 3D WebGL canvases) with algorithmic table scheduling, seat grouping heuristics, and a tripartite role-based portal architecture.

Whether you're a diner seeking a scenic 2-seater window table for a candlelit dinner, a restaurant operator auditing table turns and kitchen capacity, or a super-admin resolving customer disputes and tracking GMV across hundreds of venues—TableHUB delivers a unified, zero-latency reactive experience.

🔑 Role-Based Access & Demo Credentials

TableHUB includes a built-in interactive Role-Based Authentication Gateway with zero-friction demo testing. You can test all 3 role perspectives directly on the Live Demo without setting up a backend:

Role	Standard ID	Shortcut	Password	Destination Route	Permissions & Governance Scope
👑 Super Admin	`admin` (or `admin@tablehub.com`)	`a`	`admin123` (or `a`)	`#/admin`	Platform financial GMV analytics, restaurant KYC vetting/approvals, dispute settlement, diner governance
👨‍🍳 Restaurant Manager	`manager` (or `restaurant`)	`m`	`manager123` (or `m`)	`#/restaurant`	Live floorplan table status mutation, reservation buffer rules, culinary menu inventory, booking queue
🍷 Dining Guest	`user` (or `guest`)	`u`	`user123` (or `u`)	`#/`	Luxury restaurant discovery, 3D WebGL table selection, multi-rail checkout (bKash/Nagad/Card), digital QR passes

💡 Real Login Page with Role Hints & Helpers:

🎯 Sleek Role Hint Pills: Click any role pill (👑 Admin (a/a), 👨‍🍳 Manager (m/m), 🍷 Guest Diner (u/u)) directly on the authentic luxury login card to instantly auto-fill credentials.
👁️ Password Visibility Toggle ("Pass View"): Inspect or mask entered passwords in real time via the interactive eye toggle button.
📋 One-Click Credential Copying: Open the "View ID/Pass" drawer to copy credentials or inspect role scopes.
🔁 Cross-Portal Navigation & Session Banners: Seamlessly switch between Super-Admin, Restaurant Operator, and Guest views using sticky role indicators.

🏷️ GitHub Repository "About" Metadata

Copy and paste the following into your GitHub repository's About sidebar settings:

Description: Next-Generation Luxury Restaurant Operating System & 3D Table Reservation Engine featuring interactive Spline 3D viewport, multi-portal RBAC, and real-time floorplan allocation.
Website: https://ranehal.github.io/TableHUB/
Topics: table-reservation, restaurant-management, spline-3d, react, typescript, vite, tailwind-css, framer-motion, zustand, github-pages, luxury-dining

📐 System Architecture

TableHUB operates on a modular, decoupled reactive architecture designed for rapid client execution, offline resilience, and fluid transitions:

graph TD
    subgraph Client Layer ["Client Layer (React 18 + Vite 6 + TypeScript)"]
        Router["HashRouter Routing Engine\n(SPA GitHub Pages 404 Resilient)"]
        AuthStore["Zustand Auth Store\n(localStorage Hydrated RBAC)"]
        
        Router --> AuthStore
        Router --> UserPortal["User Portal (Diners)"]
        Router --> RestPortal["Restaurant Portal (Operators)"]
        Router --> AdminPortal["Admin Portal (Super-Admins)"]
        
        subgraph UserPortalComponents ["User Experience Components"]
            SplineCanvas["Spline 3D Scene / WebGL Fallback"]
            SearchFilter["Multi-Vector Food & Venue Search"]
            BookingModal["Enhanced Booking Modal\n(2/3/4-Seat Matrix + Window Heuristic)"]
            PaymentModal["Payment Rail Orchestrator\n(Card / bKash / Nagad)"]
            PassGen["Digital Booking Pass + QR Generator"]
        end
        
        subgraph OperatorComponents ["Operator Components"]
            Floorplan["Interactive Table Layout Engine\n(Occupied / Available / Reserved)"]
            RuleEngine["Dynamic Reservation Rules & Buffers"]
            MenuMgr["Culinary Catalog & Inventory"]
            Analytics["Turnover & Peak Hour Visualizer"]
        end
        
        subgraph AdminComponents ["Platform Governance"]
            Vetting["Restaurant KyC / Approval Pipeline"]
            Disputes["Escrow & Dispute Arbitrator"]
            GMVTracker["Platform GMV & Financial Analytics"]
        end

        UserPortal --> UserPortalComponents
        RestPortal --> OperatorComponents
        AdminPortal --> AdminComponents
    end

    subgraph Persistence ["Persistence & Network Architecture"]
        LocalState["Browser Cache & Indexed Persistence"]
        ExpressAPI["Node.js / Express API Bridge\n(server/index.js)"]
        MySQLPool["MySQL Connection Pool\n(XAMPP / Remote Host)"]
        
        AuthStore -.-> LocalState
        RestPortal -.-> ExpressAPI
        ExpressAPI -.-> MySQLPool
    end

📸 Visual Showcase

1. Consumer Discovery & Landing Experience

Luxury Hero Section with Spline 3D Viewport	Meal-Time Reservation Matrix

Real-time 3D canvas interaction, live search, and luxury dark-gold typography.	Smart meal-time filtering (Breakfast, Brunch, Lunch, Snacks, Dinner).

Interactive 3D Brand Cloud & Culinary Partners	Multi-Filter Food & Restaurant Explorer

Kinetic 3D icon sphere featuring partner brands and restaurant collectives.	Faceted filtering by price range, star rating, and geo-distance.

2. High-Fidelity Booking Flow

Venue Profile & Interactive Menu Explorer	Authentication & Guest Identity Modal

High-res imagery, operating hours, amenities, and categorized dishes.	MagicCard auth with Google OAuth, SMS OTP, and instant mock sign-in.

Enhanced Booking Modal (Date, Guests, Meal)	Spatial Table View & Window-Side Selection

HeroUI DatePicker with dynamic slot generation based on party size.	Floorplan preview showing 2/3/4-seater layouts and window proximity.

Multi-Rail Checkout & Escrow Deposit	Verified Digital Pass with QR Code

Instant processing with Credit Card, bKash, and Nagad digital rails.	Deterministic QR payload ready for on-site hostess barcode verification.

3. Restaurant Operating System (Portal)

Operations Command Center & Schedule	Interactive Table Floorplan Management

Live table turnover, guest arrival queues, and peak occupancy graphs.	Real-time table state mutator (Available, Occupied, Reserved, Cleaning).

Menu & Culinary Catalog Manager	Dynamic Reservation Rules & Buffers

Inventory toggles, pricing tiers, dietary tags, and chef specials.	Turn durations, cancellation grace periods, and deposit parameters.

Live Booking Queue & Guest Manifest	Turn Rate & Revenue Analytics

Real-time booking verification with hostess seat-assignment controls.	Deep metric breakdown: table yield, hourly revenue, and repeat diner rate.

4. Super-Admin Platform Command Center

Super-Admin Global Platform Overview	Restaurant Onboarding & Vetting Queue

System-wide GMV, active dining seats, server load, and tenant count.	KYC verification, food hygiene certificate review, and instant activation.

Customer Governance & Trust Score	Escrow Dispute Settlement Center

Audit diner activity, reliability index, no-show strikes, and VIP status.	Two-sided escrow arbitration for missed reservations and refunds.

Platform-Wide Financials & Growth Telemetry	Role-Based Gateway Login

Cohort retention, commission earnings, churn analysis, and volume trends.	Unified credentials portal with automatic role-based redirect routing.

🛠️ Technical Deep Dives

1. Spatial Table & Slot Allocation Engine

Rather than relying on naive timestamp reservation, TableHUB implements a spatial heuristic:

Seat Capacity Optimization: When a guest selects $N$ diners, the engine evaluates available table clusters ${2\text{-seat}, 3\text{-seat}, 4\text{-seat}}$.
Window-Proximity Weighting: Diners can request scenic/window seating; the scheduler flags tables situated on the venue periphery.
Meal-Phase Partitioning: Hours are bucketed into distinct operational phases (breakfast: 06:00–11:00, brunch: 10:00–14:00, lunch: 12:00–16:00, snacks: 15:00–18:00, dinner: 18:00–23:00) with custom turn durations (default $1.5\text{h}$) to prevent double-booking.

2. Spline 3D Scene & WebGL Resilience

The hero experience integrates a real-time Spline 3D scene powered by @splinetool/runtime. To ensure fault-tolerance across hardware configurations (e.g. mobile devices with disabled WebGL or strict corporate firewalls), the canvas is wrapped in an ErrorBoundary that automatically falls back to high-resolution progressive imagery without layout shifting.

useEffect(() => {
  if (canvasRef.current) {
    const app = new Application(canvasRef.current);
    // Prefer Spline community file URL with graceful fallback
    app.load('https://app.spline.design/community/file/cef26586-3853-44bb-b42b-cc462e774e8b')
      .catch(() => {
        app.load('https://prod.spline.design/TS91-wcgqLHYx5Nd/scene.splinecode')
          .catch(console.error);
      });
  }
}, []);

3. Role-Based Access Control (RBAC) with Zustand Persistence

Authentication state is managed via a reactive Zustand store utilizing the persist middleware. User claims and roles (user | restaurant | admin) are rehydrated from localStorage on page boot, enabling instant page reloads and protected route guards without session flicker:

interface AuthState {
  user: User | null;
  isAuthenticated: boolean;
  login: (user: User) => void;
  logout: () => void;
}

Protected routes intercept unauthorized requests and route the actor to their designated dashboard or prompt the login gateway.

4. Zero-404 GitHub Pages SPA Deployment Architecture

Deploying single-page applications with dynamic client-side routes (e.g., react-router-dom) on static hosting like GitHub Pages typically leads to HTTP 404 errors on browser reload because the static file server lacks rewrite rules.

TableHUB solves this with a two-pronged production strategy:

HashRouter Engine: Deep links take the form /#/restaurant, /#/admin, and /#/login, ensuring the base HTML document is always returned regardless of route depth.
Dynamic 404.html Redirection Script: An intelligent fallback page captures any direct non-hash requests and re-encodes the path query before handing control back to React Router.
Automated GitHub Actions CI/CD: Any push to master triggers .github/workflows/deploy.yml, which executes npm ci, builds production assets via Vite, and deploys directly to GitHub Pages.

💻 Tech Stack & Dependencies

Category	Technology	Purpose
Runtime & Framework	React 18.3	Virtual DOM, concurrent rendering, compound components
Language	TypeScript 5	Strict static typing, discriminated unions, interface contracts
Build Tooling	Vite 6 + SWC	Instant HMR, Rollup chunk minification, tree-shaking
Styling	Tailwind CSS 3	Utility-first CSS, responsive dark-gold luxury palette
3D & WebGL	@splinetool/runtime	Real-time interactive 3D WebGL scenes
Animation	Framer Motion 12	Spring physics, layout animations, exit transitions
UI Primitives	Radix UI & HeroUI	Accessible dialogs, popovers, calendars, dropdowns
Specialized Effects	MagicUI & React Icon Cloud	`MagicCard`, `ShinyButton`, `RainbowButton`, 3D Icon sphere
State Management	Zustand 5	Minimalist atomic store with `persist` middleware
Routing	React Router 7	Client-side routing, route protection, history navigation
Data Visualization	Recharts 2.15	Responsive analytics charts, revenue heatmaps
Toast Notifications	Sonner 2.0	Non-blocking stacked toast micro-feedback
Icons	Lucide React	Clean, consistent SVG icon set
Backend (Optional)	Express + MySQL2	REST endpoint scaffolding, connection pooling, SQL schemas

📁 Repository Structure

TableHUB/
├── .github/
│   └── workflows/
│       └── deploy.yml           # Automated GitHub Pages CI/CD pipeline
├── docs/
│   └── screenshots/             # 22 high-resolution visual showcase captures
├── public/
│   └── 404.html                 # SPA redirection script for static hosting
├── server/
│   ├── .env                     # Database credentials & port config
│   ├── index.js                 # Express server & MySQL connection pool
│   └── package.json             # Backend dependencies (express, mysql2, cors)
├── src/
│   ├── components/
│   │   ├── admin/               # Super-Admin portal suite
│   │   │   ├── AdminDashboard.tsx
│   │   │   ├── AdminPortal.tsx
│   │   │   ├── CustomerManagement.tsx
│   │   │   ├── DisputeResolution.tsx
│   │   │   ├── PlatformAnalytics.tsx
│   │   │   └── RestaurantApproval.tsx
│   │   ├── magicui/             # Bespoke shader & canvas effects
│   │   ├── restaurant/          # Restaurant operator management suite
│   │   │   ├── Analytics.tsx
│   │   │   ├── BookingList.tsx
│   │   │   ├── MenuManagement.tsx
│   │   │   ├── ReservationRules.tsx
│   │   │   ├── RestaurantDashboard.tsx
│   │   │   ├── RestaurantPortal.tsx
│   │   │   └── TableManagement.tsx
│   │   ├── ui/                  # Reusable UI components & Radix wrappers
│   │   └── user/                # Consumer discovery & reservation suite
│   │       ├── AuthModal.tsx
│   │       ├── BookingConfirmation.tsx
│   │       ├── EnhancedBookingModal.tsx
│   │       ├── FoodSearchResults.tsx
│   │       ├── PaymentModal.tsx
│   │       ├── RestaurantProfile.tsx
│   │       ├── UserHomeAnimated.tsx
│   │       └── UserPortal.tsx
│   ├── pages/
│   │   └── Login.tsx            # Unified role-based login gateway
│   ├── store/
│   │   └── useAuthStore.ts      # Zustand persisted auth store
│   ├── types/
│   │   └── index.ts             # Domain type declarations (Restaurant, Booking, etc.)
│   ├── App.tsx                  # Root application wrapper
│   ├── Router.tsx               # Client-side routing engine & RBAC guards
│   ├── index.css                # Global Tailwind styles & dark luxury theme variables
│   └── main.tsx                 # React DOM mount & HeroUIProvider
├── index.html                   # HTML entry point with Spline viewer injection
├── package.json                 # Core dependencies and run scripts
├── vite.config.ts               # Vite configuration with aliases & base path
└── README.md                    # Project documentation

⚡ Quickstart & Local Development

Prerequisites

Node.js: v18.0.0 or higher (v20+ recommended)
npm: v9.0.0 or higher

1. Clone & Install

# Clone the repository
git clone https://github.com/ranehal/TableHUB.git

# Enter the project root
cd TableHUB

# Install dependencies
npm install

2. Run the Development Server

# Start Vite in development mode
npm run dev

Open http://localhost:3000 in your browser. The application will hot-reload automatically as you edit files.

3. Production Build & Local Preview

# Compile and bundle assets into /build
npm run build

# Preview the production bundle locally
npm run preview

4. Running the Optional Backend Server (Node.js + MySQL)

For database-backed persistence (requires a running MySQL/XAMPP instance):

# Navigate to the server folder
cd server

# Install server dependencies
npm install

# Start the Express server
node index.js

The API server listens on http://localhost:3001 with CORS enabled for frontend communication.

🚀 GitHub Pages Deployment Guide

TableHUB is live on GitHub Pages at: 👉 https://ranehal.github.io/TableHUB/

🧭 Direct Portal Navigation Links:

🍷 Consumer Discovery & 3D Dining: https://ranehal.github.io/TableHUB/#/
🔑 Role-Based Login & Credentials Helper: https://ranehal.github.io/TableHUB/#/login
👨‍🍳 Restaurant Management Portal: https://ranehal.github.io/TableHUB/#/restaurant
👑 Super-Admin Platform Command Center: https://ranehal.github.io/TableHUB/#/admin

Option A: Automated CI/CD via GitHub Actions (Recommended)

Every push to the master branch triggers the GitHub Actions workflow at .github/workflows/deploy.yml:

Pushes code to master:

git add .
git commit -m "Deploy latest build with role-based auth"
git push origin master

GitHub Actions checks out the repository, installs dependencies via npm ci, compiles production assets via npm run build, and automatically publishes to the github-pages environment.
Verify the deployment in your GitHub repository:
- Settings → Pages → Source: Select GitHub Actions.

Option B: Manual One-Command Deployment via CLI (`gh-pages`)

You can also deploy directly from your local terminal at any time:

# Automatically runs 'npm run build' then pushes to the 'gh-pages' branch:
npm run deploy

Under Settings → Pages, ensure the source branch is configured accordingly (gh-pages branch or GitHub Actions).

🛡️ Zero-404 Routing Architecture

Static hosting providers like GitHub Pages typically return HTTP 404 errors when visitors refresh a dynamic sub-route. TableHUB resolves this through two protective mechanisms:

Hash-Based Routing (HashRouter): Uses URL fragment identifiers (#/restaurant, #/admin, #/login) which are resolved entirely in-memory by React Router.
Deterministic public/404.html Redirection: Any rogue non-hash requests are automatically re-encoded by 404.html and handed back to the SPA root without data loss.

🤝 Contribution Guidelines

We welcome contributions from designers, frontend craftspeople, and systems engineers alike!

Fork the project repository.
Create your feature branch (git checkout -b feature/SpatialTableOptimizer).
Commit your changes with clear, descriptive messages (git commit -m "feat: implement dynamic table clustering heuristic").
Push to the branch (git push origin feature/SpatialTableOptimizer).
Open a Pull Request against master.

📜 License & Acknowledgments

This project is licensed under the MIT License.

Special thanks to:

The Spline community for 3D asset modeling and WebGL tooling.
The Radix UI and HeroUI teams for accessible component primitives.
The original Figma design concept for inspiration.

Navigation Menu

Repository files navigation

🍽️ TableHUB

The Next-Generation Luxury Restaurant Operating System & Table Reservation Engine

🌟 Executive Summary & Philosophy

🔑 Role-Based Access & Demo Credentials

💡 Real Login Page with Role Hints & Helpers:

🏷️ GitHub Repository "About" Metadata

📐 System Architecture

📸 Visual Showcase

1. Consumer Discovery & Landing Experience

2. High-Fidelity Booking Flow

3. Restaurant Operating System (Portal)

4. Super-Admin Platform Command Center

🛠️ Technical Deep Dives

1. Spatial Table & Slot Allocation Engine

2. Spline 3D Scene & WebGL Resilience

3. Role-Based Access Control (RBAC) with Zustand Persistence

4. Zero-404 GitHub Pages SPA Deployment Architecture

💻 Tech Stack & Dependencies

📁 Repository Structure

⚡ Quickstart & Local Development

Prerequisites

1. Clone & Install

2. Run the Development Server

3. Production Build & Local Preview

4. Running the Optional Backend Server (Node.js + MySQL)

🚀 GitHub Pages Deployment Guide

🧭 Direct Portal Navigation Links:

Option A: Automated CI/CD via GitHub Actions (Recommended)

Option B: Manual One-Command Deployment via CLI (`gh-pages`)

🛡️ Zero-404 Routing Architecture

🤝 Contribution Guidelines

📜 License & Acknowledgments

About

Releases

Packages

Contributors

Languages

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
build		build
docs/screenshots		docs/screenshots
public		public
server		server
src		src
.gitignore		.gitignore
README.md		README.md
index.html		index.html
npm run dev.bat		npm run dev.bat
package-lock.json		package-lock.json
package.json		package.json
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation

🍽️ TableHUB

The Next-Generation Luxury Restaurant Operating System & Table Reservation Engine

🌟 Executive Summary & Philosophy

🔑 Role-Based Access & Demo Credentials

💡 Real Login Page with Role Hints & Helpers:

🏷️ GitHub Repository "About" Metadata

📐 System Architecture

📸 Visual Showcase

1. Consumer Discovery & Landing Experience

2. High-Fidelity Booking Flow

3. Restaurant Operating System (Portal)

4. Super-Admin Platform Command Center

🛠️ Technical Deep Dives

1. Spatial Table & Slot Allocation Engine

2. Spline 3D Scene & WebGL Resilience

3. Role-Based Access Control (RBAC) with Zustand Persistence

4. Zero-404 GitHub Pages SPA Deployment Architecture

💻 Tech Stack & Dependencies

📁 Repository Structure

⚡ Quickstart & Local Development

Prerequisites

1. Clone & Install

2. Run the Development Server

3. Production Build & Local Preview

4. Running the Optional Backend Server (Node.js + MySQL)

🚀 GitHub Pages Deployment Guide

🧭 Direct Portal Navigation Links:

Option A: Automated CI/CD via GitHub Actions (Recommended)

Option B: Manual One-Command Deployment via CLI (gh-pages)

🛡️ Zero-404 Routing Architecture

🤝 Contribution Guidelines

📜 License & Acknowledgments

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

Option B: Manual One-Command Deployment via CLI (`gh-pages`)