A few months ago, I published a case study on Dev.to about building MMA XOX, a real time multiplayer Tic-Tac-Toe game powered by React and Firebase.
What started as a simple weekend project has undergone a massive engineering overhaul. Today, it has evolved into MMA Guess, a full-fledged MMA gaming platform featuring 9+ game modes, a complete fighter and event database, interactive career timelines, multi-language support, and optimized 60fps performance across devices.
Here is a breakdown of how the architecture scaled, how we tackled complex multi-game state management, performance optimizations, and the UI/UX decisions made along the way.
1. Scaling the State Management across 9+ Game Modes
Moving from a single Tic-Tac-Toe engine to an ecosystem of distinct game mechanics required completely decoupling our game logic from the UI. Each mode now operates as an isolated state machine with its own lifecycle, scoring algorithms, and streak mechanics.
Key Modes & State Mechanics:
- Higher or Lower: Players compare two fighters based on career statistics (wins, knockouts, age, reach, etc.). We implemented independent streak multipliers, life counters, animated numerical counters, dynamic difficulty levels, and gender filtering (Male / Female / All).
- Guess the Fighter: A search-driven trivia mode. Includes auto-complete search indexing, hint systems, guess history trails, visual feedback on correctness, and daily challenge states.
- Rank the Fighters: Tests stat awareness by requiring players to order a set of fighters based on specific metrics before submitting for server-side evaluation.
- Career Timeline: A card-based chronological timeline builder featuring drag-and-drop / card-sequencing logic representing iconic fights in a fighter's career.
Guess the Event / Co-Main & Daily Challenges: Time-sensitive event predictions and daily streak tracking.
// Standardized state structure across independent game modes
interface GameState {
currentRound: number;
score: number;
highScore: number;
streak: number;
lives: number;
difficulty: 'easy' | 'medium' | 'hard';
genderFilter: 'male' | 'female' | 'all';
isDailyCompleted: boolean;
gameStatus: 'idle' | 'playing' | 'won' | 'lost';
}
Managing state across 9+ modes meant standardizing loading/error boundaries, modal overlays, reset handlers, and hint windows without polluting global application context.
2. Interactive Career Timelines & Data Hub
Beyond quick mini-games, we turned the platform into an interactive MMA Data Hub:
- Fighter & Event Database: Dedicated detail pages containing fighter biographies, career fight logs, head-to-head records, upcoming event cards, and real-time rankings.
- Career Timeline UI: Custom card entry/exit animations, timeline connectors, and smooth transitions built to keep players immersed in a fighter's historical record.
- Leaderboards & Favorites: Global user rankings and local-storage/Firebase synced favorite fighter tracking.
3. UI/UX Refinements & 0-Dependency CSS Animations
To maintain a smooth 60fps user experience across mobile and desktop devices without bloating our bundle size with heavy external animation libraries, we prioritized native CSS transitions and keyframes:
- Visual Feedback: Custom shake animations on incorrect guesses, color flashes on correct answers, and scale hover effects on interactive cards.
- State Loading: Custom SVG logo spinners, skeleton fallback loaders, and image error state handlers (preventing broken image icons when fighter headshots fail to load).
- Theming & i18n: Full Dark/Light mode switching and multi-language translation files (i18n) covering all game modes, rules, error messages, and modals.
4. Frontend Performance & Bundle Optimization
As the feature set grew, initial load times and Core Web Vitals became top priorities. We applied several optimization strategies:
- Route & Component Level Lazy Loading: Dynamically importing non-critical game modes and database pages using React.lazy() and Suspense.
- Vendor Bundle Splitting: Partitioning heavy dependencies (React core, Firebase SDK, i18n, UI icons) into separate chunks in the build pipeline.
- Asset & Image Optimization: Enforcing strict container sizing to avoid Cumulative Layout Shift (CLS) and managing fallback image states.
- Real-time Monitoring: Integrated Vercel Analytics and Speed Insights to track real-world performance metrics across regions.
💡 Summary & Next Steps
Decoupling game logic, keeping third-party animation dependencies at zero, and focusing on user state UX transformed a simple 3x3 grid game into a complete platform.
Feel free to test out the game and share your thoughts:
- 🎮 Live Platform: mmaguess.com
I’d love to hear your feedback or any new game modes you'd like to see added next!
