GitGraph

A passion mobile application for a visualizing for git control version systems built with React Native, Expo, and Tailwind. Explore branches and commits in repositories in a more convoluted way.

Comment

Inspiration

As someone who works in team environments a lot, I get relatively curious on how our work and commits gets interwoven on a graphical scale. I developed this project because I felt as if this was the most fun thing to implement in a hackathon, where instead of going more general and competing with other similar ideas I wanted to do something more niche and unique. This isn't my first time working on a project involving D3.js and a React based framework, but it was still challenging and fun overall! A grueling 16 straight hours of coding to embroider my solo passion.

What it does

It serves as a basic graph visualizer for a popular version control system platform, Github. By either inputting the owners name and the repository's name, you have the opportunity to graphically visualize branches, commits, and files in a single page with interactable nodes that redirect you to their respective links. Clicking on a commit will redirect you to the specific commit, making it a great tool for inspecting changes in codebases and quickly accessing new commits.

How we built it

I utilized React Native + Tailwind and Expo to start with my basic framework, and I used d3.js as my primary library for visualizing the actual features of the project.

Challenges we ran into

The amount of restructuring that occurs as a singular developer was quite a bit, as I found myself constantly contemplating changes in my architecture in order to make time to meet deadlines and find enough time to debug and clean features. For example, I first tried using Redux expecting a very complicated structure of data being handled but eventually I gave up because it was so complicated to use, forcing me to pivot towards Zustand for state management instead. Additionally, I found React Native as per usual to be difficult to work with, especially since I went with Typescript. I was basically typing every single little thing out in order to make 5% gain. I had to scrap OAuth authentication for Github login and I had to focus on developing the frontend features costing me the potential to build out a feature-rich full stack mobile application. It was my first time being solo, but it was enriching regardless..

Accomplishments that we're proud of

Actually finishing the project.

What we learned

Enjoy the work, and appreciate the little things that make us better than we were before.

What's next for GitGraph

Probably OAuth or some integration with some fancy d3.js animations. I also see myself potentially pivoting this towards a personal app for personal use since I think this would be pretty useful for me to have on hand. Final step would be to make it full stack and give it more abundant user-friendly features.

Built With

Share this project:

Updates