Mejakita Community & Mini-Games

Case Study

Problem

The Mejakita online student community delivers digital learning materials to students across Indonesia. To make self-study engaging and enjoyable, Mejakita incorporated educational gamification through web-based mini-games (notably Kitty Attack, a 4-level progressive action mini-game where players navigate a kitty avatar jumping across obstacles and defeating monsters). The core engineering challenge was bridging client-side game engines (Phaser.js) with the community web application (Next.js) and low-latency backend services: game scores had to be captured, validated, and aggregated into a national Top-10 leaderboard without overwhelming the relational database during peak school hours.

My role

During my software engineering internship at PT Mejakita Edunusa Mandiri, I contributed across game level design, client score dispatch pipelines, and leaderboard infrastructure:

• Interactive Mini-Game Engineering (Phaser.js): Programmed multi-level gameplay scenes for Kitty Attack (Scenes 1 through 4), configuring sprite physics bodies, monster wave spawning, hitbox collision logic, audio effects, and in-game score scoring rules.
• Client Score Pipeline Integration: Wired level-complete and game-over state hooks into the postScore() helper to transmit authenticated score payloads to the leaderboard REST service.
• Leaderboard Aggregation & In-Memory Caching (Node.js & LRU Cache): Built the score ingestion API and Top-10 leaderboard endpoints, protected by in-memory caching (lru-cache) to minimize full-table aggregation sweeps on MySQL.
• Deterministic Rank Tie-Breaking: Formulated fair ranking queries ensuring identical top scores are prioritized chronologically by earliest recorded completion timestamp (created_at ASC) or shortest elapsed duration.
• Gamification & Badging Integration: Associated gameplay milestones with community badging tiers (Starting, Active, Proficient, and Expert) on the Next.js student portal.

System architecture

The ecosystem links rich browser canvas game loops with high-throughput backend services:

• Frontend & Game Client (Next.js & Phaser.js): The community web app dynamically mounts the Phaser HTML5 canvas. Sprite sheets, sound assets, and input events (keyboard jumps and attacks) run smoothly at 60 FPS in the browser.
• Centralized Score Pipeline: At session termination, client hooks dispatch scores via fetch to /api/leaderboard.
• In-Memory LRU Cache: Caches serialized Top-10 snapshots per game category to fulfill thousands of concurrent student requests in sub-millisecond latencies.
• Relational Persistence (MySQL): Retains immutable historical game session logs, recording student IDs, scores, and timestamps for performance tracking and badge unlocks.

Key modules & endpoints

Technical challenges

1. Reconciling Phaser.js lifecycles with Next.js SSR. Phaser requires direct access to browser primitives (window, document) that are undefined during Next.js Server-Side Rendering. We wrapped game canvas initialization inside dynamic imports configured with { ssr: false }, ensuring engine components load strictly on the client post-hydration.

2. Mitigating aggregation query strain during peak classroom competition. When hundreds of students complete mini-game sessions simultaneously, frequent dashboard reloads create sudden spikes in ranking queries. Introducing an In-Memory LRU Cache on the Node.js layer buffers read requests, re-executing MySQL grouping queries only upon cache expiration or when a submitted score displaces the tenth rank threshold.

3. Fair play & preventing client-side score forgery. Client-side web games can be susceptible to console manipulation. The ingestion endpoint verifies submitted values against maximum achievable theoretical score limits per game round and inspects legitimate session authentication before persisting scores.

Future improvements

• Migrate to Redis Sorted Sets (ZADD, ZREVRANGE) for distributed, real-time leaderboard ordering at massive scale.
• Integrate WebSockets to stream live rank changes and podium shifts directly to user screens.
• Introduce customizable leaderboard timeframes (Daily, Weekly, Monthly, and All-Time records).