Git Grove

The project converts our recent Git repositories and files into dynamic animations, aiming to provide a clearer visualization of our GitHub repository workflows.

Comment

Inspiration

The inspiration for Git Grove came from the need to visually represent complex GitHub repository workflows in a more accessible and understandable way. We wanted to create a tool that could transform the intricate structures of Git repositories into dynamic visualizations to aid comprehension.

What it does

https://docs.google.com/presentation/d/1RRl44pVbF87zw-qm6P2obousxsDk6AvOgVpoTqzTMdk/edit?usp=sharing Git Grove analyses the most recent repositories of a git account and visualizes their size as one of three islands. If the repository is recent, the corresponding island will reflect this after calculating the number of bytes. When an island is selected, it will reveal the files as trees which will also range from withering to thriving. A repository that has been shown a lot of hard work will be full of green, while one that could use more love will have barren wastelands galore.

How we built it

Git Grove was built using a combination of programming languages and full-stack tools. We utilized react and tailwind for the front end and express for the back end. We wrote a recursive algorithm that recurses through the git hub api that fetches information from the github api. Recursion happens when we stumble upon a directory where we have to later go inside the directory to examine the material and then return .

Challenges we ran into

Connecting the back end to the front end has been especially challenging. We especially struggled with properly linking the repos to the corresponding islands and trees. We also struggle with connecting the backend with the frontend.

Accomplishments that we're proud of

We are very proud of the sleek visual elements and overcoming the challenges of pulling information from the git repository. We are also proud of the overall use of github as both a source to reference and fetch the api and for teamwork

What we learned

We learned how to work with React, Tailwind, Express.js + Node.js, Github API, and DALL-E.

What's next for Git Grove

We feel as though many of the visual elements can be further improved upon, and we seek to add more functionality relating to the kinds of data it gives the viewer.

Built With

Share this project:

Updates