Noted

A card-based knowledge management app with AI-powered study assistance

Comment

Inspiration

Most students juggle multiple apps to manage their study material. Lecture notes end up in one doc, diagrams in a photo album, flashcards in a separate app, and bookmarks scattered across browser tabs. When it's time to review, everything is in different places with no way to see how topics connect.

The tools students use — docs, folders, highlight markers — organize content in a straight line: page after page, top to bottom. But the subjects they're studying aren't linear. A concept from the second week of class often ties directly into something from week eight, and a flat document doesn't show that.

Noted was built to fix that disconnect — a workspace where taking notes and learning from them happen in the same place, at the same time.

What It Does

Noted is a study workspace that combines spatial note organization with an AI study companion.

Spatial canvas — Notes live on an infinite, pannable canvas instead of inside a document or folder. Each note is a card you can drag, position, and group by topic. Related cards sit near each other. The layout becomes a visual map of how your knowledge fits together — you see the big picture while working on the details.

Connections between concepts — Any two cards can be linked with a labeled line. A cell biology card connects to a genetics card with "DNA replication." These connections are visible on the canvas, and the AI companion uses them to build better review sessions. Over time, your notes become a personal knowledge map that grows with every study session.

Organized topic stacks — Beyond the canvas, notes are sorted into topic stacks with sub-categories. A Biology stack might contain Cell Biology, Genetics, and Ecology. You can browse your notes visually on the canvas or structurally through stacks — whichever fits what you're doing.

Macy — AI study companion — Macy is a built-in assistant that works with your actual notes, not generic content. She suggests connections between cards you haven't linked yet, generates quizzes from your own material, spots topics you haven't covered well, and tracks your study patterns over time.

How It Was Built

Noted is a React application built with TypeScript, Vite, and Tailwind CSS.

State management — All app data flows through a single React context using a reducer pattern.

Canvas rendering — The spatial workspace uses standard HTML elements with CSS positioning rather than a canvas element or WebGL.

Animations — Framer Motion handles all motion in the app: page transitions, card entrances, modal overlays, sidebar behavior, onboarding steps, and button interactions.

Routing — React Router handles navigation between six views and a persistent sidebar with active indicators keeps navigation consistent.

What It Solves

Notes scattered across too many tools — When study material lives in four different apps, reviewing means switching contexts constantly and missing relationships between concepts. Noted puts everything in one workspace where connections are visible and useful.

Linear organization for non-linear subjects — Documents and folders force content into a sequence. But a concept from chapter 3 often relates directly to something in chapter 7, and a linear layout hides that. The canvas lets you arrange notes by how they relate, not by when you wrote them.

Passive review habits — Re-reading notes from top to bottom feels productive but doesn't build strong recall. Noted generates quizzes from your own material, so review sessions involve actively retrieving information rather than passively scanning it.

Who It's For

University students managing multiple courses who need one system that handles quick lecture capture and deep exam prep equally well.

Self-directed learners studying on their own — programming, languages, certifications — who want structured progress tracking without a rigid course platform.

Graduate and medical students working with dense, interconnected material where understanding how concepts relate matters as much as knowing individual facts.

High school students building study habits early who benefit from a visual, guided approach to organizing what they're learning.

Educators and tutors who want to demonstrate how concepts in their subject connect by building shared canvases as teaching tools.

Use Cases

Lecture capture and review A student attends a biochemistry lecture on enzyme kinetics. During class, they use quick capture to create cards for each key concept: Michaelis-Menten equation, competitive inhibition, allosteric regulation. After class, they open the canvas, group the cards, and draw connections — competitive inhibition links to Km with the label "increases apparent Km." Macy notices they have older cards on protein structure and suggests a link: "Your active site card from last week covers the same binding pocket."

Exam prep Two weeks before finals, a student checks Progress and sees that Genetics has strong coverage but Ecology has only a few cards and hasn't been touched in weeks. They open Study mode for Ecology, answer quiz questions from their own notes, and find two concepts they can't recall. They create new cards, connect them to existing material, and come back for another session later. The dashboard tracks their streak and goal progress throughout.

Literature review A graduate student reading papers on a research topic creates a card for each paper's main contribution. They connect cards that cite each other, share methods, or reach different conclusions. The canvas becomes a visual map of the field. When writing their introduction, they follow the connections to build a narrative that covers the topic logically.

Group study A study group preparing for organic chemistry divides topics among members. Each person adds cards to their assigned areas. Before meeting, they review each other's cards on the canvas, spot where explanations differ, and use those differences as discussion starters. Macy generates a combined quiz from everyone's contributions.

Language learning A student learning Japanese creates cards for vocabulary, grammar patterns, and cultural context. They connect vocabulary to the grammar patterns where those words appear, and link cultural notes to relevant vocab. During study sessions, quizzes show vocabulary in context — alongside the grammar connection — rather than testing words in isolation.

What's Next

Real-time collaboration — Multi-user canvas editing so study groups can build knowledge maps together with live cursors and presence indicators.

Spaced repetition — Automatic review scheduling based on how well you know each card, turning the knowledge graph into a smart review queue that brings back material right before you'd forget it.

Built With

Share this project:

Updates