Navvi - AI Onboarding Tool

Navvi was inspired by the real pain point that developers face when joining new codebases. The inspiration came from several things, namely: Time waste (new developers spending weeks or months trying to understand complex codebases); Inefficient onboarding (senior developers repeatedly explaining the same concepts to junior developers); Outdated documentation (traditional documentation that quickly becomes stale and unhelpful); and more. Therefore, I wanted to build a tool to tackle this problem, and perhaps have it be a little more interesting than a gpt-wrapper.

This is an AI-powered onboarding buddy that transforms how new developers understand codebases by providing visual maps of system architecture, critical code paths, interactive tutorials, dependency graphs, code complexity analysis with AST parsing. A security-first approach has been taken with Navvi with the use of zero-knowledge architecture, where code analysis happens entirely client-side. The platform uses GitHub OAuth for authentication, analyzes repositories in real-time, and creates personalized learning paths based on user experience level, work environment, and learning preferences.

Tech Stack:

Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS Authentication: NextAuth.js with GitHub OAuth Analysis Engine: Custom AST parser using Babel for JavaScript/TypeScript Database: PostgreSQL with Prisma ORM Animations: Framer Motion for smooth UI interactions Visualizations: D3.js for dependency graphs

Architecture:

Client-Side Processing: Code analysis happens entirely in the browser for security Zero-Knowledge Design: Only cryptographic hashes are sent to servers, never actual code content Modular Analysis Engine: Separate modules for complexity, dependency analysis, and pattern detection Real-time Progress Tracking: Live analysis updates with detailed progress indicators

Key Components:

Custom AST parser for JavaScript/TypeScript files Complexity calculation algorithms (cyclomatic, cognitive, halstead) Architecture pattern detection and component relationship mapping Interactive UI with dark theme and glassmorphism effects Multi-step onboarding flow with personalized preferences

Technical Challenges:

TypeScript Integration: Missing type definitions for Babel parser and traverse; Authentication Flow: Race conditions and client-side errors with NextAuth.js and Prisma adapter; Real AST Parsing: Building a robust parser that could handle various JavaScript/TypeScript patterns; Performance: Balancing rich visualizations with fast loading times; And all sorts of other issues.

Security Challenges:

Zero-Knowledge Proof: Implementing client-side analysis that proves code never leaves the browser; Transparency: Making the security approach completely auditable and verifiable.

Achievements:

Real Code Analysis: Built a working AST parser that actually understands code structure, and not just AI chat Zero-Knowledge Architecture: Successfully implemented client-side processing with cryptographic proof Interactive Visualizations: Created smooth, responsive dependency graphs and architecture maps Smooth Animations: Professional micro-interactions and transitions throughout the app Live Security Demo: Interactive proof that code analysis happens entirely client-side Transparent Architecture: Open source analysis engine that users can inspect and verify Cryptographic Verification: Hash-based proof that code content is never transmitted

Feature Expansion for Navvi:

Test Coverage Integration: Analyze test files and coverage metrics Export Functionality: Generate PDF reports and interactive documentation Team Collaboration: Shared analysis sessions and team onboarding workflows API Integration: Support for analyzing code from other platforms beyond GitHub Performance Optimization: Faster analysis for large repositories Language Support: Extend to more programming languages (Java, C++, Go, Rust) Advanced Metrics: More sophisticated complexity and maintainability analysis Machine Learning: AI-powered insights and recommendations based on code patterns

Built With

• nextauth
• nextjs
• postgresql
• prisma
• react
• tree-sitter
• typescript