A friendly visual app for mapping ideas, code structure, and project stories into something you can explore, share, and export.
Map My Code, Friend is a modern TypeScript web app in the SWMMEnablement organization. The repository shows a TanStack Start foundation, Bun-based tooling, GitHub Pages deployments, and active recent development in src/, including JSON/PDF export work.[page:34][web:24]
This makes the project a strong fit for interactive documentation, concept mapping, code navigation, visual storytelling, and exportable engineering or software explainers.[page:34]
- 🧭 Turn code or ideas into navigable visual maps.
- 📄 Export results to JSON and PDF for sharing or archiving.
- 🧩 Present project structure in a way that is easier to understand than a raw file tree.
- 🎨 Create a more approachable front end for technical exploration.
- 🌐 Publish a polished experience through GitHub Pages.
| Layer | Current setup |
|---|---|
| Framework | TanStack Start, a full-stack framework for router-first apps.[web:24] |
| Language | TypeScript is the main language at 96.8%.[page:34] |
| Runtime | bun.lock and bunfig.toml indicate Bun-based development.[page:34] |
| Deployment | The repo shows GitHub Pages deployments.[page:34] |
| Testing | vitest.config.ts is present for test configuration.[page:34] |
| Structure | .lovable/, .github/workflows/, and src/ are already in place.[page:34] |
git clone https://github.com/SWMMEnablement/map-my-code-friend.git
cd map-my-code-friend
bun install
bun run devThen open the local URL from the dev server and start mapping your app, repo, workflow, or idea space.
map-my-code-friend/
├── .github/workflows/
├── .lovable/
├── src/
├── .gitignore
├── .prettierignore
├── .prettierrc
├── bun.lock
├── bunfig.toml
├── components.json
├── eslint.config.js
├── package.json
├── tsconfig.json
├── vite.config.ts
└── vitest.config.ts
The repository already looks like an actively evolving app rather than a blank starter, especially with recent commits and deployment history.[page:34]
Technical projects often have structure, logic, and relationships that are hard to understand from source files alone. A visual mapper with export support can make codebases, workflows, and engineering ideas easier to explain to teammates, reviewers, and stakeholders.[page:34]
- Map repository folders, routes, and components into an interactive graph.
- Build a “project explainer” mode for architecture walkthroughs.
- Add filters for modules, features, dependencies, or documentation status.
- Export snapshots for reports, onboarding, or design reviews.
- Create themed views for engineering education or software storytelling.
- Fork the repository.
- Create a feature branch.
- Commit clear, focused changes.
- Open a pull request with screenshots or export examples when relevant.
Because sometimes the best way to understand code is to see the shape of it.