OpenPulse is a deployable dependency-graph explorer for public GitHub repositories. Enter a repository in owner/name format, let the FastAPI backend fetch its package.json, and inspect the resulting dependency graph in a performant 3D scene built with Next.js, react-three-fiber, and Three.js.
🎥 Full Demo Video: Watch on YouTube
🌐 Live Demo: OpenPulse
Dependency trees are easy to generate but hard to understand. Flat package lists hide which repositories are pulling in many direct dependencies, which packages look riskier than others, and how a project is structurally organized. OpenPulse turns that package list into an interactive graph that is quick enough for live demos and simple enough to deploy on Vercel and Render.
- Analyze a public GitHub repository through
GET /analyze?repo=owner/name. - Fetch repository metadata and decode the root
package.jsonthrough the GitHub API. - Extract direct dependencies only and cap the graph to 120 nodes for smooth rendering.
- Compute deterministic pseudo-random risk scores from package names.
- Fall back to a deterministic clustered demo dataset when analysis fails.
- Render nodes with
THREE.InstancedMeshand edges withLineSegments. - Inspect node details, risk, and connectivity from the side panel.
- Ship with CORS, health checks, env examples, and deployment-ready defaults.
- FastAPI serves
/analyze,/health, and the legacy/api/graph/*routes. - GitHub analyzer service fetches repository metadata and
package.jsonusing asynchttpxrequests. - Risk scoring hashes each package name to create a stable risk score from
0.12to0.88. - Graph payload returns compact graph JSON:
{
"nodes": [{ "id": "facebook/react", "type": "repository", "risk": 0.12, "size": 2.6 }],
"edges": [{ "source": "facebook/react", "target": "scheduler" }]
}- Next.js App Router hosts the dashboard shell.
- Zustand stores the graph and node selection state.
- react-three-fiber renders the scene.
- Three.js powers instanced spheres, line segments, orbit controls, and fog.
- Graph normalization converts backend graph payloads into clustered 3D positions for smooth exploration.
- Node.js 18+
- Python 3.11+
cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
uvicorn main:app --host 0.0.0.0 --port 8000 --reloadcd frontend
npm install
cp .env.local.example .env.local
npm run devOpen http://localhost:3000, enter a repository such as facebook/react, and click Analyze.
- Start the backend and frontend.
- Open the homepage.
- Enter
facebook/react. - Click Analyze.
- Wait for the staged loading messages:
Fetching repository...Building graph...Rendering...
- Drag to orbit, scroll to zoom, and click a node to inspect its details.
- If GitHub analysis fails, use Load Demo or let the automatic fallback graph render.
- Import the
frontenddirectory as a Vercel project. - Set the build command to
npm run buildand output defaults for Next.js. - Add an environment variable:
NEXT_PUBLIC_API_URL=https://<your-render-service>.onrender.com
- Deploy.
- Create a new Web Service pointing at the
backenddirectory. - Use the start command:
uvicorn main:app --host 0.0.0.0 --port $PORT- Add environment variables:
FRONTEND_URL=https://<your-vercel-app>.vercel.appCORS_ORIGINS=https://<your-vercel-app>.vercel.appGITHUB_TOKEN=<optional but recommended for higher rate limits>MAX_GRAPH_NODES=120
- Deploy and verify
GET /health.
API_HOSTAPI_PORTFRONTEND_URLCORS_ORIGINSGITHUB_TOKENGITHUB_API_BASEREQUEST_TIMEOUTMAX_GRAPH_NODESDATABASE_URLDATABASE_ECHO
NEXT_PUBLIC_API_URL
The analyzer explicitly returns useful API errors for:
- invalid repository format
- repository not found
- missing
package.json - GitHub API rate limits
- invalid
package.jsoncontent - repositories with zero direct dependencies
Regenerate the bundled demo dataset at any time:
python scripts/demo_data_generator.pyThis produces docs/demo_dataset.json with a 120-node clustered graph compatible with the frontend renderer.