pushin prod

The home page with a chat on the left and the knowledge tree on the right
Click on a file and get the dependent files added to the context of the chat
Search files fast with cmd + k
Filter files in the knowledge tree

Inspiration

Learning codebases quickly and grasping the bigger picture of how everything works takes time. One of our team members thinks visually rather than using an inner monologue, and we applied this concept to coding. We asked ourselves: What if you could visualize your code in a faster, more intuitive way?

What it does

The tool analyzes a public GitHub repository, gathers all the files, and identifies relationships between them to show how they are connected. It simplifies understanding and accelerates learning of large codebases.

How we built it

Here's the process: We start by cloning a GitHub repository -> Parse the files into JSON -> Upload the data to Supabase -> Fetch the data from Supabase to display in the KnowledgeTree component -> Integrate a chat feature using Cohere's models.

Challenges we ran into

One major challenge was preventing the graph from lagging when handling larger GitHub repositories. We implemented optimization techniques to ensure smooth performance.

Accomplishments we're proud of

We’re proud that it actually works, and you can use it with any public GitHub repository.

What we learned

We learned it's easy to hit GitHub API rate limits, so cloning the repository locally is often a better option. We also gained experience with Vercel and its integration capabilities.

What's next for Pushin Prod

We're planning to add a crawler animation where multiple agents traverse the dependency graph in real-time, highlighting errors and other red flags. We'd also like to create a time-lapse feature to visualize how the dependency graph evolves across different commits.