CODEVERSE
An interactive 3D universe for exploring the software ecosystem.
Technologies as stars/nodes in an explorable universe; relationships form connections users can search, inspect and expand.
- CORE
- Next.js · TypeScript · React · R3F · Three.js
- DATA
- PostgreSQL · Neon · GitHub API · npm Registry API
- OPS
- Vercel · Playwright
CONTEXT / CONCEPT
A universe made of software.
CODEVERSE is an interactive 3D universe for exploring the software ecosystem. Technologies are represented as stars and nodes; the relationships between them form connections you can search, inspect and expand.
Instead of reading about a dependency graph, you move through it. Search for a technology, inspect it up close, and follow its connections outward — every link carries its relationship type and provenance, and the graph expands dynamically as you explore.
WHAT WAS BUILT
Built as a system, not a demo.
- Interactive 3D software universe
- Technology nodes
- Relationships between technologies
- Search
- Technology inspection
- Connected technology exploration
- Real GitHub metadata
- Real npm registry metadata
- Dependency exploration
- Relationship types and provenance
- Dynamic graph expansion
- Popularity and activity information
- PostgreSQL-backed catalog
- Persistent metadata snapshots
- API / server layer
- Caching
- Error and fallback states
- Responsive design
- Accessibility
- Performance optimization
- Production deployment
- Automated testing
TECHNICAL ARCHITECTURE
The engineering behind the universe.
The application layer is Next.js, TypeScript, React and Tailwind CSS; the universe itself is rendered with React Three Fiber and Three.js.
A PostgreSQL-backed catalog — hosted on Neon — stores the technology graph, with persistent metadata snapshots so node and relationship data survives beyond a single session. An API/server layer sits between the graph and the 3D client, adding caching along with designed error and fallback states.
Live GitHub and npm Registry APIs supply real repository and package metadata — popularity and activity included — while the graph expands dynamically as connected technologies are explored.
- RENDERING
- React Three Fiber · Three.js
- APP LAYER
- Next.js · TypeScript · React · Tailwind CSS
- CATALOG
- PostgreSQL on Neon — graph + metadata snapshots
- LIVE DATA
- GitHub API · npm Registry API
- DELIVERY
- Vercel — production deployment
- TESTING
- Playwright automated testing
THE RESULT
Ambition, shipped.
Built, tested and deployed: CODEVERSE runs in production on Vercel, covered by Playwright automated tests, with error and fallback states designed in from the start.
It is the portfolio's flagship demonstration of technical ambition — an immersive experience that treats the software ecosystem itself as the subject.