git-gizmo/gitgood

Interactive tutorial for beginners to start learning the git cli.

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

Light mode

After tutorial completion

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

• React
• TypeScript
• Context Api
• CSS
• Spline
• React Terminal
• Terminal In React