HomeEventsFightersVideos

A1 Combat System Documentation

Comprehensive technical documentation for developers and stakeholders

Last Updated: December 2025 | Version: 1.0

System Overview

A1 Combat is a full-stack MMA promotion management platform built on Base44's Backend-as-a-Service architecture. The system manages fighters, events, fights, videos, news, and organizational data with role-based access control.

Core Design Principles

  • Entity-Centric Architecture: All data is managed through Base44 entity system with automatic CRUD operations
  • Component-Driven UI: Modular React components with shared UI library (shadcn/ui)
  • Real-Time Data: React Query for caching, optimistic updates, and real-time synchronization
  • Role-Based Access: Admin vs public views with authentication-based permissions
  • Responsive Design: Mobile-first approach using Tailwind CSS utility classes

System Architecture Diagram

┌─────────────────────────────────────────────────────────────┐
│                     Frontend Layer (React)                   │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ Public Pages │  │ Admin Pages  │  │  Components  │      │
│  │ - Home       │  │ - Manage*    │  │ - FighterCard│      │
│  │ - Fighters   │  │ - Bulk Tools │  │ - EventCard  │      │
│  │ - Events     │  │ - Import     │  │ - VideoCard  │      │
│  │ - Videos     │  │              │  │              │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘
                            ↕
┌─────────────────────────────────────────────────────────────┐
│                   Data Layer (React Query)                   │
│  - Caching Strategy  - Optimistic Updates  - Invalidation   │
└─────────────────────────────────────────────────────────────┘
                            ↕
┌─────────────────────────────────────────────────────────────┐
│                  Base44 Backend Platform                     │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │   Entities   │  │ Auth & Users │  │ Integrations │      │
│  │ - Fighter    │  │ - Admin/User │  │ - UploadFile │      │
│  │ - Event      │  │ - JWT/OAuth  │  │ - InvokeLLM  │      │
│  │ - Video      │  │              │  │ - SendEmail  │      │
│  │ - 12 total   │  │              │  │ - GenImage   │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘
                            ↕
┌─────────────────────────────────────────────────────────────┐
│                    Storage & Database                        │
│  - PostgreSQL (Entities) - Supabase Storage (Media Files)   │
└─────────────────────────────────────────────────────────────┘

Core Modules

Fighter Management

Complete fighter profiles with records, stats, media galleries, and fight history

  • •Profile CRUD
  • •Records tracking
  • •Image galleries
  • •Social links
  • •Gym/Coach associations

Event Management

Event scheduling, fight cards, results, and media

  • •Event CRUD
  • •Fight card builder
  • •Results tracking
  • •Poster management
  • •Stream integration

Video Library

Categorized video content with tagging and filtering

  • •Multi-category videos
  • •Fighter/Event tagging
  • •YouTube integration
  • •Viral moments
  • •Full streams

News & Media

News articles, fighter galleries, and content management

  • •Article management
  • •Media tagging
  • •Display ordering
  • •Event association

Title History

Championship lineage and title fight records

  • •Title fight tracking
  • •Defense counting
  • •Weight class history
  • •Pro/Amateur divisions

Organization

Gyms, coaches, and sponsors

  • •Gym profiles
  • •Coach profiles
  • •Sponsor management
  • •Association tracking

Data Flow & Interactions

Typical User Flow: Viewing Fighter Profile

  1. User navigates to Fighters page → React Router loads pages/Fighters.js
  2. Component calls base44.entities.Fighter.list() via React Query
  3. React Query caches response and provides to component
  4. User clicks fighter card → FighterModal opens with fighter data
  5. User clicks "View Full Profile" → Navigates to FighterStats page
  6. FighterStats fetches related data: fights, videos, pictures, news
  7. All queries are cached and managed by React Query

Admin Flow: Creating Event

  1. Admin navigates to ManageEvents page (auth required)
  2. Clicks "Add Event" → Opens dialog with form
  3. Fills event details and uploads poster via base44.integrations.Core.UploadFile
  4. Submits form → base44.entities.Event.create() called via mutation
  5. React Query invalidates event cache and refetches
  6. Admin can then add fights to the event via fight card builder
base44
Edit with Base44