Getting Started

Introduction

SeatSquirrel is an interactive seat map designer and picker application built with React, TypeScript, and Konva.js for canvas rendering.

The application provides a unified interface with full multi-tenant organization support:

• Layouts Page (/app/layouts): Centralized dashboard to view, create, and manage all venue layouts
• Designer Mode (/app/designer/[id]): Create and edit venue seating layouts with row-based seat tools, areas, and shape annotations
• Picker Mode (/app/picker/[id]): High-performance end-user interface for selecting seats from database-stored layouts
• Organization Management (/organization/*): Multi-tenant organization system with domain-based access control

Quick Start

For Designers

1. Navigate to the Layouts page from the navigation bar
2. Click New Layout to create a venue
3. Use the toolbar to add rows, areas, and shapes to your venue layout
4. Configure pricing categories and sections
5. Save your layout to the database

For End Users

1. Navigate to the Layouts page and click Preview on a layout
2. Configure pricing if needed
3. Browse available seats and areas
4. Click to select seats or areas
5. View your selection in the cart panel

Key Features

• Row-Based Seat System: All seats are organized into rows with flexible configurations
• Bookable Areas: Create areas with different purchase types and pricing methods
• Shape Drawing Tools: Add visual elements like rectangles, circles, lines, and custom shapes
• Multi-Pricing Support: Assign multiple pricing categories to seats and areas
• Undo/Redo System: Full state history management with keyboard shortcuts
• High Performance: Optimized canvas rendering for 1000+ seats at 60fps

Technology Stack

• Framework: Next.js 15 with App Router
• Canvas: Konva.js + react-konva
• State Management: Zustand
• Authentication: Better Auth with Better Auth UI
• Database: PostgreSQL (Neon) with Drizzle ORM
• Styling: Tailwind CSS 4

Next Steps