ritesh Gupta

Code Eye - Next Js and Prisma Visulizer

by•
Code Eye is a personal tool that visualizes large Next.js codebases to make architecture easy to understand. It maps routes, file dependencies, and reverse dependencies, and generates clear ER diagrams if your Next.js project uses Prisma. It works with local projects and GitHub repositories. Useful for: onboarding into large codebases, safe refactoring, impact analysis, debugging, and understanding complex system architecture at a glance.

Add a comment

Replies

Best
ritesh Gupta
Maker
📌
I built Code Eye to solve a very real problem I kept running into: understanding large open-source Next.js projects without spending hours jumping between folders and files. Whenever I explored a new GitHub repo, my first questions were always the same: Where are the routes? How is the app structured? How do files depend on each other? If the project uses Prisma, how is the database designed? Reading code top-down didn’t scale. So instead of manually tracing things, I wanted a visual, high-level view of the architecture. Now my approach is simple: I paste an open-source Next.js GitHub link into Code Eye, and within seconds I can see the routing structure, file dependency graph, and Prisma schema design (if Prisma is used). That context makes it much easier to understand how the project works before diving into individual files. This completely changes how I explore codebases—less guessing, fewer surprises, and much faster onboarding. Next steps: deeper API visualization, AI-assisted insights for large projects, a VS Code extension, and better support for exploring multiple repositories together.