Synthetix

## 💡 Inspiration

Developers spend up to 70% of their time simply trying to understand existing code before they even write a single new line. Whether it’s onboarding to a new team or diving into a massive open-source repo, the "mental map" of how functions interact is invisible and difficult to build. We created Synthetix to make that invisible architecture visible, turning thousands of lines of code into a navigable, living map.

## 🚀 What it does

Synthetix is an AI-powered code architect that visualizes your repository in 3D.

• Instant Mapping: Provide a codebase, and Synthetix uses Gemini 3 Flash to parse dependencies and function flows.
• Interactive Graph: Using D3.js, it generates a force-directed graph where files are "hubs" and functions are "nodes."
• Contextual Intelligence: Click any node to get an AI-generated breakdown of that function’s purpose, its upstream dependencies, and its downstream impact—no more "grep-ing" through folders.

## 🛠️ How we built it

We chose a high-performance stack to ensure the experience feels "Flash" fast:

• Framework: Next.js 15 with App Router for a seamless full-stack experience.
• Brain: Gemini 3 Flash API via Google Generative AI SDK. Its 1M+ token context window allowed us to ingest entire repositories without complex chunking.
• Visuals: D3.js for the physics-based graph engine.
• State & Logic: A custom symbol-scraping pipeline that extracts imports and exports before passing them to the LLM for relationship mapping.

## 🧗 Challenges we ran into

The most difficult part was the Graph Density Problem. In large repos, everything connects to everything, creating a "spaghetti ball." We had to mathematically tune the D3 force simulation to handle high-node counts using the Inverse-Square Law for repulsion:

By dynamically adjusting the charge based on the number of nodes, we kept the visualization clean. We also faced challenges with AI JSON consistency; we overcame this by leveraging Gemini’s response_mime_type: "application/json" to ensure our D3 graph data never broke.

## 🏆 Accomplishments that we're proud of

• Context Depth: Successfully mapping cross-file dependencies (e.g., seeing how a utils function in one folder affects a page component in another).
• Performance: Achieving near-instant graph generation thanks to Gemini 3 Flash's low latency.
• UI/UX: Building a "Developer-Dark" interface that feels like a premium professional tool, not just a hackathon project.

## 🎓 What we learned

We discovered that the biggest bottleneck in AI developer tools isn't the AI's ability to code—it's the AI's ability to reason about structure. Learning to prompt Gemini for architectural "intent" rather than just syntax was a game-changer. We also deepened our knowledge of SVG physics and complex state management in Next.js.

## 🔮 What's next for Synthetix

• IDE Integration: A VS Code extension to see the "Synthetix Map" live as you type.
• PR Visualizer: Automatically generate a "Before vs. After" graph for GitHub Pull Requests so reviewers can see exactly what logic paths are changing.
• Live Debugging: Overlaying real-time stack traces onto the graph to visualize where errors are bubbling up.

Built With

• d3.js
• gemini
• next.js
• react
• tailwind
• typescript