Skip to content

README.md

Latest commit

 

History

History
88 lines (65 loc) · 4.64 KB

README.md

File metadata and controls

88 lines (65 loc) · 4.64 KB

Code Eye

Code Eye Demo

Code Eye is a powerful Next.js Code Visualizer designed to help developers understand complex application structures and database schemas at a glance. It provides interactive visualizations for Next.js App Router projects and Prisma schemas, making it easier to analyze dependencies, routing patterns, and data models.

🚀 Key Features

  • Dependency Visualization: comprehensive graph of your project's file dependencies using recursive directory scanning.
  • Reverse Dependency Analysis: Instantly see "Imported By" relationships to understand the impact of changes.
  • Next.js App Router Support: Automatically detects and categorizes App Router conventions (Pages, Layouts, API Routes, Route Groups, etc.).
  • Prisma Schema Visualization: Interactive ER diagram generation from your schema.prisma files using @prisma/internals.
  • Git Integration: View repository details, current branch, and latest commit information directly in the dashboard.
  • Interactive Graphs: Powered by React Flow with custom node types and layout algorithms.

🛠️ Important Packages

This project relies on several key open-source libraries to deliver its functionality:

  • Core Framework: next, react, tailwindcss
  • Visualization:
    • @xyflow/react (React Flow): For rendering the interactive node-based graphs.
    • d3 & d3-force: For physics-based graph layout simulations.
    • elkjs: For advanced layered graph layouts (entity-relationship diagrams).
  • Analysis Engine:
    • @babel/parser & @babel/traverse: For parsing JavaScript/TypeScript ASTs to extract imports and exports.
    • @prisma/internals: specifically getDMMF (Data Model Meta Format) is used to parse schema.prisma files into structured objects.
    • simple-git: For extracting repository metadata.
  • UI Components:
    • framer-motion: For fluid animations and transitions.
    • lucide-react: For iconography.
    • @radix-ui/*: For accessible UI primitives.

⚙️ How It Works

Dependency Analysis

The dependency analyzer (lib/analyzers/project-analyzer.js & dependency-analyzer.js) works by:

  1. Scanning: Recursively walks through your project directory using fast-glob.
  2. Parsing: Reads each file and uses Babel's AST parser to identify import declarations and export statements.
  3. Resolution: Resolves path aliases (like @/components) and relative paths to absolute file locations.
  4. Graph Building: Constructs a bidirectional graph where nodes represent files and edges represent imports.

Prisma Schema Visualization

The schema analyzer (app/api/analyze-schema/route.js) processes your Prisma files:

  1. Parsing: Uses Prisma's internal SDK to convert the raw schema into a DMMF object.
  2. Transformation: Maps models and enums to React Flow nodes (databaseSchema type).
  3. Relation Linking: Identifies relationships (1:1, 1:N, N:N) and creates edges with appropriate labels and foreign key details.

Graph Rendering

The visualizations are rendered using React Flow, but with a custom layer of intelligence:

  • Custom Nodes: DependencyNode and SchemaNode components render rich details like file types, stats, and database columns.
  • Layout Management: Uses a combination of Dagre (for hierarchical layouts) and D3 Force (for organic clusters) to ensure the graph is readable and organized.

📦 Installation & Use

Clone the project and install dependencies to get started.

# Clone the repository
git clone https://github.com/Riteshgupta2906/code-visualizer.git

# Navigate into the directory
cd code-visualizer

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 with your browser.

You can analyze a project in two ways:

  1. Local Path: Enter the absolute path of a local Next.js project.
    • Tip: Navigate to the project folder in your terminal and run pwd to get the full path, then paste it.
  2. GitHub URL: Enter the URL of any public GitHub repository (e.g., https://github.com/vercel/next.js). Code Eye will clone and analyze it automatically.

🔮 Future Roadmap

We are constantly working to improve Code Eye. Here is what's coming next:

  • VS Code Extension: Bring the power of Code Eye directly into your editor for seamless context switching.
  • API Call Visualization: specialized graph layer to visualize HTTP requests and API interactions within your app.
  • Multi-Project Support: Ability to analyze and switch between multiple projects without restarting the server.