RepoMind AI

An interactive architectural time-travel visualizer and codebase graph engine using Next.js & AI

Comment

Inspiration

Understanding complex codebases and their hidden dependency structures can be overwhelming for developers joining new projects or preparing architectural reviews. We wanted to build a visual, client-side dynamic tool that transforms raw source code into an interactive, visual dependency map powered by Gemini AI.

What it does

RepoMind AI allows developers to upload a full codebase folder or .zip file entirely on the client side. It parses import/export dependencies, computes graph metrics, generates interactive network layouts (Tree and Radial views), and allows deep-dive inspection of any single component. With Gemini AI integration, developers get automated architectural summaries, code explanations, and dependency risk evaluations. Users can also export the entire architecture to Mermaid.js format for instant GitHub documentation.

How we built it

  • Framework: Next.js (App Router), TypeScript, Tailwind CSS
  • Visualization: React Flow (@xyflow/react) for interactive canvas rendering & graph physics
  • Parsing Engine: Client-side AST parsing and JSZip integration for instantaneous offline folder extraction
  • AI Integration: Google Gemini API for automated code summaries and fallback local evaluation engines
  • Diagram Export: Custom Mermaid.js diagram generator logic

Challenges we ran into

  • Handling client-side folder parsing efficiently without hitting browser memory limits.
  • Computing optimal layout coordinates dynamically for complex component trees (Tree & Radial Layouts) without node overlapping.
  • Building a resilient fallback mechanism for Gemini API calls to ensure uninterrupted UI performance even under quota limits.

Accomplishments that we're proud of

  • Achieving 100% client-side privacy-first code parsing without uploading source code to external backend storage.
  • Delivering a smooth 60FPS visual canvas experience with zoom, pan, and real-time inspector drawer.
  • Seamless one-click export to standard Mermaid.js syntax for Markdown integration.

What we learned

Deep integration of client-side AST parsing with advanced React Flow state management, alongside building robust API fallback systems for LLM tools.

What's next for RepoMind AI

  • Real-time Git commit diff tracking to visualize architecture changes over time.
  • Support for additional programming languages beyond TypeScript and JavaScript (Python, Go, Rust).
  • Multi-repo dependency cross-mapping for microservice architectures.

Built With

Share this project:

Updates

Submission history