Synapse

Overview

Synapse is a collaborative learning map for AI study groups. It gives members a shared view of the curriculum: what has already been discussed, what the group is learning now, what comes next, and how topics connect.

The central interface is a visual graph rather than a conventional course outline. Members can follow prerequisite paths, inspect related concepts, open topic details, and reach shared learning resources without treating the curriculum as a rigid sequence.

For organizers, Synapse includes a protected management area for creating topics and maintaining their relationships without editing application code.

---

Learning Coordination Gap

Study groups rarely learn in a perfectly linear order. New concepts appear during discussion, one topic may depend on several foundations, and useful resources often live across external tools.

A document or checklist can record topics, but it does not clearly answer:

What should we understand first, how is this concept related to the rest of the curriculum, and where is the group focusing now?

Synapse addresses that coordination problem by making relationships and learning status visible in the same interface.

---

Product Approach

The product is organized around a small set of connected learning objects:

• Topics with category, difficulty, and learning status
• Directed prerequisite relationships
• Non-sequential related-topic relationships
• External notes, papers, videos, tutorials, repositories, and websites

Members can explore the map without signing in. Selecting a topic reveals its context, while dedicated detail pages provide descriptions, prerequisites, related topics, and resources.

The scope intentionally stays smaller than a learning management system. V1 focuses on discovery and curriculum maintenance rather than personal progress, comments, notifications, or an in-app editor.

---

Architecture

Synapse uses PostgreSQL through Supabase to store topics, relationships, and external resources.

The application separates the system into three feature areas:

1. Topics handle domain types, validation, persistence, detail views, and resource metadata.
2. Learning map transforms stored topics and relationships into React Flow nodes and edges.
3. Admin handles authentication, protected routes, and topic-management workflows.

Next.js Server Components perform page-level data access where possible. The interactive graph remains a Client Component because panning, zooming, selection, and node interaction require browser state.

Tests cover graph construction, topic-store mapping, write validation, detail rendering, and user interactions around the learning map.

---

My Contributions

I designed and built Synapse from the initial product specification through the deployed V1.

My work included:

• Defining a graph-oriented content model for topics, prerequisites, related concepts, and resources
• Building the interactive learning map and status-aware node and edge presentation
• Implementing topic directory and detail experiences
• Integrating Supabase and PostgreSQL for persistent curriculum data
• Building topic creation, editing, and relationship management workflows
• Adding password-based admin access and server-side route protection
• Creating seed data for an immediately useful 14-topic AI curriculum
• Adding tests around data mapping, validation, graph construction, and interface behavior
• Deploying the public application on Vercel

---

Technical Decisions and Tradeoffs

Graph Instead of Tree

AI concepts do not fit a single hierarchy. RAG, for example, connects language models, embeddings, vector databases, and context engineering.

The data model therefore supports multiple incoming and outgoing relationships. A prerequisite edge communicates learning order, while a related edge preserves conceptual connections without imposing a sequence.

This model is more expressive than a tree, but it also makes visual layout and edge clarity more important as the curriculum grows.

---

Server Data, Client Interaction

The application keeps database access and page-level loading on the server while isolating React Flow inside the interactive client boundary.

This avoids moving Supabase credentials or unnecessary data logic into the browser, while still supporting direct manipulation of the map.

The boundary adds a transformation step between stored domain objects and graph nodes, so dedicated mapping functions and tests are used to keep that conversion explicit.

---

External Resources Over an Editor

Synapse stores links and metadata for learning resources rather than duplicating note-taking tools.

This keeps V1 focused and allows Notion, Google Docs, GitHub, videos, papers, and tutorials to remain their own sources of truth. The tradeoff is that Synapse organizes access to knowledge rather than owning the content itself.

---

Lightweight Administration

Public members do not need accounts. Administrative actions are separated behind a password-protected session and server-side route checks.

This is appropriate for a small study-group deployment, but it is deliberately not a multi-tenant permission system. More granular identities and roles would be needed if the product expanded to multiple groups or untrusted organizers.

---

AI-Assisted Development Workflow

The build followed a spec-first, vertical-slice workflow. The product specification defined the core user loop, domain model, non-goals, and completion criteria before implementation began.

Repository-level agent guidance kept AI-assisted work aligned with the architecture: domain logic remained outside presentation components, Server Components were preferred for data access, and unnecessary abstractions were explicitly excluded.

Each slice added a complete user path—map exploration, topic details, then topic management—and paired implementation with focused tests. This made AI assistance useful for execution while keeping product decisions and system boundaries reviewable.

---

Results

The deployed V1 provides:

• A visual map of 14 seeded AI topics
• Distinct prerequisite and related-topic relationships
• Status-aware views for discussed, current, and future learning
• Topic detail pages with learning context and external resources
• A searchable topic directory with category and status filters
• Persistent Supabase-backed curriculum data
• Protected organizer workflows for creating and editing topics

The result is a focused tool that can support an actual study-group session without expanding into a full LMS.

---

Key Learnings

The main product lesson was that a shared curriculum is both a content-modeling problem and an interface problem.

A flexible graph can represent the relationships accurately, but the interface still needs to guide attention through layout, direction, status, and selection. Modeling every connection is not useful unless members can understand what to learn next.

The project also reinforced the value of explicit non-goals. Keeping notes external, member access public, and administration lightweight made it possible to ship the core learning loop without building a larger platform around it.

---

Future Directions

Potential next steps include:

• A topic inbox for capturing incomplete ideas before placing them on the map
• Improved layout controls as the graph grows
• Richer filtering and search across topics and resources
• Provenance and annotations for curriculum relationships
• Optional role-based access for larger groups
• Additional accessibility and mobile interaction refinement