Convert Figma logo to code with AI

pcottle logolearnGitBranching

An interactive git visualization and tutorial. Aspiring students of git can use this app to educate and challenge themselves towards mastery of git!

30,388
5,730
30,388
32

Top Related Projects

:computer: :mortar_board: Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub

Flight rules for git

:framed_picture: Visualize how common Git operations affect the commit graph

21,293

Most commonly used git tips and tricks.

5,787

Pro Git 2nd Edition

Quick Overview

LearnGitBranching is an interactive web application designed to teach Git concepts and commands through visual representations and hands-on exercises. It provides a simulated Git environment where users can practice branching, merging, and other Git operations without the need for a local installation.

Pros

  • Interactive and visual learning experience
  • Covers a wide range of Git concepts, from basic to advanced
  • Accessible from any web browser, no installation required
  • Supports multiple languages for a global audience

Cons

  • May not fully replicate all real-world Git scenarios
  • Limited to predefined exercises and challenges
  • Lacks integration with actual Git repositories
  • UI can be overwhelming for absolute beginners

Getting Started

To start using LearnGitBranching:

  1. Visit the project website: https://learngitbranching.js.org/
  2. Click on "Try the app" to launch the interactive interface
  3. Begin with the "Introduction Sequence" for basic concepts
  4. Progress through levels and challenges at your own pace
  5. Use the command line at the bottom to enter Git commands
  6. Visualize the results of your actions in the graphical representation above

Note: This is a web-based application, so no installation or code is required to get started. Simply access the website and begin learning Git through the interactive interface.

Competitor Comparisons

:computer: :mortar_board: Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub

Pros of git-it-electron

  • Provides a hands-on, practical approach to learning Git
  • Offers a desktop application for a more immersive learning experience
  • Covers real-world Git scenarios and workflows

Cons of git-it-electron

  • Limited visual representation of Git concepts
  • Focuses primarily on basic Git commands and workflows
  • May require more time to complete compared to interactive web-based tutorials

Code Comparison

git-it-electron:

const Git = require('nodegit')
const repo = await Git.Repository.open(repoPath)
const commit = await repo.getHeadCommit()

learnGitBranching:

const branch = new Branch({
  target: 'C1',
  id: 'master'
})
const commit = new Commit({
  parents: ['C1'],
  id: 'C2'
})

While git-it-electron uses the nodegit library for Git operations, learnGitBranching simulates Git behavior using custom JavaScript objects. This difference reflects their approaches: git-it-electron provides practical, real-world Git experience, while learnGitBranching offers a more abstract, visualization-focused learning environment.

Flight rules for git

Pros of git-flight-rules

  • Comprehensive reference guide for Git commands and scenarios
  • Covers advanced topics and troubleshooting
  • Regularly updated with community contributions

Cons of git-flight-rules

  • Text-based format may be less engaging for visual learners
  • Lacks interactive elements for hands-on practice
  • May be overwhelming for beginners due to its extensive content

Code comparison

git-flight-rules:

git reflog
git reset --hard HEAD@{index}

learnGitBranching:

git.exec("branch feature");
git.exec("checkout feature");
git.exec("commit");

git-flight-rules provides command-line examples for specific Git scenarios, while learnGitBranching uses a custom JavaScript API to simulate Git commands in an interactive environment.

git-flight-rules is a detailed reference guide for Git users of all levels, offering solutions to common problems and explanations of advanced concepts. It's particularly useful for troubleshooting and learning best practices.

learnGitBranching, on the other hand, is an interactive learning tool that visualizes Git concepts through a gamified interface. It's excellent for beginners and visual learners, providing hands-on experience with branching and merging.

Both repositories serve different purposes and can complement each other in a Git learning journey. git-flight-rules is better for in-depth knowledge and problem-solving, while learnGitBranching excels at teaching fundamental concepts through practice.

:framed_picture: Visualize how common Git operations affect the commit graph

Pros of visualizing-git

  • Simpler interface, focusing on visualization of Git operations
  • Real-time updates as commands are entered
  • Supports custom initial repository states

Cons of visualizing-git

  • Limited set of Git commands available
  • Lacks structured tutorials or lessons
  • No gamification elements or progression tracking

Code Comparison

visualizing-git:

git init
git commit -m "Initial commit"
git branch feature
git checkout feature
git commit -m "Add feature"

learnGitBranching:

git.exec("commit");
git.exec("branch feature");
git.exec("checkout feature");
git.exec("commit");

Summary

visualizing-git offers a straightforward, visual approach to understanding Git operations, with real-time updates and custom initial states. However, it lacks the comprehensive tutorials and gamification elements found in learnGitBranching.

learnGitBranching provides a more structured learning experience with progressive lessons and challenges, but may have a steeper learning curve due to its more complex interface.

Both tools serve as valuable resources for learning Git, with visualizing-git being more suitable for quick visualizations and learnGitBranching offering a more comprehensive learning path.

21,293

Most commonly used git tips and tricks.

Pros of tips

  • Comprehensive collection of Git tips and tricks in a single repository
  • Easy to search and find specific Git commands for various scenarios
  • Regularly updated with community contributions

Cons of tips

  • Lacks interactive learning elements or visual representations
  • May be overwhelming for beginners due to the sheer number of tips
  • No structured learning path or progression

Code comparison

tips:

git config --global alias.unstage 'reset HEAD --'
git config --global alias.last 'log -1 HEAD'
git config --global alias.br 'branch --format="%(HEAD) %(color:yellow)%(refname:short)%(color:reset) - %(contents:subject) %(color:green)(%(committerdate:relative)) [%(authorname)]" --sort=-committerdate'

learnGitBranching:

exports.level = {
  "goalTreeString": "{\"branches\":{\"master\":{\"target\":\"C1\",\"id\":\"master\"},\"bugFix\":{\"target\":\"C2\",\"id\":\"bugFix\"}},\"commits\":{\"C0\":{\"parents\":[],\"id\":\"C0\",\"rootCommit\":true},\"C1\":{\"parents\":[\"C0\"],\"id\":\"C1\"},\"C2\":{\"parents\":[\"C1\"],\"id\":\"C2\"}},\"HEAD\":{\"target\":\"bugFix\",\"id\":\"HEAD\"}}",
  "solutionCommand": "git checkout -b bugFix;git commit;git checkout master;git commit;git merge bugFix",
  "name": "Merging in Git",
  "hint": "Remember to commit in each branch!",
  "startTree": "{\"branches\":{\"master\":{\"target\":\"C1\",\"id\":\"master\"}},\"commits\":{\"C0\":{\"parents\":[],\"id\":\"C0\",\"rootCommit\":true},\"C1\":{\"parents\":[\"C0\"],\"id\":\"C1\"}},\"HEAD\":{\"target\":\"master\",\"id\":\"HEAD\"}}"
};

learnGitBranching offers an interactive, visual approach to learning Git, while tips provides a comprehensive reference for Git commands and techniques.

5,787

Pro Git 2nd Edition

Pros of progit2

  • Comprehensive coverage of Git concepts and advanced topics
  • Available in multiple languages and formats (PDF, EPUB, MOBI)
  • Regularly updated with new Git features and best practices

Cons of progit2

  • Text-based learning may be less engaging for visual learners
  • Lacks interactive exercises for hands-on practice
  • Steeper learning curve for beginners compared to interactive tutorials

Code comparison

learnGitBranching:

level.solutionCommand = function() {
  return [
    'git checkout -b bugFix',
    'git commit',
    'git checkout main',
    'git commit',
    'git merge bugFix'
  ];
};

progit2:

[source,console]
----
$ git checkout -b iss53
Switched to a new branch "iss53"
$ vim index.html
$ git commit -a -m 'Add a new footer [issue 53]'
----

The learnGitBranching code snippet demonstrates an interactive solution for a Git branching exercise, while the progit2 code block shows a more traditional command-line example with explanations.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

LearnGitBranching

PRs Welcome

LearnGitBranching is a git repository visualizer, sandbox, and a series of educational tutorials and challenges. Its primary purpose is to help developers understand git through the power of visualization (something that's absent when working on the command line). This is achieved through a game with different levels to get acquainted with the different git commands.

You can input a variety of commands into LearnGitBranching (LGB) -- as commands are processed, the nearby commit tree will dynamically update to reflect the effects of each command:

demo-gif

This visualization combined with tutorials and "levels" can help both beginners and intermediate developers polish their version control skills. A quick demo is available here: https://pcottle.github.io/learnGitBranching/?demo

Or, you can launch the application normally here: https://pcottle.github.io/learnGitBranching/

Sandbox Mode

By default the application launches in "sandbox mode" with a basic repository already created. Here you can enter commands and mess around with a repository as much as you like. Keep in mind you can

  • undo to undo the effects of the last command
  • reset to start over with a clean slate (works in levels too)
  • git clone to simulate remote repositories!

Sandbox mode can be great for demonstrating something to a friend, but the real learning is with levels...

Levels

Type levels to see the available lessons / challenges (and which ones you have solved so far). Each level series aims to teach some high-level git concept, and each tab of levels separates major worlds of info (like remote repositories versus local).

For some added fun, there is a "git golf" concept where we keep track of how many commands you use to solve each level. See if you can match all of our records!

Sharing permalinks

You can share a link to LearnGitBranching with an arbitrary set of commands that will execute upon load by using the command URL parameter. You will also likely want to disable the intro dialog for this case with the NODEMO url param; here is an example to get started.

Level Builder

You can build levels with the build level command. A dialog will walk you through the process, and at the end it will show you a JSON blob that represents the level you just created. Paste that in a gist or directly into an issue and I can check it out / merge in your changes! You can also share this level directly with friends by having them run import level and paste the JSON in the resulting text field, or simply send them a custom URL with the the gist ID in the parameters, like so: https://pcottle.github.io/learnGitBranching/?gist_level_id=a84407351f9c9f0cb241

Reporting Bugs / Opening Issues

When reporting bugs, try running the command debug_copyTree() in your JS console when in a state just before reproducing a bug. This can avoid having to copy all the commands you used to get into a specific state. (I can then use the importTreeNow command to get to that exact state)

Building yourself / Contributing Functionality

For contributing core functionality in the app, you'll probably want to test your changes at least once before submitting a pull request. That means you'll need the "gulp.js" build tool to build the app:

https://gulpjs.com/docs/en/getting-started/quick-start

You'll also need yarn to download all the dependencies of the project.

The general workflow / steps are below:

git clone <your fork of the repo>
cd learnGitBranching
yarn install

git checkout -b newAwesomeFeature
vim ./src/js/git/index.js # some changes
yarn gulp fastBuild # skips tests and linting, faster build

# after building you can open up your browser to the index.html
open ./index.html
# file generated and see your changes

vim ./src/js/git/index.js # more changes
yarn gulp build # runs tests and lint

git commit -am "My new sweet feature!"
git push
# go online and request a pull

Alternatively, you can also build and run the app in a pre-configured online workspace:

Open in Gitpod

Other Technical Details

LearnGitBranching is a pretty simple application (from a technical perspective). There's no backend database or any AJAX requests -- it's a 100% clientside application written in JavaScript. The production version (on github.io) literally just serves up an HTML page with some JS and CSS.

Here is the high-level process of the build:

  • CSS is written into just one stylesheet (there is not a whole ton of styling)
  • New HTML is written into a template HTML file (template.index.html). This is only needed for new views
  • The app is "built", which outputs:
    • index.html in the root directory
    • CSS and JS files in ./build directory
  • If the app is being built for production, then these CSS and JS files are hashed (to bust caches) and tests are run
  • That's it!

Thus, if you build the app locally, all you have to do in order to run the app is just open up index.html in the root directory of the repo. Pretty simple

Docker

You can run the most recently built stable image with docker run -p 8080:80 ghcr.io/pcottle/learngitbranching:main. Access your environment with at http://localhost:8080/

You can build the app and image with the command: docker build -t ghcr.io/pcottle/learngitbranching:latest. See the Makefile for information on how to build locally with docker.

Some of our amazing contributors

Helpful Folks

A big shoutout to these brave souls for extensively testing our sandbox and finding bugs and/or inconsistencies:

  • Nikita Kouevda
  • Maksim Ioffe
  • Dan Miller

And the following heroes for assisting in translating:

  • Jake Chen
  • 우리깃 ("urigit")
  • "bcho"
  • "scientific-coder"
  • "ace-coder"
  • Joël Thieffry
  • Jens Bremmekamp ("nem75")
  • "hilojack"
  • Ming-Hsuan-Tu ("twmht")
  • Mikhail Usov ("mikhailusov")
  • Matias Garcia Isaia ("mgarciaisaia")
  • Marc-Olivier Arsenault ("marcolivierarsenault")
  • Eroany H Leader ("lhyqy5")
  • Honorat ("ahonorat")
  • Vasil Kulakov ("coyl") & Lyubov Agadjanyan ("shayenblue")
  • Aliaksei Berkau ("alexeiberkov")
  • Mizunashi Mana ("mizunashi-mana")
  • YourSenseiCreeper
  • Olsza

Also huge shoutout for everyone who has put up a pull request that was pulled! Check out the 30+ contributors we have in the Contributors View

And everyone who has reported an issue that was successfully closed!