DEV Community

Cover image for GitQuest: Visual Interactive Git DAG Simulator & Adventure Game
dipak agrahari
dipak agrahari

Posted on

GitQuest: Visual Interactive Git DAG Simulator & Adventure Game

#hf26challenge #webdev #opensource #devchallenge

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

Git can be overwhelming when you're just starting out. You run commands like git commit, git branch, or git merge, but what actually happens behind the scenes remains invisible. What is HEAD? How do branches point to commits? Why do merge conflicts happen?

I built GitQuest, an interactive visual simulator and puzzle adventure that teaches version control from absolute zero.

Instead of throwing users into an abstract command line, GitQuest pairs a live Git repository directly with a tactile 2D arcade world. Players configure files, stage changes (git add), save checkpoints (git commit), create branches, resolve 3-way merge conflicts, and push to remotes. Every single operation immediately updates the live commit graph, file staging areas, .git internals, and physically powers conduits and bridges for a runner to reach the goal.

Who Would Pay For It?

  • Engineering Bootcamps & CS Universities: Onboarding cohorts onto Git is notoriously painful and consumes hours of mentor time. A structured, self-paced visual simulator replaces static slide decks with interactive verification.
  • Developer Training & Corporate Onboarding: Engineering teams onboarding junior developers or career switchers can license interactive sandboxes to evaluate practical Git proficiency without breaking company repos.
  • Individual Developers (Freemium/Pro): Self-paced learners who want guided interactive mastery of advanced Git scenarios (interactive rebasing, cherry-picking, complex merge conflict triage).

Demo 

git clone https://gitlab.com/wdipak/gitquest.git
cd gitquest
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Visual Preview

GitQuest Cover

Code

The project is fully open source under the MIT License, built with React, TypeScript, Vite, Tailwind CSS, and Web Audio API for interactive audio feedback.

How I Built It

GitQuest is built around a custom client-side Git virtual machine and world engine:

  • From-Scratch Virtual Workspace: Implements a sandboxed virtual filesystem supporting mkdir, cd, touch, echo, and file inspection.
  • Pure JavaScript Git State Engine: Models Git's true object model (blobs, trees, commits) along with references (refs/heads/*, refs/remotes/*, and HEAD).
  • 3 Dynamic Views:
    1. Commit Map: Real-time visual graph of all commits, branch pointers, and HEAD movements.
    2. File Stages: Visualizes file flow across Working Directory -> Staging Area -> Local Repo -> Remotes.
    3. Behind the Scenes (.git): Interactive inspection of .git/HEAD, .git/refs, and simulated object trees.
  • Tactile Puzzle Progression: A 2D interactive arcade scene where versioned configuration files directly power bridges, gates, and runner routes, paired with multi-level hint systems and fair move-budget scoring.
  • 6 Campaign Missions + Free Play Sandbox: From basic commits to branching, 3-way merging, remote synchronization, conflict resolution, and an open sandbox.

Why Does Open Innovation Matter?

Open innovation is what made Git the foundation of modern software engineering, and it is essential for developer education tools:

  1. Zero Walled Gardens: Anyone can run GitQuest locally, fork it, and add custom curricula or level packs without recurring subscription lock-in or proprietary cloud dependencies.
  2. Transparent Learning: Because the entire simulation engine is open source and client-side, learners can open developer tools to inspect exactly how the virtual Git engine computes graph nodes and commits.
  3. Multi-Forge Neutrality: Real-world software happens across open platforms. Open tooling ensures learners aren't locked into a single proprietary vendor.

Prize Categories

  • Best Use of a .tech Domain

Top comments (0)