/gitgood

Interactive tutorial for beginners to start learning the git cli.

Primary LanguageTypeScriptMIT LicenseMIT


gitGood - Learn to use git, interactively!

This project idea came to me back when I first started learning web developement and started playing around with git and GitHub. It consists of an in browser terminal with a psuedo file system that is staged and pushed through the CLI to the mock GitHub window (I tried my best with the GitHub ui recreation lol). There's also a Windows folder window to showcase how the folder structure would look on a GUI-based system. The instructions tab on the left tells the user what to do and which commands to run.

This was a project I initially planned on doing with vanilla js, but as I dove deeper into the abyss that is the react ecosystem, I figured this would be much more fun done in react. It taught me a whole lot about state management and why larger projects would need something like redux. It's a desktop only website made to not function on mobile intentionally. You can still run a few commands on the phone version though.

Note: Noticable frame drops on Brave(snap) for linux. Use Chrome(or Firefox) for the best experience.

Here's the live url.

Screenshot

Dark mode

Dark Hero Dark Main

Light mode

Light Hero Light Main

After tutorial completion

After pushed

Run dev env

  • Clone the project
  git clone https://github.com/zaidsidd360/gitgood.git
  • cd into the project directory
  cd gitgood
  • Install dependencies
  npm install
  • Start the server
  npm run start

Technologies Used