Skip to main content

Synapse Notes

01 The Vision

Every great app starts with a problem worth solving. Synapse Notes emerged from the frustration of losing connections between ideas scattered across countless documents.

types/note.ts 
// The spark that started it all
interface Note {
  id: string;
  content: string;
  connections: string[];
  createdAt: Date;
}

02 Building the Foundation

The architecture needed to support bidirectional linking, real-time sync, and a responsive graph visualization. React provided the UI layer while Supabase handled the real-time data layer.

lib/notes.ts 
// Real-time subscription for note updates
const { data, error } = await supabase
  .from('notes')
  .select('*, connections(*)')
  .eq('user_id', userId)
  .order('updated_at', { ascending: false });

03 Visualizing Connections

D3.js brings the knowledge graph to life, rendering connections as an interactive force-directed layout where ideas orbit around central concepts.

components/KnowledgeGraph.tsx 
// Force simulation for the knowledge graph
const simulation = d3.forceSimulation(nodes)
  .force('link', d3.forceLink(links).id(d => d.id))
  .force('charge', d3.forceManyBody().strength(-400))
  .force('center', d3.forceCenter(width / 2, height / 2));

04 The Final Touch

Performance optimization and accessibility ensured Synapse Notes could handle thousands of connected notes while remaining usable for everyone.

components/NoteList.tsx 
// Virtualized list for performance
<VirtualizedNoteList
  notes={filteredNotes}
  rowHeight={72}
  overscan={5}
  onNoteClick={handleNoteSelect}
/>
synapse_notes
ready