Flash Learn

Next.jsTailwind CSSOpenAI APILangChainLibSQL (Turso)YjsHocuspocusTiptapAWS LambdaKinde Auth

Project Overview

Flash Learn bridges the gap between note-taking and effective studying by automatically converting user notes into powerful learning tools. The app uses LangChain with OpenAI to analyze notes, identify key concepts, and generate targeted flashcards and quiz questions that reinforce understanding. Real-time collaborative editing is powered by Yjs CRDTs, enabling conflict-free concurrent editing with live cursor tracking. Shareable links let users distribute flashcard sets and quizzes publicly, making group study seamless. Instead of passively reviewing notes, users actively engage with the material through active recall — a technique proven by cognitive science to significantly enhance long-term retention.

Key Features

One-click transformation of notes into comprehensive flashcard sets and quizzes
AI-powered question generation with explanations via LangChain and GPT-4o
CRDT-based real-time collaborative note editing with live cursor tracking and user presence indicators
Shareable public links for flashcard sets and quiz questions via unique tokens
Permission-based note sharing with edit and view-only access levels
Performance analytics showing test history and mastery levels across different subjects
Rich text editor with tables, task lists, text highlighting, and collaborative cursors

Challenges Solved

Creating natural-sounding quiz questions that effectively test understanding rather than rote memorization
Designing an intuitive rich text editing interface with Tiptap that preserves user workflow while enabling powerful conversion features
Implementing CRDT-based synchronization with Yjs to enable conflict-free concurrent editing across multiple users
Optimizing AI processing with chunked content analysis and retry logic to generate study materials quickly without excessive API costs
Building scalable WebSocket infrastructure on AWS Lambda and Hocuspocus to support live collaboration without performance degradation
Implementing effective content parsing and HTML sanitization for various note formats and structures from different academic disciplines
Designing a secure token-based sharing system that allows public access to flashcards and quizzes while protecting private note content

Gallery

Flash Learn screenshot 1
Flash Learn screenshot 2
Flash Learn screenshot 3

Technologies Used

Next.js

Leveraged for its hybrid rendering capabilities, allowing fast initial page loads with server-side rendering while maintaining dynamic client-side interactions for the note editor and flashcard review system.

Tailwind CSS

Implemented for creating a clean, accessible interface with consistent design language across the application. The utility-first approach enabled rapid UI development and easy dark/light mode theming.

OpenAI API & LangChain

LangChain orchestrates GPT-4o for note analysis and question generation, with content chunking, exponential backoff retries, and timeout handling. Custom prompt engineering ensures generated flashcards and quiz questions are educationally valuable and accurately reflect the source material.

LibSQL (Turso)

LibSQL via Turso serves as the primary database with Drizzle ORM for type-safe queries. Stores notes, flashcards, quiz questions, test scores, CRDT state blobs, and share tokens with a schema optimized for collaborative access patterns and efficient retrieval.

Yjs & Hocuspocus

Yjs CRDTs power conflict-free real-time collaborative editing, with Hocuspocus managing WebSocket connections, document persistence, and state synchronization. The awareness protocol tracks user presence with color-coded cursors and live position updates.

Tiptap

Feature-rich text editor built on ProseMirror with extensions for tables, task lists, text highlighting, font sizing, and collaborative editing. Integrates Yjs collaboration and cursor extensions for seamless multi-user editing.

Kinde Auth

Implemented for secure user authentication with middleware-based route protection. Public share routes bypass authentication while all other routes require login, enabling secure collaborative permissions alongside public content sharing.

Development Process

1

Learning Science Research

Researched cognitive science principles behind effective learning, focusing on spaced repetition, active recall, and knowledge reinforcement techniques used in educational psychology.

2

AI Integration Development

Implemented LangChain with OpenAI GPT-4o integration, including custom prompts, content chunking into ~400 character segments, exponential backoff retry logic, and constraints designed to generate educationally valuable questions from diverse study materials.

3

User Interface Design

Built a distraction-free rich text editing environment with Tiptap, featuring collaborative cursors, formatting toolbars, tables, task lists, and seamless transitions to study mode.

4

CRDT Collaboration Implementation

Built Yjs CRDT infrastructure with Hocuspocus for conflict-free real-time document editing, user presence awareness with color-coded cursors, and persistent CRDT state storage in LibSQL.

5

Sharing & Access Control

Designed and implemented a token-based sharing system for flashcards, quizzes, and collaborative notes with permission levels, invite links, and public share routes that bypass authentication.

6

Testing & Educational Validation

Conducted testing with students across different academic disciplines to validate the effectiveness of automatically generated study materials and collaborative features, refining both AI algorithms and CRDT sync performance.