Executive Summary
The ITF Mobile Platform is an enterprise-grade mobile application designed for the International Taekwon-Do Federation. Built to streamline international tournaments, athlete registrations, and live match scoring, the app serves federations, dojangs (schools), referees, and competitors worldwide.
As the Lead Frontend Engineer, I spearhead 80% of the mobile client architecture and implementation, collaborating directly with the backend team to build a resilient, high-concurrency event management system.
The Challenge
International martial arts tournaments operate in fast-paced, high-pressure environments where connectivity can fluctuate. The organization faced three critical bottlenecks:
- Manual & Fragmented Registrations: Inscriptions across hundreds of categories were handled via spreadsheets, causing human errors and schedule delays.
- Real-Time Bracket Synchronization: Thousands of attendees, coaches, and athletes needed instant visibility into ring assignments, live scores, and next-up alerts.
- Offline Resilience: Sports arenas often suffer from congested network signals; the app needed to maintain score integrity even during temporary network drops.
Technical Architecture & Implementation
1. Cross-Platform Mobile Client (React Native + TypeScript)
- Fluid 60 FPS Performance: Engineered responsive bracket trees and dynamic ring views using optimized list virtualization and native reanimated transitions.
- Strict Type Safety: End-to-end type sharing with TypeScript interfaces mirroring backend DTOs to eliminate runtime data mismatches.
- Offline-First State Management: Local caching and optimistic UI updates to ensure referees and coordinators never lose scoring data during connectivity blips.
2. Real-Time Communication (WebSockets + FastAPI)
- Bidirectional WebSocket channels for low-latency live score propagation.
- Push notifications alert competitors when their bout is 2 matches away from entering the tatami.
3. Component-Driven UI & Design System
- Built with a modern, accessible theme system supporting dark/light environments for indoor stadium lighting.
- High-contrast visual cues for referees and ring judges.
Key Features
- 🏆 Dynamic Bracket Engine: Single-elimination and round-robin interactive tournament brackets with automated advancement.
- ⚡ Live Ring Stream: Instant score tracking per tatami with sub-second sync across devices.
- 🥋 Athlete Profiles & Digital Passports: Belt rank verification, competition history, and digital accreditation passes.
- 📊 Federation Administration: Instant weight-in validation and category seeding tools.
Tech Stack
- Mobile: React Native, Expo, TypeScript, React Navigation
- State & Sync: TanStack Query, Zustand, WebSockets
- Backend Integration: Python, FastAPI, PostgreSQL, Redis
- Styling & Assets: TailwindCSS (NativeWind), Reanimated