"Every codebase tells a story. Code Dash makes it visible."
A developer dashboard that scans any local project directory and renders comprehensive visual analytics — lines of code, file structure, language distribution, complexity metrics, token counts, dependency maps, and project health scores.
Built with zero frameworks — pure TypeScript + DOM, custom SVG charts, served as a local web application.
Point Code Dash at any folder. Within seconds, see everything about your project.
- Language Breakdown — donut chart + detailed stats per language
- File Structure — treemap and sunburst visualizations of your directory tree
- Lines of Code — total, by language, by folder, with bar charts and histograms
- Complexity Analysis — regex-based heuristic complexity scoring per file
- Token Counts — approximate GPT-style token estimation (useful for AI context budgeting)
- File Size Distribution — histogram of file sizes across the project
- Dependency Map — network graph of import/require relationships
- Project Health Score — composite 0-100 score based on README, tests, license, structure
- Top Files Report — largest, most complex, most connected files at a glance
- Scan History — revisit and compare past scans
- Node.js 18+ installed
# Clone the repository
git clone https://github.com/JonathanJDCampos/CodeDash.git
cd CodeDash
# Install dependencies
npm install
# Start the dev server
npm run devThis launches both the backend (Express API) and frontend (Vite dev server). Open the URL shown in your terminal (typically http://localhost:5173).
- Pick a directory — use the directory picker to select any local project folder
- Scan — Code Dash walks the file tree, analyzes every file, and computes all metrics
- Explore — browse the dashboard panels, hover over charts for details, drag panels to reorder
- Export — download the full scan result as JSON
- History — revisit previous scans from the sidebar
| Command | Description |
|---|---|
npm run dev |
Start dev server (backend + Vite frontend) |
npm run build |
TypeScript compile + Vite production build |
npm test |
Run tests with Vitest |
npm run preview |
Preview the production build |
| Layer | Technology |
|---|---|
| Language | TypeScript 5.x (strict mode) |
| Bundler | Vite 6.x |
| Testing | Vitest |
| Backend | Node.js + Express 5.x |
| Frontend | Pure DOM — zero frameworks |
| Charts | Custom SVG rendering — no chart libraries |
| Runtime deps | express only |
src/
├── server/ — Express backend, scanner pipeline, file analysis
│ └── routes/ — API endpoints (scan, browse, history)
├── client/ — Pure DOM frontend dashboard
│ ├── charts/ — Custom SVG chart components
│ ├── panels/ — Dashboard panel components
│ ├── animations/ — Entrance and transition animations
│ └── styles/ — CSS (one file per component)
└── shared/ — Types and defaults shared between client and server
Data flow: User picks a directory → backend walks the file tree → analyzes each file (LOC, complexity, tokens, language) → computes aggregates and health score → streams results to the frontend → dashboard renders panels with animated SVG charts.
- Dark theme with layered depth
- Neon accent palette — cyan, magenta, green, orange on near-black
- JetBrains Mono for data, Inter for UI text
- Glow effects on charts and interactive elements
- Animated entrances — panels and charts fade/slide in on load
MIT