GoShip
How It WorksChallengesPricingEmployers
Sign InGet Started
0developers
0companies
0assessments scored
How It Works
|Pricing
|Challenges
|Employers
|Privacy
|Terms
GoShip© 2026
Get updates
Twitter·GitHub
Systems nominal
BUILDMID

Build a Dependency Graph Visualizer

75 minutes
0 completed
d3data-visualizationnpmreact

Description

Build a Dependency Graph Visualizer

Build a tool that parses a package.json and renders an interactive force-directed dependency graph.

Requirements

  • Upload or paste a package.json file
  • Parse dependencies and devDependencies
  • Render an interactive force-directed graph (nodes = packages, edges = dependencies)
  • Click a node to see package details (version, description from npm registry)
  • Color-code nodes: green for deps, blue for devDeps, red for outdated
  • Search/highlight specific packages in the graph
  • Zoom and pan controls
  • Technical Notes

    Use D3.js force simulation or a library like react-force-graph. Fetch package info from the npm registry API.

    Bonus Points

  • Show transitive dependencies (depth selector)
  • Bundle size display per package
  • Vulnerability warnings from npm audit data
  • You will be guided through MCP setup before the timer starts