Skip to content
EdTech

Visual Git Learning Sandbox

Learn branching and merging with a live visual commit graph.

Intermediate14h1–2 people17/20 fit
TL;DR

Build Visual Git Learning Sandbox for programming beginners in ~14h with 1–2 people. Stack: JavaScript + D3 + Next.js.

Why it wins: Fills a real gap in CS education.

Build flow

01 · Problem
Git commands are confusing without seeing what happens.
02 · Solution
Run git commands in a simulated terminal and animate the commit graph, with guided challenges.
03 · Build
  1. 1Model git state
  2. 2Parse commands
  3. 3Animate graph
  4. 4Build challenges
04 · Demo
Run a merge and watch the graph change.

MVP checklist

  • Simulated terminal
  • Graph animation
  • Challenges
  • Undo

Tech stack

TechRole
JavaScriptGame / app logic
D3Tooling
Next.jsFrontend + API routes

Related ideas

More EdTech

  • EdTech

    Algorithm Step Visualizer

    Watch sorting and graph algorithms run step by step with your own input

    Beginner10h1–2
    JavaScriptCanvas
    16/20

  • EdTech

    In-Browser Python Autograder

    Students run and get graded on Python exercises entirely in the browser

    Intermediate16h1–2
    PyodideNext.jsPostgres
    18/20

  • EdTech

    Anonymous Peer Code Review

    Students review each other's code anonymously with a guided checklist

    Intermediate14h2–3
    Next.jsPostgresLLM
    16/20