NeuroClash GG
AI-powered edutainment platform with auto-battler quiz mechanics
Overview
NeuroClash GG is a web-based gamified educational quiz platform that combines the accessibility of modern quiz applications with the competitive mechanics of an auto-battler game. Created by Team Ditolak Magang, it transforms traditional quiz-taking into an engaging multiplayer experience with real-time 1v1 battles, HP systems, damage calculations, and comeback mechanics. The platform leverages AI via the Gemini API to automatically generate structured multiple-choice questions from user-uploaded PDF materials or system templates, making it both a practical study tool and an exciting competitive game.
Problems
Low student engagement with traditional quiz platforms
Conventional online quiz platforms lack the excitement and competitive elements needed to sustain student motivation. Without engaging game mechanics, students often treat quizzes as chores rather than learning opportunities.
Manual question creation is time-consuming for educators
Teachers and content creators spend significant time writing quiz questions. There is no efficient way to automatically generate structured, difficulty-calibrated questions from existing learning materials like PDF documents.
No comeback mechanics in educational games
Educational games typically lack comeback mechanics, causing losing players to feel hopeless and disengage. A fair system that gives trailing players a chance to recover was needed to maintain engagement throughout the game.
Synchronizing real-time game state across multiple players
Building a real-time multiplayer quiz game with synchronized timers, simultaneous answer submissions, and live damage calculations presented significant technical challenges in state management and WebSocket coordination.
Solutions
Auto-battler game loop with competitive mechanics
Designed a complete game loop inspired by auto-battler games: Warm-up Phase → 1v1 Battle Phase (real-time matchmaking, speed-based damage) → StarBox Comeback Phase (lowest HP gets priority on power-ups). Features Solo mode against an adaptive AI bot (Prof. Bubu) and Multiplayer mode supporting 1v1 and 1v1v1 matches.
AI-powered question generation from PDFs
Integrated Google Gemini API to automatically process uploaded PDF documents or system templates, extracting key concepts and generating structured multiple-choice questions in JSON format complete with answer keys, distractors, and difficulty levels.
StarBox comeback mechanic for fair play
Implemented the StarBox system that appears at specific intervals (every 5 rounds). The player with the lowest HP gets priority to choose powerful game-changing items — Knowledge Book (damage boost), Healing Potion (HP recovery), or Strong Shield (damage reduction) — enabling dramatic comebacks.
Route-Repository-Service architecture with real-time sync
Adopted RRS Clean Architecture pattern separating API routes, business logic (services), and data access (repositories). Used Supabase Realtime/WebSockets for timer synchronization, 1v1 damage broadcasting, and live leaderboard updates across all connected clients.
Contributions
Architected the full application following Route-Repository-Service (RRS) Clean Architecture pattern across the Next.js codebase
Developed the multiplayer game engine with real-time 1v1 and 1v1v1 matchmaking, synchronized timers, and live damage calculation via Supabase Realtime WebSockets
Built the AI question generation pipeline integrated with Google Gemini API — processing PDF uploads and system templates into structured multiple-choice questions
Implemented the StarBox comeback mechanic with power-up items (Knowledge Book, Healing Potion, Strong Shield) that give trailing players competitive advantages
Designed and built the Solo mode with an adaptive AI opponent (Prof. Bubu) for offline practice and skill development
Created the arena management system for hosts — material selection, room configuration (15/20/40 max players), question count, and room code generation
Built the real-time dashboard with live leaderboard, HP tracking, 2D avatar selection, and round-by-round game state visualization
Implemented Zustand stores for client-side state management, handling session data and real-time UI synchronization
Features
AI Question Generator
Automatically generates structured multiple-choice questions from uploaded PDFs or system templates using Google Gemini API
1v1 Battle Mode
Real-time multiplayer battles where speed and accuracy determine damage — fastest correct answer deals damage to opponents
Solo vs Prof. Bubu
Practice offline against an adaptive AI bot with adjustable difficulty for independent skill development
StarBox Comeback
Every 5 rounds, trailing players get priority to pick power-ups: Knowledge Book, Healing Potion, or Strong Shield
Material Customization
Hosts choose from default system materials (e.g., Basic Programming) or upload custom PDF documents for question generation
Avatar Selection
2D avatar selection screen before matches for personalization and player identity
Tech Stack
- Next.js
- TypeScript
- Supabase
- Zustand
- Gemini
- Tailwind CSS
- Websocket
Gallery
1 / 10
Results
Multiplayer Game Engine
Successfully delivered a real-time multiplayer auto-battler quiz platform with synchronized game state across all connected players
AI-Powered Question Generation
Gemini API integration enables automatic question generation from PDF materials, eliminating manual question creation
Clean RRS Architecture
Route-Repository-Service pattern ensures maintainable, testable, and well-separated code with clear ownership across layers
Real-Time Synchronization
Supabase Realtime WebSockets deliver sub-second game state updates for timers, damage, and leaderboard changes