Code Snap

Inspiration

Code Snap was born from a simple observation: learning a new codebase is often a slow, disjointed process. Vital architectural context is usually scattered across flat file trees, static documentation, and buried IDE search results. While functional, these tools fail to provide a spatial mental model of how a system actually breathes. We wanted to transform code exploration from a tedious scroll through folders into an intuitive journey through a 3D architecture map.

What It Does

Code Snap analyzes a Git repository and turns it into an interactive 3D architecture graph for Snapchat Spectacles. The system identifies major components, relationships, files, and implementation layers, then renders them as nodes and connections in AR. Users can tap high-level nodes to expand deeper tiers, inspect relationships, and understand how parts of the codebase connect.

How We Built It

We built the project as two connected systems. The backend analyzer is a Python tool managed with uv that generates structured artifacts from a repository: evidence data, a full semantic analysis JSON, a nested visualizer map, Mermaid previews, and positioned scene data. The Spectacles side is a Lens Studio project using JavaScript, Spectacles Interaction Kit, and prefab-based rendering. CityGenerator.js loads generated visualizer data, spawns nodes and edges, handles tap-to-expand behavior, and keeps connections updated as nodes move.

Challenges We Ran Into

Backend

The hardest part was designing a data contract that preserved enough technical detail without overwhelming the AR experience. Large codebases produce dense graphs, so we had to separate the full analysis from the smaller renderable projection. We also had to normalize model output, validate relationships, support nested tiers, and make the Lens runtime handle expandable graph data reliably.

Frontend

One of the biggest challenges we faced was that none of us had prior experience with 3D modeling, VR, AR, or game design. Building TigerVerse pushed us into a completely new kind of frontend development.

Unlike a normal web app, we were not just placing buttons and text on a screen. We had to think about objects in 3D space, camera perspective, scale, depth, labels, movement, and how users would physically interact with the visualization. Even basic UI decisions became harder because the interface had to exist inside an AR environment instead of a flat browser window.

Lens Studio also introduced a new development model for us. We had to learn how scenes, prefabs, materials, meshes, scripts, and Spectacles-specific interaction components work together. On top of that, we had to make the experience usable: nodes could not overlap too much, text had to be readable, connections had to make sense visually, and expanding parts of the graph had to feel intuitive.

The frontend challenge was not only technical, but also conceptual. We were trying to answer a difficult design question: what should a codebase look like in 3D? We had to figure out how to reveal high-level structure first, then let users expand into deeper implementation details.

Accomplishments That We're Proud Of

We built a complete pipeline from repository analysis to AR visualization. The analyzer can generate deterministic artifacts, human-checkable Mermaid diagrams, and Lens-ready data. On the Spectacles side, we got interactive node expansion, hierarchical layout, draggable structures, and live connection updates working inside Lens Studio.

What We Learned

We learned that visualization quality depends heavily on the artifact contract. A raw dependency graph is not enough; the system needs semantic grouping, capped detail levels, and predictable projections. We also learned that AR interfaces need simpler, more intentional data than traditional desktop tools because readability and interaction space are limited.

What's Next For Code Snap

Next, we want to tighten the bridge between generated analyzer output and Lens Studio so visualizer data can be loaded with less manual conversion. We also want better node styling, richer file-level detail panels, smoother layout, and eventually collaborative AR sessions where multiple developers can inspect the same codebase together.