Git Workflow Playground

An interactive, hands-on simulator that teaches the everyday Git workflow used in real teams: branch flow across staging/uat/main, branch naming, semantic commits, conflict resolution, revert vs reset --hard, and resetting a branch to match another — each visualised on a live Git graph with a virtual terminal. Full guide →

Workflow 1

Git Structure & Branch Flow

Before building, you must know the infrastructure and the server branches that map to it. Common branches:

main / master: PROD server — code running live for customers.
uat: UAT server — environment for QA/customer testing.
staging: DEV server — daily developer integration.

Safety rule: when a task is done you must open PRs into ALL three branches (Staging → UAT → Main) so code is never missed and breaks an environment in a later release.

INTERACTIVE SANDBOX

LESSON_01_SANDBOX

Pull Request progress:Goal: all 3 environments

1. PR into STAGING

Deploy DEV server

⚡ WAIT

2. PR into UAT

Deploy UAT server

⚡ WAIT

3. PR into MAIN

Deploy PROD server

⚡ WAIT

LIVE GIT BRANCH GRAPH

Horizontal lanes per server & branch

MAIN (PROD)

UAT (STAGE)

STAGING (DEV)

FEATURE (MINE)

virtual-terminal-bashActive

# Virtual terminal — the matching git commands will appear here as you act.

# Pick a lesson on the left to begin.

Related Tools

All tools

Dev & PM Prompt Builder

Generate structured prompts and developer context for Claude Code and AI coding assistants

Text Utilities

Transform, organize, format, and clean text with powerful utilities

Hash Generator

Generate MD5, SHA-1, SHA-256, and other cryptographic hashes

Color Picker

Advanced color picker with HEX, RGB, HSL, and palette generation

About Git Workflow Playground

Learn and practice the core Git workflows new developers struggle with — without touching a real repo. Six interactive lessons cover branch structure, naming conventions, clean commits, team conflict resolution, safe rollback, and branch syncing. Everything runs in your browser on a simulated Git graph.

Key Features

-Six guided lessons covering the full team Git workflow
-Live, lane-based Git graph that updates as you act
-Virtual terminal showing the exact commands behind each step
-Branch flow simulator that blocks unsafe PRs straight to production
-Branch-name generator following the folder/ticket-kebab convention
-Conflict resolution and revert-vs-reset walkthroughs
-Bilingual UI (English / Vietnamese), 100% client-side

Use Cases

Onboarding new developers

Give juniors a safe sandbox to internalise branch flow, PR discipline and rollback before they touch the real repository.

Understanding revert vs reset

See on the graph why git revert is safe on shared branches while git reset --hard rewrites history and is local-only.

Practising conflict resolution

Walk through the safe clone-branch workflow for resolving merge conflicts without overwriting a teammate's code.

Standardising branch naming

Teach the folder/ticket-kebab naming convention with an interactive generator that links branches to Jira tickets.

Frequently Asked Questions

Who is this Git playground for?▾

It is aimed at new developers learning how Git is used in real teams. It assumes no prior workflow knowledge and explains each step in plain language with a visual graph.

Does it run real Git commands?▾

No. Everything is simulated in your browser — the graph and virtual terminal mimic Git behaviour so you can experiment freely without any risk to a real repository.

What is the difference between revert and reset --hard?▾

git revert creates a new commit that undoes a previous one, keeping history intact — safe for shared branches. git reset --hard deletes commits and rewrites history, which is dangerous once pushed, so it should be used only locally.

Why must I PR into staging, uat and main separately?▾

Each branch maps to a deployment environment (DEV, UAT, PROD). Opening a PR into all three ensures code is not missed in one environment, which would cause it to break in a later release.

Tips & Best Practices

-Click any node on the graph to inspect its simulated commit log
-Try PR-ing straight to Main before Staging/UAT to see the CI/CD block in action
-Use the Reset button (top-left of the sandbox) to start any lesson over