GRAPH SURF

Inspiration

The internet was created as a method to democratise knowledge and make information accessible to all. However, we feel that purpose has deviated significantly due to its commercialisation. Nowadays searching prioritises answering questions and feeding instant results back rather than depth of knowledge.

We wanted to bring back this aspect of exploration that has been lost from the internet. Our original idea came from one of our teammates wanting a way to explore various computer science topics in depth. Since Google only goes as deep as the search, he found it difficult to find knowledge when he didn’t know what to search for.

What it does

Graph Surf is a web application that represents topics as nodes in a graph. You’ll start with a few nodes for topics you’re interested in, however you’re also free to add more topics. Each topic appears as a root node or “top level” node. When you interact with the node, it will expand into several related sub-topics and resources you can explore about.

The system is recursive and the related sub topics can further expand into more specialised topics, allowing users to explore as deep as they want. Graph Surf has an input bar that not only allows for adding nodes but searching for topics by name.

Every time a user clicks on a node, the app encapsulates the node, its ancestors, the path, its siblings and sends it as context to OpenAI API, which generates relevant subcategories for the user to explore. The Brave Search API is also provided with this context to find relevant resources on the subject matter. In the top left corner is a view of metrics of your current session including, the current depth level you’re at, how many nodes you’ve explored and the deepest level you’ve reached so far.

How we built it

Graph Surf uses a combination of Next.js and Supabase for the frontend and backend of the app. A react library called react-force-graph is used for rendering the force directed graph. Supabase was used to easily provide anonymous sessions for our demo along.

We found GPT-4o Mini to be a good balance for finding subcategories without being costly. We also experimented with programmatic search providers, comparing Brave and Perplexity for our use case of finding resources for specific topics.

Challenges we ran into

Our goal is to make sure subcategories are accurate, reliable and distinct from the larger graph, so making sure the LLM has a full understanding of what to generate was challenging. The force-directed graph was very hard to stabilize after a large number of nodes were generated.

Accomplishments that we're proud of

The force directed graph library had fairly poor documentation but we were able to figure out how the component worked (John)

As with all hackathons, our time was incredibly constrained when factoring in the video. While the application is not entirely complete or as polished as we like, we’re very satisfied with the final product. (John)

What we learned

Throughout the entire hackathon, we’ve encountered some road blocks and technical issue. While it is frustrating, we did learn a lot from the problems we encountered.

Learned how to manage project scope under a very tight deadline. We end up cutting a lot of frills from the application to prioritise the core features. (John)

Became experts at creating and solving merge conflicts (Collaboration in large code bases)

We learnt how to work with new APIs like Brave Search(Nirav)

Learnt how to store and work with force directed graph data

Codex is my #1 op (John)

No! Don’t say that! (Nirav)

What's next for GRAPH SURF

We may continue to host it after some refinements to the application. Currently it only supports anonymous sessions however we hope to implement an account system for more persistent access. Visualizing the resource metadata to streamline user experience is also one of our goals. We want to create a view that lets users peek into links before clicking on them?? We want to extend the app to show users’ most searched field, deepest node explored, recurrent themes, and other metrics to help users understand their search behaviour better.

Built With

• dominoes
• gyg
• nextjs
• supabase
• tailwind