An interactive knowledge graph explorer — where ideas connect.
Search any concept. Watch the knowledge universe unfold.
Synapse is an interactive knowledge graph explorer that visualises how concepts, people, events, and ideas are connected. Rather than reading siloed Wikipedia pages, users experience knowledge as a living, interconnected web — powered by 10K+ concepts sourced from Wikidata.
The graph is the interface. Every design decision removes friction so you can focus on discovery.
Screenshots / GIF coming in v0.1 launch — track progress in the Roadmap.
| Feature | Description |
|---|---|
| 🔍 Smart Search | Debounced search with instant dropdown suggestions (top 8 matches) |
| 🕸️ Force-Graph Canvas | GPU-accelerated, full-viewport force-directed graph — pan, zoom, drag |
| 🖱️ Node Interactions | Hover to highlight, click to focus, expand 1st-degree neighbours |
| 📋 Concept Panel | Slide-in details panel with description, category, and related concepts |
| 🎨 Dark + Neon Design | Cyan / indigo / violet accents on a deep-black canvas |
| 📱 Mobile-first | Touch-friendly interactions; panel adapts to bottom-sheet on mobile |
| ♿ Accessible | Keyboard navigation, ARIA labels, high-contrast text |
| Layer | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite 5 |
| Styling | Tailwind CSS, custom design tokens |
| State | Zustand (lightweight, no boilerplate) |
| Graph | react-force-graph-3d (GPU-accelerated) |
| API | Vercel Functions (serverless, auto-scaling) |
| Database | Supabase Postgres (RLS, Auth, free tier) |
| Data Pipeline | Python 3.10+, Wikidata API, NetworkX |
| Deployment | Vercel (web + API), Supabase (database) |
synapse/
├── apps/web/ # React + Vite frontend
│ └── src/
│ ├── components/
│ │ ├── layout/ # TopNavBar
│ │ ├── graph/ # GraphCanvas, EdgeLegend, GraphNode, GraphEdge
│ │ └── explore/ # SearchBar, ConceptPanel
│ ├── pages/ # HomePage, GraphExplorer
│ ├── store/ # Zustand stores (graphStore, searchStore)
│ ├── hooks/ # useForceGraph, useGraphStore
│ ├── lib/ # API client, utilities
│ └── types/ # graph.ts, concept.ts
├── services/api/ # Vercel serverless API
│ └── api/
│ ├── search.ts # GET /api/search?q=
│ ├── concepts.ts # GET /api/concepts/:id
│ └── relationships.ts # GET /api/concepts/:id/relationships
├── pipelines/ingestion/ # Python data ingestion
│ └── scripts/
│ ├── fetch_wikidata.py
│ ├── parse_graph.py
│ └── upload_to_db.py
└── datasets/schema/ # Postgres schema SQL
├── concepts.sql
└── relationships.sql
git clone https://github.com/maharshi878/synapse.git
cd synapse
# Install web app dependencies
cd apps/web && npm install
# Install API dependencies
cd ../../services/api && npm install
# Install Python pipeline dependencies
cd ../../pipelines/ingestion && pip install -r requirements.txt# apps/web/.env.local
VITE_API_URL=http://localhost:3001
# services/api/.env
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_anon_key# Run schema migrations in your Supabase SQL editor:
# datasets/schema/concepts.sql
# datasets/schema/relationships.sqlcd pipelines/ingestion
python scripts/fetch_wikidata.py
python scripts/parse_graph.py
python scripts/upload_to_db.py# Terminal 1 — web app
cd apps/web && npm run dev
# Terminal 2 — API
cd services/api && npx vercel devOpen http://localhost:5173 🎉
For a detailed walkthrough, see SYNAPSE_SCAFFOLDING.md.
Synapse uses a purpose-built dark design system:
Backgrounds: #050609 → #0a0e13 → #151d2a
Accents: #00d9ff (cyan) #6366f1 (indigo) #a855f7 (violet)
Text: #f1f5f9 (primary) #cbd5e1 (secondary)
Fonts: Bebas Neue (headers) · DM Sans (body) · JetBrains Mono (data)
Spacing: 4 px base grid
Animations: 150–300 ms ease-out
Full specifications are in SYNAPSE_DESIGN_SYSTEM.md and SYNAPSE_VISUAL_REFERENCE.md.
- Design system finalised
- Tech stack chosen
- Monorepo structure designed
- Database schema defined
- Deploy skeleton app to Vercel
- SearchBar + API integration
- GraphCanvas with force-graph
- ConceptPanel
- Node click / hover / expand logic
- Ingest 10K concepts from Wikidata
- Deploy to Vercel
- Mobile responsive (bottom sheet)
- Accessibility audit
- Performance optimisation
- Error handling
- 🚀 Launch!
- Vector embeddings & semantic search
- User authentication & bookmarking
- Analytics dashboard
- React Native mobile app
| Metric | Target |
|---|---|
| Homepage load | < 1 s |
| Search latency | < 300 ms |
| Node expansion | < 500 ms |
| Graph render | 60 fps (GPU) |
| Bundle size | < 200 KB gzipped |
| Lighthouse score | > 90 |
| Accessibility | > 95 axe score |
| Document | Description |
|---|---|
| SYNAPSE_EXECUTIVE_SUMMARY.md | ⭐ Start here — 5-minute project overview |
| SYNAPSE_DESIGN_SYSTEM.md | Complete visual design system |
| SYNAPSE_COMPONENTS.md | Production-ready React component examples |
| SYNAPSE_VISUAL_REFERENCE.md | Pixel-perfect specs, animations, responsive behaviour |
| SYNAPSE_SCAFFOLDING.md | Step-by-step setup instructions |
| SYNAPSE_QUICK_START.md | Copy-paste code snippets to get running fast |
| DOCS_OVERVIEW.md | Guide to all documentation in this repo |
Contributions, bug reports, and feature requests are welcome!
- Fork the repo
- Create a feature branch:
git checkout -b feat/amazing-feature - Commit your changes:
git commit -m "feat: add amazing feature" - Push to your branch:
git push origin feat/amazing-feature - Open a Pull Request
Please make sure your PR:
- Follows the existing code style
- Passes all tests
- Includes a clear description of the change
Distributed under the MIT License.
The knowledge graph awaits. 🌌
Built with ❤️ by maharshi878