GitQuest: Visual Interactive Git & GitHub DAG Simulator

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 game that teaches version control from absolute zero.

Instead of throwing users into a pre-configured setup, GitQuest starts with an empty canvas and lets developers create directories (mkdir), initialize Git (git init), stage files, make commits, branch, merge, resolve 3-way conflicts, and push to both GitLab and GitHub remotes. Every single command updates a live Directed Acyclic Graph (DAG) and .git internals tree in real time.

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

Play Live in Browser: https://wdipak.gitlab.io/gitquest/
Local Run: Run GitQuest locally in seconds:

git clone https://gitlab.com/wdipak/gitquest.git cd gitquest npm install npm run dev

Visual Preview

Code

GitLab (Primary): https://gitlab.com/wdipak/gitquest
GitHub (Mirror): https://github.com/sea-deep/gitquest

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 DAG 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. DAG Graph: Real-time visual graph of all commits, branch pointers, and HEAD movements.
2. 3-Tree Lifecycle: Visualizes file flow across Working Directory -> Staging Area -> Local Repo -> Remotes.
3. .git Internals Inspector: Interactive inspection of .git/HEAD, .git/refs, and simulated git cat-file -p outputs.
6 Progression Stages: From project genesis to branching, 3-way merging, multi-forge remotes (GitLab & GitHub), merge conflict resolution, and an unrestricted sandbox.
Quick Completion Macro Tools: Added interactive shortcuts (⚡ Auto Step, 🚀 Solve Stage, 🏆 Master All Levels) for instant verification and exploration.

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:

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.
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.
Multi-Forge Neutrality: Real-world software happens across both GitLab and GitHub. Open tooling ensures learners aren't locked into a single proprietary vendor.