Architecture Visualizer: Smart Codebase Mapper

When developers, security auditors, or open-source contributors jump into a massive, unfamiliar codebase, navigating thousands of files across deeply nested directories can feel incredibly overwhelming. Standard tools often leave developers drowning in dense terminal outputs or clunky local file explorers, wasting valuable hours just trying to understand the basic structural hierarchy. To solve this, I built the Architecture Visualizer—a full-stack, production-ready solution designed to completely streamline codebase onboarding and architectural audits. It dynamically maps out project directories into a clean, interactive, and highly responsive dark-mode tree view directly in the browser. Built with a decoupled architecture, the system utilizes a Next.js (React/TypeScript) frontend deployed on Vercel, communicating seamlessly with a Python/Flask REST API hosted on Render. To maximize speed and minimize memory consumption, the application leverages real-time lazy loading. It scans and streams directory contents on demand the exact moment a user expands a folder, preventing browser lag even on massive repositories. A core innovation of this project is its Intelligent Noise-Reduction engine. Instead of forcing users to scroll through autogenerated dependencies, the backend automatically filters out heavy, irrelevant system directories like node_modules, .next, and virtual environments. This ensures that engineers only focus on the meaningful source code. By providing a high-level visual overview of complex systems, Architecture Visualizer significantly reduces onboarding friction, accelerates the developer workflow, and perfectly aligns with modern demands for intelligent system mapping and architectural monitoring.