JFlow

• 

  Landing page

• 

  Login page

• 

  Workspace

• 

  Note

• 

  Note

JFlow: The Digital Mind for Academic Excellence JFlow transforms the static, passive act of note-taking into a dynamic, active learning loop.

Inspired by the limitations of traditional digital notebooks—which are essentially just "pixelated paper"—JFlow was built on a single, powerful premise: What if your notebook could think?

Leveraging the multimodal reasoning of Gemini 3 Flash, JFlow doesn't just store your handwriting; it perceives, understands, and interacts with it. It bridges the gap between recording information and mastering it.

🚀 What It Does JFlow is an AI-native note-taking ecosystem with three core pillars:

Perception (The AI Wand): Using Gemini 3 Vision, the AI Wand allows students to select any region of their handwritten notes. The system instantly analyzes the multimodal context (text, diagrams, formulas) and provides Socratic explanations, ensuring deep conceptual understanding rather than just surface-level answers. Verification (The Guardian Angel): Hallucinations in student notes are dangerous. The Guardian Angel uses Gemini's long-context window to ingest entire textbooks or PDF course materials as a "Source of Truth." It then audits the student's handwritten notes against this source, highlighting factual errors and guarding against misconceptions in real-time. Simulation (The Live Laboratory): Perhaps the most transformative feature, this turns static equations into living code. When a student writes a physics formula (e.g., projectile motion), JFlow uses Gemini's code generation capabilities to write and execute a P5.js simulation on the canvas. The math comes alive. 🛠️ How We Built It The architecture is a modern, real-time web application:

Frontend: Next.js 14 (App Router) for a responsive, server-side rendered interface. Canvas Engine: TLDraw implementation for a high-performance, infinite vector canvas. AI Core: Gemini 3 Flash Vision via the Google AI SDK. We focused heavily on System Instructions to shape the AI's persona as a Socratic tutor rather than a generic assistant. Backend: Firebase Firestore for real-time data sync and vector-like subcollections for scalable page management. 🧠 Challenges & Solutions

1. The "Latency vs. Quality" Trade-off: Challenge: Real-time handwriting analysis needs to be instant, but deep reasoning takes time. Solution: We utilized Gemini 3 Flash, explicitly chosen for its incredible speed-to-intelligence ratio. We also implemented streaming responses, so the user feels the AI "thinking" immediately, maintaining flow state.

2. Multimodal Context Management: Challenge: Sending entire canvas states to an LLM is token-heavy and confusing. Solution: We developed a viewport-based heuristic that captures only the relevant "visual context" surrounding the user's selection, optimizing token usage while preserving the necessary semantic information for Gemini to reason correctly.

3. Code Execution Safety: Challenge: Letting an AI generate and run code (for simulations) is risky. Solution: We built a sandboxed execution environment (iframe) that strictly limits the scope of the generated P5.js code, ensuring that the "Live Laboratory" is both magical and secure.

🎓 What We Learned We learned that multimodal AI is not just a feature—it's a new interface paradigm. Traditional UI requires buttons and menus. With Gemini 3, the content itself becomes the interface. A drawing of a cell isn't just a drawing; it's a query. A written equation isn't just text; it's a prompt for a simulation.

JFlow proves that when you give a notebook a "mind," you don't just change how students take notes—you change how they think.

Built With

• firebase
• google
• react
• typescript