Next.js App Structure
The BBX platform is built using the Next.js App Router, leveraging dynamic routing to provide unique, persistent URLs for every tournament hosted on the platform. The application is divided into two main areas: global discovery and tournament-specific management.
Directory Structure Overview
The web application follows the standard Next.js directory convention under the web/app folder.
- Root (
/): Tournament discovery and global landing page. - Creation (
/create): Workflow for initializing new tournament instances. - Dynamic Context (
/t/[id]): The core of the application where[id]represents the unique tournament ID or slug. All features for a specific tournament live within this hierarchy.
Core Routes & Navigation
Global Routes
| Path | Purpose | Visibility |
| :--- | :--- | :--- |
| / | Landing page listing active and past tournaments. | Public |
| /create | Interface to launch a new tournament. | Public |
| /standings | Global Swiss standings (often used for testing or single-tournament modes). | Public |
Tournament-Specific Routes (/t/[id])
These routes automatically fetch data based on the tournament ID provided in the URL.
| Path | Purpose | Usage |
| :--- | :--- | :--- |
| /t/[id] | Tournament Dashboard. High-level stats, participant counts, and navigation to sub-views. | Public |
| /t/[id]/bracket | Live Bracket. Displays the Swiss rounds or the Top Cut elimination tree. | Public |
| /t/[id]/admin | Admin Console. The command center for organizers to manage registration and score matches. | Organizer |
| /t/[id]/projector | Public Display. A specialized high-contrast view designed for projectors at physical venues. | Organizer |
Page Definitions & Features
Tournament Dashboard (/t/[id])
The landing page for participants. It provides an overview of the tournament's status (Registration, In-Progress, or Completed) and quick links to the bracket and standings.
Admin Console (/t/[id]/admin)
This is the protected interface for tournament organizers. It is divided into several management modules:
- Registration Management: Toggle registration open/closed and manually add or remove participants.
- Match Scoring: Report scores for pending matches.
- Round Advancement: A "Dangerous Zone" feature that allows the admin to conclude the current round and generate the next set of pairings.
- Tournament Lifecycle: Tools to start the tournament (which seeds the initial bracket) and conclude it to crown a champion.
// Example: Navigation to Admin Console
// Accessing the admin panel for tournament "my-summer-slam"
url: /t/my-summer-slam/admin
Tournament Bracket (/t/[id]/bracket)
A dynamic visualization tool that adapts based on the tournament stage:
- Swiss View: Displays pairings for the current and previous Swiss rounds.
- Top Cut View: Renders a traditional elimination tree (Quarterfinals, Semifinals, Finals) once the tournament enters the playoff stage.
- Connector Logic: Automatically draws paths between match nodes to show player progression.
Projector View (/t/[id]/projector)
A dedicated route optimized for large-scale displays. It strips away standard navigation and focuses on "Now Playing" matches and current rankings, ensuring participants at a live event can easily find their pairings.
Dynamic Data Loading
The application uses the useTournament hook internally within these routes to ensure data consistency. When a user navigates to any /t/[id]/* route:
- The
id(or slug) is parsed from the URL. - The tournament metadata is fetched from Supabase.
- Participants and matches specific to that ID are populated across the dashboard, bracket, and admin views.