git-interactive

An interactive, in-browser sandbox for learning Git by doing — from your first commit all the way to advanced workflows. Type real Git commands into a simulated terminal and watch the working directory, staging area, repository, and commit graph update live. Earn XP, level up, and unlock badges as you go. No actual repo required.

Built with React + TypeScript + Vite.

Features

• Live Git simulation engine — an in-memory model of the working directory, staging area (index), commits, branches, tags, stashes, reflog, and a remote.
• Interactive terminal with command history (↑/↓) supporting a broad subset of Git plus a few shell helpers — including merge-conflict simulation.
• Visual repository state — see files flow from working dir → staging → repository, colour-coded by status (untracked, modified, staged, committed).
• Commit graph showing branches, tags, HEAD, hashes, and messages.
• Reward-based learning — every lesson awards XP. Climb ranks from Git Newbie to Git Wizard, keep a daily streak, and unlock achievement badges. Progress is saved to localStorage, so your individual journey persists between visits.

Curriculum (21 lessons across 4 tiers)

• Beginner — init, first commit, tracking changes, .gitignore, unstaging.
• Intermediate — branching, fast-forward & three-way merges, resolving merge conflicts, stashing, tagging.
• Advanced — amend, reset (--soft/--mixed/--hard), revert, cherry-pick, rebase, recovering lost commits with the reflog.
• Workflows & Strategies — remotes (clone/push/pull), feature-branch workflow, Git Flow, and trunk-based development.

Each lesson loads a prepared starting repository and validates your progress live.

Supported commands

git init | status | add <file>|. | rm [--cached] <file> | restore [--staged] <file>
git commit -m "msg" [--amend] | log [--oneline] | diff
git branch [name] [-d name] | checkout [-b] <name> | switch [-c] <name>
git merge <branch> | rebase <branch> | cherry-pick <ref> | revert <ref>
git reset [--soft|--mixed|--hard] <ref> | tag [name] [-d name]
git stash [push|pop|list] | reflog
git clone <url> | remote add origin <url> | push [-u] | fetch | pull
touch <file> | echo "text" > file | echo "text" >> file
cat <file> | ls | rm <file> | clear | help

Getting started

npm install
npm run dev      # start the dev server
npm run build    # type-check + production build
npm run preview  # preview the production build

Then open the printed local URL (default: http://localhost:5173).

Project structure

src/
  git/
    gitEngine.ts    # the Git simulation (pure functions over RepoState) + runScript
    types.ts        # shared types
  lessons/
    lessons.ts      # lesson definitions, difficulty tiers, XP + per-step validators
  progress/
    progress.ts     # XP/levels/ranks, badges, streaks + localStorage persistence
  components/
    Terminal.tsx    # command input + output log
    AreasView.tsx   # working dir / staging / repository
    CommitGraph.tsx # branch & commit visualization
    LessonPanel.tsx # curriculum library + active-lesson checklist
    PlayerBar.tsx   # level/XP/streak/badges header widget
    BadgesModal.tsx # achievements grid
    Toasts.tsx      # XP / badge / level-up notifications
    Confetti.tsx    # celebratory burst on lesson completion
  App.tsx           # layout + state wiring + reward logic