CodeMap is a full-stack application that analyzes software repository structures and file dependencies to generate beautiful, interactive architecture visualizations using Google Gemini and Groq AI engines.
CodeMap provides developers with an intuitive way to visualize and understand complex codebases. By uploading a .zip file or providing a Git URL, users can instantly see a high-level architectural diagram of their project. The system scans the codebase, extracts dependencies, and leverages advanced Large Language Models (LLMs) to deduce structural boundaries, explain core components, and generate automated documentation.
- Repository Ingestion: Upload repositories via ZIP archives or clone directly from Git URLs.
- AST-less Directory Scanning: Recursively parses directory trees to extract JavaScript/TypeScript file imports, exports, and local dependencies.
- Interactive Visualization: Renders dynamic architecture graphs on the frontend.
- Dual-Engine AI Integration: Uses Google Gemini (
gemini-2.5-flash) as the primary engine with a Groq (llama-3.3-70b-versatile) fallback for robust architecture inference and code explanation. - Automated Documentation: Generates comprehensive module-level README files based on codebase analysis.
- Persistent Caching: Stores repository metadata and architecture analysis in MongoDB Atlas.
- Frontend: Next.js (React 19), Tailwind CSS v4, TypeScript, Lucide React
- Backend: Node.js, Express.js, MongoDB Atlas (Mongoose), Multer, Adm-Zip
- AI & Integration: Google Gen AI SDK (
@google/genai), Groq API Integration - Root Tooling: Concurrently (for unified development execution)
- frontend/: The Next.js web application for user interactions and architectural graph visualization.
- backend/: The Express.js API server handling business logic, repository scanning, LLM interactions, and database connections.
- ai/: The AI sandbox containing standalone LLM evaluation tests, script runners, and prompt engineering resources.
- package.json: Root configuration for unified project installation and execution.
-
Clone the repository:
git clone https://github.com/rajvirxai/CodeMap-AI-Powered-Code-to-Architecture-Visualizer.git cd CodeMap-AI-Powered-Code-to-Architecture-Visualizer -
Install all dependencies: Run the unified install script from the root directory to install dependencies for the root, frontend, and backend simultaneously:
npm run install-all
To run the project, configure the following environment variables in their respective directories:
PORT=5000
GEMINI_API_KEY="your_gemini_api_key_here"
GROQ_API_KEY="your_groq_api_key_here"
MONGODB_URI="your_mongodb_atlas_connection_string"# Optional: Defaults to http://localhost:5000 if not provided
NEXT_PUBLIC_BACKEND_URL="http://localhost:5000"You can start both the frontend and backend servers concurrently from the root directory:
npm run dev- The Frontend will be available at: http://localhost:3000
- The Backend API will be available at: http://localhost:5000
- Frontend: The user provides a repository (via ZIP upload or Git URL) through the Next.js interactive dashboard.
- Backend: The Express server securely downloads, extracts, and scans the codebase, producing a structured JSON dependency tree while filtering out unwanted directories (e.g.,
node_modules,.git). - AI: The structured tree is transmitted to the AI engine (Gemini or Groq) to deduce the overarching software architecture, module boundaries, and core dependencies. The results are cached in MongoDB and returned to the frontend for interactive visual rendering.
The CodeMap platform was collaboratively built by:
- Leadership: Rudra Singh (Project Mentor)
- Frontend Team: Pragya Singh, Sanchita Samadder
- Backend Team: Rajvir Singh, Sombodhi Pandit
- AI Team: Oitrika Bhattacharjee, Vaibhav Shaw
For deep dives into specific subsystems, refer to their dedicated documentation:
- Frontend README
- Backend README
- AI README
This project is distributed under the ISC License.