📊 Interactive Documentation Interface

Code-y generates a rich, interactive web interface that serves as your central hub for exploring and understanding your codebase.

Multi-View Dashboard

Navigate your project through specialized views tailored to different code entity types:

  • Component Explorer: Browse all React components in your project. View their props, methods (for class components), source code, AI-generated descriptions, and relationships. Includes filtering and search capabilities.
  • Function Library: A dedicated view for all standalone functions and custom hooks, making it easy to find and understand utility functions and reusable logic.
  • Class Browser: Explore object-oriented structures, view class hierarchies, methods, and properties.
  • Method Inspector: Deep dive into the details of individual class methods or component lifecycle methods.

Advanced Visualization Tools

Visual representations can dramatically improve understanding of complex systems:

  • Interactive Relationship Graph:
    • A dynamic, force-directed network visualization of your codebase.
    • Nodes represent components, functions, modules, etc., and edges represent their relationships (imports, calls, renders).
    • Full zoom, pan, and node focusing controls.
    • Filter nodes by type or connection strength to reduce clutter.
    • Utilizes real-time layout algorithms for an organic and explorable graph.
  • Code Architecture Overview:
    • File Structure Visualization: A tree view of your project's directory structure, integrated with documentation.
    • Dependency Flow Diagrams: Visualize how data and control flow between different modules and components.
    • Component Hierarchy Trees: See how your React components are nested and composed to build your UI.
    • Import/Export Relationship Maps: Clearly illustrate the web of dependencies created by module imports and exports.

Comprehensive Search & Discovery

Find what you need quickly and efficiently:

  • Global Search: A powerful search bar to find any code entity (component, function, file, etc.) across your entire project by name or keyword.
  • Semantic Search (AI-Powered): Ask questions or describe functionality in natural language (e.g., "show me functions related to user authentication") to find relevant code, powered by vector embeddings.
  • Advanced Filtering: Granular filtering options within each explorer view (e.g., filter components by number of props, filter functions by file type).
  • Similarity Explorer: A dedicated interface to browse and analyze code snippets that Code-y has identified as similar or duplicated, highlighting opportunities for refactoring.

Code Quality Analysis Insights

Gain insights into the health and structure of your codebase:

  • Duplicate Code Reports: Detailed listings of duplicated or highly similar code sections, often categorized by severity or potential impact.
  • Similarity Warnings: Visual cues or warnings for potentially redundant implementations.
  • Relationship Analysis Metrics: Understand component coupling (how interconnected components are) and cohesion (how focused a module's responsibilities are).
  • Architecture Insights: High-level summaries and visualizations of your codebase structure, helping to identify architectural patterns or anti-patterns.