WebLink | Devpost

Inspiration

Traditional web-bookmarking tools only capture where information lives, not how ideas relate. While researching essays and projects, we saw how easy it is to lose context and forget why certain sources mattered. We wanted to build a tool that visualizes the shape of your thinking and reveals hidden connections across the web, whether it be for a university student writing an essay, or for somebody who simply wants to curate a graph bookmarks about their favorite articles and internet treasures.

What it does

WebLink extends your browser to create an interactive knowledge graph of your bookmarks. Instead of static lists, users see dynamic nodes representing pages, automatically clustered by tags, topics, and contextual relevance. By hovering or clicking a node, users can view metadata and explore related sources surfacing patterns, common themes, and cross-topic insights that would normally stay hidden. It’s like visualizing your brain’s research process.

How we built it

We built WebLink using a modern web-stack centered around TypeScript and JavaScript, bundled with Vite for fast development and hot-reload velocity. Our architecture integrates multiple JavaScript frameworks and libraries, including force-directed graph visualization tools, to render dynamic relationships between bookmarks. On the frontend, we focused on responsive UI components, intuitive hover states, and progressive disclosure to avoid overwhelming users with data.

To capture bookmarks seamlessly, we developed a lightweight browser extension that collects metadata, user-defined tags, and contextual signals. These are sent to our web dashboard, processed, and rendered into an interactive knowledge graph. The goal was simple: deliver a frictionless ecosystem where adding a bookmark feels natural, but exploring it feels meaningful.

Challenges we ran into

Nearly every stage introduced a new challenge. The biggest initial blocker was determining how to organize and represent information in a way that felt both intuitive and powerful. Graphs are inherently complex, and surfacing value without clutter required deep iteration on UX and visualization design.

Debugging performance issues in force-directed layouts was another hurdle — as node counts increased, performance degraded. We optimized rendering, implemented pruning strategies, and fine-tuned physics parameters to maintain smooth interactions.

We also struggled with wireframing how users would navigate the interface. Too much detail created confusion; too little reduced usefulness. Striking this balance required multiple rounds of testing, feedback, and redesign.

Finally, coordinating multiple frameworks simultaneously introduced integration quirks we had to systematically identify and resolve. These challenges forced us to improve our tooling, communication, and development discipline, ultimately resulting in a more robust, scalable product.

What we learned

Throughout development, we learned how transformative AI can be when paired with structured data. We explored how even lightweight models can intelligently cluster content, suggest contextual tags, and identify relationships between sources that humans often overlook. Experimenting with web-scraping and metadata extraction showed us how automated data collection can jumpstart knowledge-oriented tools, dramatically accelerating the time from raw URLs to actionable insights.

We also gained an appreciation for how users think about information: not as lists, but as interconnected concepts. By testing early prototypes with real students and researchers, we learned the importance of surfacing context, offering flexible tagging systems, and avoiding visual overload in graph-based UIs. Overall, we learned that building productivity tools is as much about understanding cognition and behavior as it is about writing code.