ProChamps

A fast-paced football chairman simulator built natively for Reddit feeds. Upgrade your stadium, scout youth stars, and play interactive Phaser match days with real-time tactical manager shouts!

Comment

Inspiration

ProChamps was born from a desire to combine the addictive, numbers-heavy mechanical depth of retro text managers like Football Chairman with the raw, conversational energy of Reddit's sports communities. We wanted to move past the traditional static widget model of feed apps and create a living, breathing non-league to top-flight football management simulation that lives natively inside a standard Reddit post frame.

To capture that authentic platform atmosphere, we completely threw out dry simulation text boxes and replaced our post-match reviews with dynamic, simulated upvoted/downvoted fan feedback matching the chaotic energy of communities like /r/soccer.

What it does

ProChamps is an immersive, fast-paced football chairman management simulation built natively to live and play right inside your Reddit feed. Players take control of a cash-strapped, non-league football club and attempt to navigate it through 7 competitive divisions to achieve top-tier glory. As chairman, you handle the macro infrastructure of the club: balancing weekly wage bills against matchday gate receipts, negotiating sponsor contracts, upgrading stadium capacity, and expanding your Youth Academy facilities.

When match day hits, the game transforms via an ultra-polished broadcast and club management ecosystem:

  • Pre-Match Lineup Ritual: Before the whistle blows, the engine locks onto a 3-second static formation map, displaying both squads lined up in their tactical shapes on the pitch with miniature name tags hovering above them.
  • The Phaser 2D Match Visualizer: Players watch a live gameplay engine where plain debug circles are replaced by programmatically drawn Retro Jersey Graphics. Kits utilize team color palettes with crisp number markers and distinct neon-colored Goalkeeper tracking blocks.
  • In-Game Manager Shouts: Players actively deploy dynamic touchline shouts ("DEMAND MORE", "PARK THE BUS", "ALL OUT ATTACK") to inject instant mathematical multipliers into the gameplay matrix, visually shifting tactical lines on the fly.
  • Interactive Penalty Shootouts: If a cup match ends in a tie, players must manually crosshair-aim their strikes and time a dynamic power bar against a responsive, predictive goalkeeper AI path.
  • In-Feed Notification Hub: A dedicated notification bell with an active unread badge counter actively polls the backend serverless registry every 30 seconds, allowing actionable alerts to route users to targeted management tabs instantly.
  • Tactics Board & Style Selector: A custom visual pitch overlay inside the squad suite renders your starting eleven dynamically, offering real-time selection controls across core shapes (4-4-2, 4-3-3, 5-3-2, 3-5-2) and systemic playing philosophies.
  • Historical Match Ledger & Standings Modals: Features a scrollable, replayable historical ledger displaying past match results with color-coded outcome anchors alongside modular popup tables evaluating detailed league standings and corporate financial metrics.

To bring the community together natively without the friction of clipboards, the app features a fully automated In-App Community Showcase & Global Leaderboard. While clubs still serialize down to a portable alphanumeric Club Challenge String (PROCHAMPS-v1-<base64>), players can publish their squad directly to a shared index. Users browse real community profiles, track a live global Top 5 Leaderboard sorted automatically by upvote metrics, and launch instant exhibition matches against real user teams with a single click.

Furthermore, the game integrates the platform's social graph directly into the gameplay engine via Live Subreddit Reputation Multipliers. Competing against a club tied to a real-world community (like /r/Gunners or /r/reddevils) pulls active platform metadata to dynamically alter home-field simulation advantage metrics.

How we built it

ProChamps was constructed using a highly modularized, decoupled web-to-server layout architecture across 303 modules:

  • The Frontend Interface: Built using Devvit Web (React and TypeScript) to manage real-time financial tracking cards, transfer market logic, facility modules, and contextual navigation overlays. To fix visual bugs where confirmation alerts lingered indefinitely, we engineered a self-clearing toast system driven by a React useEffect hook and automated setTimeout cleanup lifecycles.
  • The Arcade Layer: Powered by the Phaser 2D framework. To match production-grade engineering standards, we broke down a monolithic code layout by cleanly splitting the game engine into isolated, dedicated scene files: LoadingScene.ts, MatchScene.ts, PostMatchScene.ts, and PenaltyScene.ts. All assets, color arrays, and shapes are drawn vectors generated programmatically via Phaser's native graphics tools.
  • The Server & Storage Layer: Driven by Reddit’s serverless platform architecture and native @devvit/redis integration. We deployed robust backend REST endpoints (GET /api/community/leaderboard, /api/match/history, /api/formation, and /api/style) that interface with global Redis Hashes and Sorted Sets to handle automated multiplayer matchmaking queues, style updates, and upvote ranking data.
  • The Platform Graph Integration: We leveraged Devvit’s native network tools (context.reddit.getSubredditInfoByName) to fetch active subscriber metrics. This data feeds into a server-side scaling function to compute team advantage modifiers dynamically:

$$ \text{Reputation Bonus} = \log_{10}(\text{subscribers}) \times 0.05 $$

  • Procedural Sound Design: We eliminated bloated static audio asset files entirely by developing a completely programmatic audio system via the Web Audio API (playTone, playNoise) that synthesizes authentic crowds, referee whistles, kicks, and stadium boos directly on the client.

Challenges we ran into

Our primary technical roadblocks centered around layout boundaries, asynchronous data mapping, and architectural refactoring:

  1. Viewport Constraints and UI Overflow: Devvit applications run inside tightly locked viewports within the Reddit mobile app and desktop feeds. Early alerts and notifications like the Daily Sponsor Chest confirmation were clipping or blocking layout real estate indefinitely. We resolved this by building a strict parent flexbox column architecture, converting the inner data grids into independent vertical scrolling tracks (overflow-y: auto), and writing self-destructing layout timers to slide text popups safely off-screen.
  2. Scene Modularization and State Persistence: Breaking a monolithic rendering framework down into standalone scene files inside src/client/scenes/ introduced severe data-sharing issues during early compilation steps. Phaser scenes clear memory caches on transition. We bypassed this by leveraging Phaser's global data registry cache (this.game.registry), allowing match stats, penalty matrices, and squad parameters to transfer flawlessly across file boundaries without regression.
  3. API Rate Boundaries and Data Fallbacks: Querying live subreddit metadata and running sorted Redis leaderboard evaluations in the middle of high-velocity script calculations threatened to trigger severe API rate limits or complete game crashes. We implemented robust try-catch logging boundaries around our asynchronous network requests, establishing safe baseline fallbacks and parent-scoped sorting tracks so loops remain operational under any performance conditions.

Accomplishments that we're proud of

We are incredibly proud of several core achievements that elevate this prototype into an ecosystem-ready product:

  • Zero-Friction In-App Matchmaking: Demolishing clipboard copy-paste friction entirely. We built a fully automated user-generated content cycle where one user’s administrative progression instantly registers as playable, clickable "boss-fight" content for another user via global Redis caches and a shared live leaderboard.
  • Production-Grade Engineering Separation: Transitioning from a crowded single-file visualizer to a cleanly separated, decoupled folder architecture of dedicated Phaser scenes and granular backend route handlers, keeping our 303-module codebase incredibly scannable, lightweight, and professional.
  • Assetless Visual Identity: Achieving a highly recognizable, animated retro sports aesthetic entirely through code—drawing complex jersey graphics and calculating field geometry coordinates dynamically without downloading a single external sprite sheet.
  • The Developer Testing Backdoor: Building an explicit testing hook command (dev_skipTime) directly into our development framework. This allows reviewers and judges evaluating the app to fast-forward server background clocks by 1 or 2.5 hours on command, verifying our long-term scouting retention loops without waiting in real-world time.

What we learned

This project pushed our understanding of modern serverless infrastructures and platform-native engineering frameworks. We gained deep experience working within locked web-view environments and orchestrating global data registries across multi-tenant spaces using Devvit’s Redis architecture.

Additionally, we learned how to treat our host application's environment as a core mechanic—such as utilizing real-time subreddit subscriber counts to dictate in-game home-field advantages and copying real subreddit thread structures for our post-match commentary loops—rather than trying to force a traditional standalone web format where it doesn't belong.

What's next for ProChamps

We have a clear development map to scale the ProChamps architecture even further:

  • App Mention Trigger Integration: Leveraging Devvit's capabilities to introduce a global community bot. Users will be able to tag u/prochamps_bot directly inside active sports subreddits like /r/soccer or /r/Championship to spawn a live, playable match visualizer frame right inside the comment threads of real-world post-match debates.
  • User-Created Custom Tournaments: Expanding our Redis architecture to allow moderators and users to spend in-game capital to host localized knockout cups, inviting 4 to 8 community members to enter their squads into a shared bracket thread.
  • In-App Crest Painter: Insetting a retro, canvas-based pixel-art icon creator within the club onboarding wizard, giving players absolute freedom to design custom club badges that serialize directly into their global data models.

Built With

Share this project:

Updates