CodeCrossroad

• 

  2D Force Graph Example 1

• 

  2D Force Graph Example 2

• 

  3D Force Graph Example 1

• 

  3D Force Graph Example 2

• 

  3D Force Graph Example 3

• 

  Logan Walker and Justin McDuffey in Front of Project

• 

  Justin McDuffey Pointing at Project

Inspiration

When our team was brainstorming ideas for this Hackathon, we kept discovering that many of our more exciting project ideas had already been implemented by other developers years ago! To make this process less frustrating, we developed CodeCrossroad, a website that helps its users discover what projects have and haven't been created before they commit to reinventing the wheel.

What it does

CodeCrossroad works by creating a dynamic force graph that groups GitHub repositories according to semantic similarity. We achieve this by creating vector embeddings of each repository's README and pairing each repository with its k-nearest neighbors as calculated by cosine similarity. Most importantly, users can add/embed their own repositories into the general graph by providing either a link or a draft README, allowing them to visualize how their ideas fit into the space of pre-existing code. CodeCrossroad also provides tools to analyze a project’s folder structure and link files based on parent folders and import statements.

How we built it

CodeCrossroad uses the GitHub REST API to parse the top GitHub repositories based on their star count and embeds the README’s as vectors using Word2Vec. It then takes these vectors and performs cosine similarity before running the data through the ForceGraph GitHub repository for visualization.

Challenges we ran into

Using the GitHub REST API allowed us to get data from top GitHub repositories, except that attempting to cover a large number of repositories results in GitHub rate-limiting the downloads. We solved this by batching our downloads and gathering data one section at a time. We found AI helpful in our design process, especially for areas of development we lacked experience in. Nevertheless, we noticed that it would occasionally misunderstand the purposes of our algorithms or introduce inefficient time complexities. Correcting these issues required a strong mental model of our program objectives, including a deep understanding of which time complexities should be present in each part of the project.

Accomplishments that we're proud of

We are proud of the intuitive user interface and clear graphic design, which allows users to quickly and cleanly find repositories similar to their own ideas. As we scaled our graphs from incorporating just hundreds of repos to thousands of repos, we quickly understood that we would need to make changes in how we visualize our data. This realization led us to implement dynamic node highlighting and adjustable opacity parameters, two features that keep the graph from appearing noisy and crowded, and which we are quite proud of.

What we learned

Web development is much broader than learning a new language or framework. To build our project, we had to blend matters of time complexity, graphic design, and a functional UI. We found that AI is very proficient at assisting in the creation of a webpage, provided that it is used by someone experienced in prompting it.

What's next for CodeCrossroad

One feature that we were not able to implement at this hackathon that we feel would improve this project is the ability to embed repositories based on an AI-generated summary instead of the developer-provided README, which may not accurately depict the repository’s function (Update: We just implemented this feature in the last 2 hours)! We would have also liked to implement the reverse of our algorithm, which would have AI generate a README based on chosen repositories.

Built With

• css
• html
• javascript