Git Workflow Simulator

An interactive web application to help beginners understand Git operations through visual representation. Built with Next.js, React Flow, and Zustand.

🎯 Features

• Interactive Terminal UI: Simulate Git commands in a realistic terminal environment
• Real-time Visualization: See commit graphs, branches, and merge operations visualized instantly
• Virtual Git Engine: Complete state management for commits, branches, and HEAD
• Comprehensive Git Commands: Support for essential Git operations

🚀 Supported Git Commands

Core Commands

• git init - Initialize a new repository
• git commit -m "message" - Create a new commit
• git branch - List all branches
• git branch <name> - Create a new branch
• git branch -d <name> - Delete a branch
• git checkout <name> - Switch to a branch
• git merge <name> - Merge a branch into current branch

Information Commands

• git status - Show working tree status
• git log - Show commit history
• git show <commit-id> - Show commit details

🛠️ Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• Visualization: React Flow
• UI Components: Custom components with shadcn/ui patterns

📦 Installation

# Clone the repository
git clone https://github.com/pnnnhan99/git-workflow-simulator.git
cd git-workflow-simulator

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 in your browser.

🎮 Usage

Basic Workflow

1. Create your first commit:

   git commit -m "Initial commit"

2. Create a new branch:

   git branch feature

3. Switch to the new branch:

   git checkout feature

4. Make changes on the feature branch:

   git commit -m "Add new feature"

5. Switch back to main:

   git checkout main

6. Merge the feature branch:

   git merge feature

Checking Status

• View all branches: git branch
• Check repository status: git status
• View commit history: git log
• View specific commit: git show <commit-id>

📚 Project Structure

git-workflow-simulator/
├── app/
│   ├── globals.css          # Global styles
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Main page
├── components/
│   ├── Terminal.tsx         # Terminal UI component
│   └── GitVisualization.tsx # React Flow visualization
├── lib/
│   └── gitStore.ts          # Zustand store for Git state
├── public/                  # Static assets
└── package.json             # Dependencies

🧠 How It Works

Virtual Git Engine

The application uses a Zustand store to maintain a virtual Git state:

• Commits: Stored with ID, message, parent IDs, and timestamp
• Branches: Pointers to specific commits
• HEAD: Always points to the current branch's latest commit
• Merge Commits: Special commits with two parent IDs

Visualization

React Flow renders the commit graph as nodes and edges:

• Nodes: Represent commits with ID, message, and branch labels
• Edges: Show parent-child relationships
• Merge Commits: Highlighted in orange with special edges
• Current Branch: Highlighted in green

🎨 Features Highlights

• Dark Terminal Theme: Realistic terminal experience
• Command History: Use arrow keys to navigate previous commands
• Error Handling: Clear error messages for invalid operations
• Responsive Layout: Split-screen design with terminal and visualization
• Real-time Updates: Graph updates instantly with each command

🔧 Development

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

📝 License

ISC

🤝 Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

🎓 Learning Resources

This simulator is designed to help beginners understand:

• How commits form a directed acyclic graph (DAG)
• Branch pointers and how they move
• HEAD and how it tracks the current branch
• Merge operations and merge commits
• Git workflow basics

🌟 Future Enhancements

• Add support for git rebase
• Implement git stash
• Add git cherry-pick
• Support for remote operations
• Export/import repository state
• More visualization options
• Tutorial mode with guided workflows

---

Built with ❤️ using Next.js, React Flow, and Zustand