Web Apps
CLASH ZONE | كلاش زون
Tactical Entertainment & Laser Tag Arena Booking System
Overview
CLASH ZONE (كلاش زون) is a production-ready portal and booking management system engineered for a tactical entertainment and Laser Tag arena center. Built with React 19, TypeScript, Vite 8, Tailwind CSS v4, and Supabase, it unifies customer reservation workflows with a real-time operational command center. Key capabilities include: 1. **Interactive Calendar & Timelines**: Visual weekly schedule with smooth drag-and-drop booking rescheduling and instant time-slot validation. 2. **Real-Time Analytics & Reporting**: Live metrics tracking total bookings, participant counts, today's schedule, upcoming events, and 7 specialized booking categories (Call Center, New Client, Returning Client, Birthday, University, External Event, School). 3. **PostgreSQL Realtime Synchronization**: Instant live updates across all connected operator screens whenever a booking is created, confirmed, completed, or cancelled. 4. **Authentication Gate & Role-Based Access Control (RBAC)**: Secure Supabase Auth gateway with distinct permission tiers for Admins, Managers, and Employees, plus built-in staff management. 5. **Automated WhatsApp & Phone Workflows**: One-click pre-filled WhatsApp confirmation dispatches and direct phone call triggers from any booking card. 6. **CSV Export with Arabic Excel Support**: Full data export engineered with UTF-8 BOM encoding for seamless Arabic spreadsheet reporting.
Key Features
Built With
Architecture Preview
React 19 + TypeScript + Vite 8
High-velocity modular architecture powered by React 19, strict TypeScript 6, and Tailwind CSS v4 with Floating UI interactions.
Supabase & PostgreSQL Realtime
Cloud PostgreSQL database with Realtime channels pushing live state mutations (New -> Confirmed -> Completed / Cancelled) to connected clients.
Role-Based Access & Staff Portal
Protected routes and role-scoped actions governed by Supabase Auth and employee management policies.
Operations & Export Pipeline
Integrated WhatsApp message templating, direct tel links, and client-side UTF-8 BOM CSV generation.
The Challenge
Managing high-volume arena bookings, group categories, and time-slot changes across multiple call-center and reception staff led to scheduling conflicts and delayed customer confirmations.
The Approach
I engineered a full-stack booking and operations portal using React 19, TypeScript, and Supabase Realtime, combining a drag-and-drop weekly calendar with RBAC authentication and one-click WhatsApp confirmation workflows.
The Outcome
Eliminated double-bookings through live PostgreSQL synchronization, accelerated customer confirmation times via automated WhatsApp actions, and gave management instant visibility into daily capacity and category analytics.
Gallery
