Interactive visual map for React codebases. Scan a GitHub/GitLab repo and get an interactive dependency graph, re-render heatmap, bundle size analysis, and optimization recommendations.
# Clone and setup
git clone https://github.com/khamalismadie/component-atlas.git
cd component-atlas
cp .env.example .env
# Start with Docker
docker compose up
# Open
# Frontend: http://localhost:3000
# Backend API: http://localhost:8000/docs- Interactive Dependency Graph — D3.js force-directed graph showing component imports
- Component Search — Find any component by name
- Dependency Highlighting — Click a node to see ancestors and descendants
- Component Details — File path, props, export type, line count
- Re-render Heatmap — Color-coded nodes by render frequency (coming soon)
- Bundle Size Analysis — Per-component size breakdown (coming soon)
- Auto Recommendations — AI-powered optimization suggestions (coming soon)
| Layer | Technology |
|---|---|
| Frontend | Next.js 14, D3.js, Tailwind CSS, shadcn/ui |
| Backend | FastAPI, ts-morph, SQLAlchemy, PostgreSQL |
| Deployment | Docker Compose |
cd frontend
pnpm install
pnpm devcd backend
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt
uvicorn app.main:app --reloadMIT