01
the problem
Unfamiliar JavaScript and TypeScript repositories are slow to understand when structure, symbols, and dependencies must be traced by hand.
case study 01 / Developer tooling
An AST-based repository explorer that turns source files into an interactive dependency map with searchable symbols, onboarding guidance, and lightweight risk signals.
01
Unfamiliar JavaScript and TypeScript repositories are slow to understand when structure, symbols, and dependencies must be traced by hand.
02
Designed and implemented the full project, from repository scanning and TypeScript AST traversal to graph construction, search ranking, heuristics, and the React Flow interface.
03
Use the TypeScript Compiler API instead of text matching so imports, exports, named functions, arrow functions, and classes are extracted from syntax nodes.
visual evidence pending
No repository screenshot is published for this project. A real application capture should replace this clearly marked placeholder.
stage 01
Repository
stage 02
File scanner
stage 03
TypeScript parser
stage 04
Symbol extraction
stage 05
Dependency graph
stage 06
Search, risk & visualisation
Scans the current local workspace or a public GitHub repository for JavaScript and TypeScript source files.
Extracts imports, exports, functions, arrow functions, and classes with the TypeScript Compiler API.
Builds folder containment and resolvable local-import edges, then renders them with React Flow.
Ranks repository search matches across filenames, paths, summaries, symbols, and imports.
Generates a six-file onboarding path, external dependency list, and rule-based file-risk hotspots.
Public GitHub scans are unauthenticated and limited to the first 80 supported files.
Import resolution handles relative paths and the @/ alias, not every tsconfig path mapping.
Risk and onboarding results are explainable heuristics, not semantic complexity analysis.
The repository currently has lint and build checks but no automated test suite.
Resolving local import specifiers to real files while keeping folder relationships and dependency edges understandable on one graph.
Static analysis becomes more useful when its heuristics are transparent and its limitations are visible to the user.