Gitgood

<h1 align="center"><img src="https://user-images.githubusercontent.com/87397035/183719869-1a6d85f3-6d06-4801-b095-384b5b9fd12e.png" /><br/>gitGood - Learn to use git, interactively!</h1> <p>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 <strong>in browser terminal</strong> with a psuedo file system that is staged and pushed through the CLI to the <strong>mock GitHub window</strong> (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.<br/><br/>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 <strong>state management</strong> and why larger projects would need something like redux. It's a <strong>desktop only</strong> website made to not function on mobile intentionally. You can still run a few commands on the phone version though.</p> <p><strong>Note:</strong> Noticable frame drops on Brave(snap) for linux. <strong>Use Chrome(or Firefox) for the best experience.</strong></p> <h3>Here's the <a href="https://zaidsidd360.github.io/gitgood/" target="_blank">live url.</a></h3>

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

<h2>Technologies Used</h2> <ul> <li>React</li> <li>TypeScript</li> <li>Context Api</li> <li>CSS</li> <li><a href="https://github.com/splinetool" target="_blank">Spline</a></li> <li><a href="https://github.com/bony2023/react-terminal#readme" target="_blank">React Terminal</a></li> <li><a href="https://github.com/nitin42/terminal-in-react" target="_blank">Terminal In React</a></li> </ul>