🔖 Introduction
About the project
Smart Notes is a modern productivity application designed to transform static personal knowledge into an interactive, AI-powered experience. Built for students and professionals who need to manage growing volumes of information, this project addresses the difficulty of quickly retrieving specific details from historical notes.
I developed a full-stack solution featuring a Retrieval Augmented Generation (RAG) architecture. By implementing semantic search with Supabase pgvector and OpenAI embeddings, I enabled a context-aware chat interface where users can "talk" to their notes. The result is a highly responsive system that doesn't just store text, but understands it, providing instant answers based on the user's personal knowledge base.
🤔 Problem space
Users struggle with "data graveyards" where knowledge is easy to record but impossible to find or synthesize quickly.
Problem: Inefficient Keyword Search
Traditional applications rely on exact keyword matching. If a user forgets the specific phrasing used months ago, the information is effectively lost.
Current solution: Manually scrolling through hundreds of notes or guessing keywords.
Problem: Context Fragmentation
Knowledge is scattered across local notes, Notion, and Google Docs, leading to high cognitive load during context switching.
Current solution: Opening multiple browser tabs and apps to find a single piece of info.
Requirement: Intelligent Synthesis
Users need more than just a list of notes; they need a system that can synthesize answers and provide direct insights from their personal data. Current solution: Manually reading through several old notes to summarize a topic.
Goals
Company objective 🎯
To build a state-of-the-art AI Knowledge Hub that consolidates fragmented information into a single, searchable, and interactive "brain" using modern web technologies.
Project goals
Effortless Knowledge Retrieval: Reduced information search time from minutes to seconds by allowing users to query their notes with natural language instead of manual scrolling.
Unified Workspace Intelligence: Eliminated context-switching by centralizing fragmented data from Notion and Google Docs into a single, AI-powered interactive "brain."
Intelligent Data Synthesis: Moved beyond simple storage to active synthesis, enabling the automatic generation of summaries and connections across unrelated notes.
Responsive & Modular Architecture: Delivered a high-performance system that scales to hundreds of notes without degradation in speed, using a modular design for future integrations.
User Stories
Knowledge Worker / Researcher
The Researcher uses the app to centralize learnings from various papers and documents, often needing to find "that one specific insight" from months ago.
Goals: Quickly synthesize summaries from hundreds of previous entries.
Needs: Powerful semantic search that understands intent over keywords.
Characteristics: Highly organized but handles high volumes of information.
Product Manager / Multi-Platform User
The Admin/PM manages projects across Notion and Google Docs and needs to query all platforms simultaneously without manual data entry.
Goals: Have a unified chat that "knows" everything stored in Notion and local notes.
Needs: Secure OAuth integrations and automated syncing via MCP servers.
Characteristics: Uses multiple SaaS tools and values workflow efficiency.
🌟 Design space
UI Design
The interface focuses on Minimalist Productivity. I chose a two-pane layout: a clean, grid-based dashboard for managing notes on the left, and a sophisticated, floating AI chat panel on the right. This layout allows for simultaneous content creation and AI-assisted interrogation. The design uses Glassmorphism for the AI panel and sidebar to create a sense of depth and hierarchy, while subtle micro-animations (like smooth streaming text and hover transformations) make the app feel "alive."
High-fidelity design
The final design implements a "Modern Dark Mode" with high contrast and accessibility in mind.
Design system 🎨
To maintain consistency and speed up development, I utilized a system built on ShadCN/UI and customized it with a Tailwind CSS v4 backbone.
Why a Design System?
Consistency: Ensuring that every button, input, and modal follows the same visual language across different platforms (Local, Notion, Google Docs).
Modularity: By building reusable atomic components (like ChatMessage, PromptInput, and NoteCard), I was able to iterate on complex features without breaking existing UI.
Tokens: I used a custom color palette with OKLCH color values to ensure vibrant, consistent branding that adjusts perfectly between light and dark modes.
Development Phase
Technology Stack Selection
1. Core: Next.js 16 (App Router) & React 19
Performance: Used the latest server component features to reduce client-side bundle size.
Real-time UX: Leveraged React 19’s actions and hooks for seamless UI updates.
2. AI Strategy: Vercel AI SDK v6 & OpenAI
Streaming Response: Provided instant feedback using the useChat hook, delivering a premium "typing" feel.
Tool Calling: Integrated GPT-4o with custom tool definitions, allowing the model to decide when to perform a semantic search.
3. Database: Supabase with pgvector
Semantic Search: Unlike traditional databases, pgvector allows for cosine similarity searches, finding notes based on meaning rather than keywords.
Security: Implemented Row Level Security (RLS) to ensure all user data and embeddings remain isolated and secure.
High-Level Architecture Diagram
The system utilizes a modern RAG (Retrieval-Augmented Generation) architecture to bridge the gap between static user knowledge and real-time AI intelligence.
Database Design
Key Features of the Software
Intelligent Semantic Search
Decision: Chunking & Overlapping
To ensure no context is lost between paragraphs, I implemented a custom chunking strategy.
Implementation: Notes are split by double newlines and indexed separately, allowing the AI to pinpoint the exact relevant section of a large document.
Challenges Faced and Solutions
Problem: AI SDK Versioning & Breaking Changes
During development, the project transitioned between stable and cutting-edge versions of the Vercel AI SDK (v5/v6). Key properties like isLoading and handleSubmit were deprecated or moved, causing significant TypeScript errors and breaking the chat UI's reactivity.
Solution: I refactored the useChat implementation to align with the latest modular architecture of the SDK. Instead of relying on legacy properties, I derived the loading state from the SDK's internal status state and implemented custom message handlers to ensure compatibility with the updated UIMessage types.
Problem: Interactive Bridge (The "See Note" Link)
A major UX challenge was making the AI responses "actionable." When the AI referenced a note, it provided a link, but clicking it didn't interact properly with the React state of the parent dashboard to open the correct note dialog.
Solution: I implemented a custom callback architecture within the Markdown renderer. By passing an onNoteLinkClick handler through the component tree, I bridged the gap between the static AI message and the live dashboard state. Now, clicking a reference in the chat instantly triggers a UI event that opens the specific note for editing.
Future Vision / next steps
Long-term vision The ultimate goal for AI Notes is to become a "Universal Memory Layer." Instead of just being a place to store text, it will act as a proactive intelligence assistant that bridges the gap between different productivity ecosystems, helping users uncover connections across their entire digital footprint.
The Unified Brain (MCP Integration)
External Knowledge Sync: Implement the Model Context Protocol (MCP) to allow real-time indexing of Notion workspaces and Google Drive documents.
Cross-Platform Querying: Enable the AI to answer questions like "What were the action items from my Google Doc meeting notes that conflict with my project plan in Notion?"
Automated Tagging: Use AI to automatically categorize and tag incoming notes from all sources to maintain a pristine directory structure.
Proactive Intelligence
UI Enhancements
Visual Mind Map: A dynamic, interactive graph view showing how different notes are semantically connected to one another.
Command Palette: A "Slash command" (/) style interface for quick note creation and AI tool triggering without leaving the keyboard.
Get visibility from recruiters & peers