Website Case Study: 004

SGMHA Sports Management: Technical Whitepaper

Building a Premium Full-Stack Sports Management System with React, Supabase PostgreSQL & Firebase Hosting.

React 18 Supabase PostgreSQL TypeScript Google OAuth Firebase Hosting
SGMHA Sports Management Platform

Click to view full preview

1. Overview

The SGMHA Sports Management Platform is a premium, full-stack sports management system built to streamline league operations for the South Gauteng Masters Hockey Association. The platform manages 200+ registered players across multiple teams and leagues, handling game scheduling, umpire allocation, team management, and member administration.

Built with React 18, Supabase PostgreSQL, and Firebase Hosting, this system delivers a robust, scalable solution that rivals enterprise-grade platforms. The application features real-time data synchronization, advanced scheduling with conflict detection, role-based access control, Google OAuth integration, and advanced lightning tracking using GEO Weather API for player safety — all while maintaining zero server maintenance costs and 99.9% uptime.

2. The Tech Stack

Frontend

  • >> React 18.3.1 with TypeScript 5.5.3
  • >> Vite 5.4.1 (Lightning-fast builds)
  • >> Radix UI + shadcn/ui components
  • >> Tailwind CSS 3.4.11
  • >> TanStack Query (React Query 5.56.2)
  • >> React Hook Form + Zod validation
  • >> Lucide React icons (1000+ icons)

Backend & Infrastructure

  • >> Supabase 2.49.3 (PostgreSQL 15)
  • >> Row Level Security (RLS) policies
  • >> Real-time WebSocket subscriptions
  • >> Google OAuth 2.0 authentication
  • >> Firebase Hosting (Global CDN)
  • >> Supabase Storage (file uploads)
  • >> GEO Weather API (lightning tracking)
  • >> Recharts 2.12.7 (data visualization)

3. System Architecture

A. Component Architecture

The application follows a modular component structure with role-based access control, separating admin, umpire manager, team manager, and public-facing components.

src/
├── components/
│   ├── admin/          # Admin-only components
│   │   ├── schedule/   # Game scheduling system
│   │   ├── teams/      # Team management
│   │   ├── users/      # User administration
│   │   └── umpires/    # Umpire allocation
│   ├── ui/             # shadcn/ui components
│   └── shared/         # Shared components
├── pages/              # Route-level pages
├── hooks/              # Custom React hooks
├── lib/                # Utilities & configs
└── types/              # TypeScript definitions

B. Database Schema

Supabase PostgreSQL with 8+ core tables:

  • • profiles - User profiles with roles
  • • team_details - Team info & leagues
  • • game_schedules - Games & umpires
  • • fields - Venue information
  • • user_roles - RBAC permissions
  • • notifications - System alerts

C. Authentication Flow

Google OAuth 2.0 via Supabase Auth:

  1. User clicks "Sign in with Google"
  2. Redirect to Google OAuth consent
  3. Google returns authorization code
  4. Supabase exchanges for JWT token
  5. Session stored in localStorage
  6. Auto-refresh before token expiry
  7. RLS policies enforce data access

4. Architecture Diagram

graph TD A[User Browser - React App] -->|HTTPS / OAuth| B[Google OAuth 2.0] B -->|JWT Token| C[Supabase Auth] A -->|GraphQL-like Queries| D[Supabase PostgreSQL] D -->|Row Level Security| E[Database Tables] A -->|WebSocket| F[Supabase Realtime] F -->|Live Updates| A A -->|File Uploads| G[Supabase Storage] H[Admin Dashboard] -->|Vite Build| I[Firebase Hosting CDN] I -->|Serve React App| A D -->|Automated Backups| J[Daily Backups - 7 Day Retention]

5. Key Features

📅 Smart Game Scheduling

  • ✓ Automated conflict detection (duplicate games, field availability)
  • ✓ CSV import/export for bulk operations
  • ✓ Schedule shuffler (randomize times)
  • ✓ Cancellation tracking with required reasons
  • ✓ Multi-team special events support

👥 Umpire Management

  • ✓ Manual assignment (up to 3 umpires/game)
  • ✓ Availability tracking by date
  • ✓ Conflict alerts for overlapping games
  • ✓ Dedicated Umpire Manager role
  • ✓ Utilization statistics dashboard

🏑 Team & Player Management

  • ✓ Team profiles with logo uploads
  • ✓ Player profiles with medical info
  • ✓ QR code generation for check-ins
  • ✓ Document uploads (ID, certificates)
  • ✓ League assignment & standings

🔐 Role-Based Access Control

  • ✓ 5-tier permission system (Super Admin → Player)
  • ✓ PostgreSQL RLS policies at database level
  • ✓ User approval workflow
  • ✓ Account suspension capability
  • ✓ Audit logs with timestamps

6. Performance & Security

Performance Optimizations

  • → Code Splitting: Vite route-based bundles
  • → Lazy Loading: React.lazy() for components
  • → Caching: TanStack Query client-side cache
  • → Database Indexing: Composite indexes on queries
  • → CDN Caching: Firebase global edge network
  • → Real-time Updates: WebSockets reduce polling

Security Measures

  • 🔒 OAuth 2.0: Google authentication
  • 🔒 JWT Tokens: Signed, expiring access tokens
  • 🔒 RLS Policies: Database-level authorization
  • 🔒 HTTPS/TLS 1.3: Encrypted connections
  • 🔒 XSS Protection: React escaping + Zod validation
  • 🔒 Daily Backups: 7-day retention

7. Technical Innovations

Smart Cancellation Reason System

Dialog-driven UX prevents form submission without cancellation reason. Predefined options (Rescheduled, Forfeit, Postponed) ensure consistent reporting, with custom reason support for edge cases. Reasons automatically included in CSV exports with full audit trail.

Real-Time Collaboration

Supabase Realtime WebSocket connections enable live updates across all connected clients. Optimistic UI updates provide instant feedback while background sync ensures data consistency. Last-write-wins conflict resolution with timestamp tracking.

Advanced Form Validation

Zod schema validation provides type-safe runtime validation integrated with React Hook Form for performant, uncontrolled inputs. Custom validators enforce business logic (e.g., end time > start time) with user-friendly, contextual error messages.

⚡ Advanced Lightning Tracking System

Real-time weather monitoring using GEO Weather API integration to collect live lightning strike data. The system displays active weather alerts directly on field pages, ensuring player safety by providing instant visibility of dangerous weather conditions. Automated alerts notify admins and players when lightning is detected within a configurable radius of playing fields.

8. Cost Analysis

Monthly Operational Costs

Firebase Hosting

Global CDN with automatic SSL

$0/month

Supabase Free Tier

500 MB database, 1 GB storage, 50K MAU

$0/month

Google OAuth

No usage fees

$0/month

Domain (sgmha.co.za)

Annual registration

~$10/year

Total Infrastructure Cost

For 200+ active users

$0-25/month

Note: Supabase Pro ($25/month) provides 8 GB database, 100 GB storage, 250 GB bandwidth if scaling beyond free tier limits.

9. Performance Benchmarks

99.9%

Uptime

Firebase + Supabase SLAs

<1s

Page Load Time

Vite optimizations + CDN

200+

Active Users

Zero server maintenance

10. Conclusion

The SGMHA Sports Management Platform demonstrates that by combining React's modern ecosystem, Supabase's powerful PostgreSQL backend, and Firebase's reliable hosting, a development team can deliver a feature-rich, scalable, and secure sports management system that rivals enterprise-grade solutions.

The platform successfully serves 200+ users with 99.9% uptime, sub-second page loads, and zero server maintenance. Key differentiators include Supabase PostgreSQL (not Firestore) for complex relational data, Google OAuth integration for seamless authentication, smart cancellation tracking, dedicated umpire management, and comprehensive CSV import/export capabilities.

Key Achievements:

  • • 200+ active users with 5-tier role-based access control
  • • 100+ games per season with automated conflict detection
  • • Real-time updates via WebSocket subscriptions
  • • $0-25/month infrastructure cost
  • • Advanced scheduling with cancellation tracking

Developed by Casson Media

Visit Live Platform