CTF PlatformFull Stack DevelopmentBranching NarrativeGamification

GameGenesis Challenge — Tech Escape Room Platform

Architected a sophisticated Capture The Flag (CTF) / Branching Narrative Game using Next.js, Node.js, and MongoDB. The platform features a unique state-driven narrative system where player choices between Cybersecurity and Development paths dynamically alter the gameplay experience.

Role
Full Stack Developer & UI Designer
Platform
Web (Player Frontend + Admin Dashboard)
Tools
Next.js 16 (App Router), Node.js, Express, MongoDB, React, Vite, Framer Motion, Tailwind CSS
Timeline
April, 2026

Project Overview

GameGenesis Challenge is a Tech Escape Room project designed to gamify technical assessments and event engagement. Players navigate through an immersive, story-driven 'escape room' where logic and speed are measured under pressure. The unique 'Branching Narrative' system forces players to choose between Cybersecurity or Development paths, which directly affects the puzzles, terminal challenges, and story they encounter, providing a personalized competitive experience.

The Problem

  • Traditional technical assessments are often static and non-engaging for participants
  • Ensuring real-time state persistence across devices while preventing state manipulation
  • Preventing client-side cheating (viewing answers in source) in browser-based puzzles
  • The need for admins to monitor and manage hundreds of concurrent teams in real-time

Final Design Screens

01Player Dashboard & HUD

Immersive dark-mode interface with neon-accented HUD elementsDynamic level rendering based on the team's' chosen pathReal-time mission timelines and progress tracking

02Branching Logic & Terminal

Server-side state machine mapping levels to Cyber/Dev pathsIntegrated terminal challenges for technical logic validationSecure answer submission with sub-200ms validation speed

03Admin Command Center

Real-time team monitoring with remote termination (Quarantine) protocolsLive leaderboard analytics based on level progress and completion timeHigh-performance visualization of team-wide event engagement

My Role

  • Architected the full-stack architecture using Next.js 16 and Node.js
  • Designed a server-side state machine for branching narrative logic
  • Developed a high-performance Admin Command Center for real-time monitoring
  • Implemented secure JWT authentication and server-side validation to prevent cheating
  • Designed a premium 'Cyberpunk' HUD aesthetic using Framer Motion and Tailwind CSS

Experience Goals

  • Create an immersive, story-driven 'escape room' experience
  • Implement a scalable branching narrative system using a server-side state machine
  • Build a secure validation engine where answers are never stored in the frontend
  • Deliver a premium Admin Dashboard with real-time analytics and team control protocols

Design System

Colors
A futuristic 'Cyberpunk' theme featuring deep dark backgrounds, neon cyan accents, and vibrant purple highlights.
Typography
Modern, high-visibility typography (Inter/Orbitron style) optimized for digital HUDs and terminal interfaces.
View Live Demo
View GitHub Repository

"GameGenesis Challenge demonstrates my ability to build high-stakes, full-stack applications that combine complex logic, secure architectures, and premium visual design into a single immersive experience."