Inspiration
As CS students, a very important skill to acquire is to learn to work on collaborative projects and maintain version control. One of the key tools related to that is git which is not an explicite part of the current academic curriculum. The inspiration behind Learn Git was to gamify the learning git commands and concepts through visualization and simple instructions.
What it does
Learn Git is an interactive learning game related to source control. It visualizes the repository and version history and teaches git commands through gradually difficult levels. Each level focuses on a certain git command such as branching and merge conflict resolution and displays the changes through node-based graphical representation in real-time.
How we built it
The project is built with JavaScript with react.js as the frontend framework. The backend runs on Express.js that communicates with GitHub Api to allow a code space embed on our custom react web app. Once logged in through the GitHub, it creates a temporary repo and launches the code space in each level with a specific challenge to complete. There's a custom VSCode Extension that keeps track of all the local changes through Native Git Extension API and updates the Diagram accordingly. Once submitted, an auto grader matches the correct operations with the user's changes and updates their score.
Challenges we ran into
Communicating the session information and repo changes between the frontend and backend had been a critical obstacle in our path. Visualizing the changes in repo to a node-based graphical diagram was another issue we overcame.
Accomplishments that we're proud of
We're proud of what we built so far which is a node-based backend server that is able to authenticate users using their GitHub login and a react front end that is able to trigger different endpoints on the backend.
What we learned
Most of what we learned was a lot of web technologies that were new to most of our members. Especially the VSCode extension Api none of our teammates had experience with that before. Along with that we also learned about session management and OAuth login through GitHub.
What's next for Learn Git
There are lots of next steps that need to be taken. The project's backend and frontend need to be able to communicate with each other. The auto grader and instructions for each level need to be written.
Log in or sign up for Devpost to join the conversation.