Git Cheatsheet Architecture: From Command Organization to Search Filtering#

My team recently got some new interns who keep forgetting Git commands. I tried several cheatsheets online, but they were either static pages without search or had messy categorization. So I built my own searchable, well-organized Git cheatsheet tool.

The Logic Behind Command Classification#

Git has many commands, but the core workflow is clear:

Config → Initialize → Working Directory → Staging Area → Local Repository → Remote Repository

Based on this workflow, I designed 14 categories:

const categories = [
  { id: 'config', name: 'Config' },           // git config
  { id: 'start', name: 'Getting Started' },   // git init/clone
  { id: 'basic', name: 'Basic Operations' },  // git add/rm/mv
  { id: 'commit', name: 'Commit' },           // git commit
  { id: 'branch', name: 'Branch' },           // git branch/checkout
  { id: 'merge', name: 'Merge & Rebase' },    // git merge/rebase
  { id: 'remote', name: 'Remote' },           // git push/pull/fetch
  { id: 'history', name: 'History' },         // git log/diff/blame
  { id: 'tag', name: 'Tag' },                 // git tag
  { id: 'stash', name: 'Stash' },             // git stash
  { id: 'undo', name: 'Undo' },               // git reset/revert
  { id: 'submodule', name: 'Submodule' },     // git submodule
  { id: 'advanced', name: 'Advanced' },       // git reflog/gc/bisect
]

This classification follows Git’s core concepts:

• Config: Configuration levels (–global, –local, –system)
• Basic: Working directory ↔ Staging area file operations
• Commit: Staging area → Local repository snapshot
• Branch: Core mechanism for parallel development
• Merge/Rebase: Two strategies for integrating branches
• Remote: Local repository ↔ Remote repository sync
• Undo: Destructive operations and rollback

Command Data Structure#

Each command uses a TypeScript interface:

interface GitCommand {
  category: string      // Category ID
  command: string       // Git command string
  description: string   // Chinese description
  descriptionEn: string // English description
}

Why store both languages? Because search needs to support both:

const matchesSearch = !searchQuery || 
  cmd.command.toLowerCase().includes(searchQuery.toLowerCase()) ||
  cmd.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
  cmd.descriptionEn.toLowerCase().includes(searchQuery.toLowerCase())

Users can search “branch” or “分支” and find relevant commands.

Search Filtering Implementation#

Search is the core feature. I use useMemo to cache filter results:

const filteredCommands = useMemo(() => {
  return gitCommands.filter(cmd => {
    const matchesCategory = selectedCategory === 'all' || cmd.category === selectedCategory
    const matchesSearch = !searchQuery || 
      cmd.command.toLowerCase().includes(searchQuery.toLowerCase()) ||
      cmd.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      cmd.descriptionEn.toLowerCase().includes(searchQuery.toLowerCase())
    return matchesCategory && matchesSearch
  })
}, [searchQuery, selectedCategory])

Two filter conditions:

1. Category filter: selectedCategory === 'all' || cmd.category === selectedCategory
2. Search filter: Matches command, Chinese description, or English description

Performance optimization: useMemo only recalculates when searchQuery or selectedCategory changes, avoiding traversal of 200+ commands on every render.

One-Click Copy#

Copying commands is the most common action. Using Clipboard API:

const copyCommand = (command: string) => {
  navigator.clipboard.writeText(command)
  setCopiedCommand(command)
  setTimeout(() => setCopiedCommand(null), 2000)
}

Interaction details:

• After clicking copy, icon changes from Copy to Check
• Auto-resets after 2 seconds to show “Copied” feedback
• Track copiedCommand state to avoid all buttons changing color simultaneously

Command Detail Page Links#

Some common commands (like branch, commit, merge) have dedicated detail pages. Logic:

const baseCmd = cmd.command.replace(/^git\s+/, '').split(/\s+/)[0].replace(/-+$/, '')
const hasDetail = gitCommandDetails[baseCmd]

// Render
{hasDetail ? (
  <Link href={`/tools/git-cheatsheet/${baseCmd}/`}>
    <code className="text-accent-cyan">{cmd.command}</code>
  </Link>
) : (
  <code>{cmd.command}</code>
)}

Extract the base command name (e.g., git branch -a → branch) and check if a detail page exists.

Complete Coverage of 200+ Commands#

I compiled a complete list of common Git commands, ordered by usage frequency:

Configuration (7 commands)

• User config: git config --global user.name/email
• Aliases: git config --global alias.co checkout
• Default branch: git config --global init.defaultBranch main

Branch Operations (20+ commands)

• Basic: git branch, git checkout, git switch
• Advanced: git branch --set-upstream-to, git checkout --track
• Batch: git branch --merged, git branch --no-merged

Merge & Rebase (15+ commands)

• Fast-forward: git merge <branch>
• Squash: git merge --squash <branch>
• Interactive rebase: git rebase -i HEAD~3
• Cherry-pick: git cherry-pick <commit>

Remote (20+ commands)

• Sync: git fetch, git pull, git push
• Safe push: git push --force-with-lease (safer than --force)
• Branch management: git push origin --delete <branch>

History (20+ commands)

• Basic: git log, git diff, git show
• Graphical: git log --graph --all --decorate
• Search: git log --grep="keyword", git log -S "string"

Undo Operations (15+ commands)

• Soft reset: git reset --soft HEAD~1 (keeps changes staged)
• Hard reset: git reset --hard HEAD~1 (deletes all changes)
• Safe undo: git revert <commit> (creates new commit to undo)

Advanced (20+ commands)

• Reflog: git reflog (recover deleted commits)
• Bisect: git bisect start/bad/good/reset
• Worktree: git worktree add <path> <branch>

Performance: Virtual Scrolling?#

Theoretically, 200+ commands could benefit from virtual scrolling, but testing revealed:

• 200 commands render in < 50ms
• Users rarely scroll through all commands
• Most use cases involve search or category filtering

So I didn’t implement virtual scrolling to keep code simple. If commands exceed 500, react-window would be worth considering.

Real-World Scenarios#

Scenario 1: Onboarding New Developers#

Intern forgets how to create and switch branches:

1. Select “Branch” category
2. Scan list to find git checkout -b <name>
3. Click copy, paste into terminal

Scenario 2: Conflict Resolution#

Merge conflict occurs:

1. Search “abort” to find git merge --abort
2. Or search “stash” to save current changes

Scenario 3: Emergency Rollback#

Production issue requires quick rollback:

1. Select “Undo” category
2. Compare git reset vs git revert descriptions
3. Choose git revert HEAD (safe undo)

Edge Cases#

1. Empty Search Results#

{filteredCommands.length === 0 && (
  <div className="text-center py-12 text-text-tertiary">
    <BookOpen className="w-12 h-12 mx-auto mb-4 opacity-50" />
    <p>No commands found</p>
  </div>
)}

Provide friendly feedback instead of a blank page.

2. Category Button Highlight#

className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
  selectedCategory === cat.id
    ? 'bg-accent-cyan text-white'
    : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary'
}`}

Selected state uses theme color highlight, unselected stays subtle.

The Result#

Based on this design, I built Git Cheatsheet:

• 200+ common Git commands
• 14 clear categories
• Chinese and English search support
• One-click copy to clipboard
• Command detail page links

The implementation isn’t complex, but getting the classification logic, search experience, and copy interaction right requires attention to detail. Hope this helps.

Related Tools: Git Commit Generator | Gitignore Generator