I Built a Personal Knowledge Graph App — Here's the Full Stack Behind It

Alperen Eser — Thu, 09 Apr 2026 09:24:44 +0000

You read Sapiens, then watched Inception, and felt a connection between them. Spotify didn't suggest it. Goodreads didn't know about it. That connection existed only in your mind.

I built Synaptive to make those invisible connections visible.

What is Synaptive?

Synaptive is a personal knowledge graph app. You add the books you read, movies you watch, podcasts you listen to — then draw connections between them and write why they're linked.

The result is a visual map of your intellectual journey that no algorithm could create.

🔗 Live: synaptive.app

The Stack

Here's what powers it:

Next.js 14 (App Router) — SSR/SSG/ISR, API routes, everything in one repo
TypeScript — strict mode, no any
PostgreSQL + Prisma ORM — type-safe database layer
NextAuth.js v5 — GitHub + Google + credentials auth with email verification
@xyflow/react (React Flow) — interactive node-based graph editor
Tailwind CSS + shadcn/ui — design system with dark/light themes
Framer Motion — page transitions and micro-interactions
next-intl — full i18n (English + Turkish), localePrefix: 'as-needed'
Resend — transactional emails (verification, welcome, password reset)
Docker Compose — local dev (PostgreSQL + Redis)
DigitalOcean — production server, Docker-based deployment

Key Features

🧠 Knowledge Graphs
Create multiple graphs like "Books That Changed Me" or "2026 Watchlist". Each graph has its own canvas.

🔍 Real API Search
Search across Open Library, TMDB, Spotify, YouTube, RAWG, Listen Notes, Wikipedia, and Semantic Scholar. Add content with one click.

✍️ Personal Notes
Every node has a personal note — not a review, but a reflection. "What did this give you?" is the core question.

🔗 Meaningful Connections
Draw edges between nodes and explain why they're connected. Choose from edge types: Same Theme, Inspired By, Response To, Continuation, Contradicts.

👤 Public Profiles
Share your graph at synaptive.app/u/username. Full SSR for SEO — bots see everything, users get the interactive canvas.

🌍 i18n Done Right
Every string goes through messages/en.json and messages/tr.json. Server components use getTranslations(), client components use useTranslations(). Separate URLs per locale, hreflang tags, localized sitemap.

📱 PWA + Mobile-First
Installable as a standalone app. Bottom nav on mobile, side panel on desktop. Touch-friendly graph interaction.

📧 Email Verification Flow
Register → verification email → verify → welcome email. Credentials users must verify before login. OAuth users are auto-verified.

📝 Blog with SEO
Static blog at /blog/[slug] with bilingual content, JSON-LD structured data, and sitemap integration.

Architecture Decisions

Why React Flow instead of force-directed graphs?
I started with react-force-graph-2d but switched to @xyflow/react. Users want to place their nodes intentionally, not watch them bounce around. A knowledge graph is personal — the layout should be too.

Why not a SPA?
SEO matters. Public profiles and shared graphs need to be crawlable. Next.js App Router gives me SSR where I need it and client interactivity where it counts.

Why localStorage drafts?
Users were losing form data when accidentally closing modals. A simple useDraft hook with debounced localStorage writes solved it. Draft clears on successful submit.

Why ISR for public pages?
Public profiles don't change every second. A 5-minute revalidation window means fast loads for visitors while keeping content fresh enough.

What I Learned

i18n is not an afterthought. Adding it later is painful. I baked it in from day one and it paid off.
Email verification changes the auth flow significantly. You can't just add a check — the entire register → login → redirect chain needs rethinking.
Mobile overflow is death by a thousand cuts. Every minmax(260px, 1fr) grid, every flex container, every pill filter — they all need mobile testing.
Seed data makes your app feel alive. An empty explore page kills interest. 18 users with 53 graphs and 137 nodes makes it feel like a community.

Try It

👉 synaptive.app

Create an account, build your first graph, and connect the content that shaped your thinking.

The connection is made by you, not an algorithm.

Built by Alperen Eser. If you have questions about the architecture or want to discuss knowledge graphs, drop a comment below.