I Built a Free Interactive GitHub Learning Platform — Web Guide + Terminal Guide + Git Reference + CLI Sandbox

TL;DR
I built and deployed a free browser-based GitHub learning app with three modes — Web Guide, Terminal Guide, and Git Reference — plus an interactive CLI Sandbox that simulates real Git file state transitions.
🔗 Live: github-onboarding-tutorial.vercel.app

Why I Built This
Git has a reputation for being confusing. Not because the commands are hard to type, but because the mental model is hard to visualize.

What's the difference between staging and committing?
What does "origin" actually mean?
Why does git pull sometimes create a merge commit?

Most resources answer these with text. I wanted to answer them with interaction.

What's Inside
Web Guide — 11 Steps
A visual walkthrough for beginners. Starting from visiting GitHub.com and creating an account, all the way through setting up your profile and understanding the GitHub interface. No terminal required.
Terminal Guide — 16 Steps
A CLI-first learning path. Covers:

Installing GitHub CLI (gh)
Running the login command
Selecting GitHub.com as host
Choosing authentication protocol
Authenticating via browser
Copying the one-time code
Authorizing in browser
Configuring Git identity
Verifying the connection
Cloning a repository
Creating a new branch
Staging and committing
...and more through step 16

Each step has the exact terminal command, a PRO TIP, and Next/Back navigation.
Git Reference — 25 Commands
A searchable Git command encyclopedia. Categories:
CategoryCommandsSetup & Config4Daily Work5Branches & Merging6Team Collaboration4Fix Mistakes3Advanced Tools3
Each command page has:

Functional description
Standard syntax with terminal block
Area Operations Visualizer (which zones does this command touch?)
File State Transition explanation

CLI Sandbox
The crown jewel. An embedded terminal where you type real Git commands and watch simulated file state changes happen live across four zones:
┌─────────────┐ ┌──────────────┐ ┌────────────────┐ ┌─────────────┐
│ WORKSPACE │ → │ STAGING AREA │ → │ LOCAL REPOSITORY│ → │ REMOTE REPO │
│ (Unsaved) │ │ (Index) │ │(Commits History)│ │(GitHub Cloud│
└─────────────┘ └──────────────┘ └────────────────┘ └─────────────┘
Quick Execution Recipes let you run one-click command trials like git init, git add, git commit.

Tech Stack
Framework: React + TypeScript
Styling: Tailwind CSS
Deployment: Vercel

What's Next
Planning to add:

Progress saving via localStorage
Quiz checkpoints every 5 steps
.gitignore setup guide
Pull Request workflow steps
SSH key setup alternative path

Try It / Contribute
🔗 Live app: github-onboarding-tutorial.vercel.app
Drop feedback in the comments. If there's interest, I'll open-source the repo.