Inspiration
Every student knows the ritual: you leave a lecture with a messy pile of notes — half-finished sentences, scribbled definitions, bullet points that only make sense to you in the moment. Then, days later, you stare at them before an exam and none of it clicks.
I wanted to fix that. Not with another flashcard app that makes you manually type every card, and not with a generic AI chatbot that just summarizes text. I wanted the act of studying to feel less like a chore and more like exploring — the way you naturally connect ideas in your head.
That's where the constellation metaphor came from. The ancient astronomers mapped the night sky by drawing lines between stars, turning scattered points of light into shapes and stories. Your notes are the same — scattered points that only become meaningful once you connect them. Mindwave turns your notes into a constellation.
What it does
Mindwave is a fully client-side study tool that transforms raw notes into an interactive study kit:
- A living mind-map. Paste notes and every idea becomes a star, orbiting its topic, linked by connections. The map animates into place, and you can click any topic to focus its branch or click any star to reveal its meaning.
- AI-generated flashcards. Gemini reads your notes and writes question/answer cards automatically — no manual card-typing.
- An auto-generated quiz. Multiple-choice questions with instant scoring, built from your content.
- A study summary. A concise writeup of the key ideas.
Because it runs 100% in the browser, your notes never leave your device. It even has an offline fallback — if the network drops, a local parser still builds the whole kit.
How we built it
The whole thing is a single static page — HTML5, CSS3, vanilla JavaScript, and SVG. No frameworks, no build step, no backend. That was a deliberate choice: I wanted something that deploys anywhere and can never break.
The architecture has three layers:
- A parser that turns unstructured text into a tree. It detects "# headings" as branches, "term: definition" pairs as leaves, and "question ?" + answer lines, then emits a hierarchy.
- A layout engine that projects that tree onto a radial graph. Branches are placed on an inner orbit with golden-angle hue spacing, leaves fan out on an outer orbit, and edges connect them:
θᵢ = (i / n) · 360° - 90°, (xᵢ, yᵢ) = (Cₓ + r cosθᵢ, Cᵧ + r sinθᵢ)
- A Gemini integration that takes the raw notes and returns a structured JSON study kit — summary, flashcards, and quiz — via a single "generateContent" call with "responseMimeType: application/json".
The UI is inspired by Claude's warm, readable aesthetic: a cream background, terracotta accent, serif headings, and a sidebar for navigation. Card-flip flashcards use a CSS 3D transform ("rotateY(180deg)"), and the star formation uses staggered CSS keyframe animations.
Challenges we ran into
- Getting the AI to return usable JSON. LLMs love to wrap JSON in markdown fences or rephrase the "answer" option so it no longer exactly matches one of the four choices. I solved this with strict prompt rules, a "responseMimeType" constraint, and a normalization layer that strips fences and validates every quiz question has exactly 4 options with a matching answer.
- Parsing arbitrary note formats. People write notes in wildly different ways. My first parser only handled "term: definition"; it silently dropped everything else. I rebuilt it as a multi-pass scanner that handles headings, bullet lists, colon pairs, and trailing-question-marks, with graceful degradation.
- Making the layout not look like spaghetti. With many branches, leaf labels overlapped. I solved it with orbit clamping ("clamp()") to keep nodes inside the SVG viewport, a 6-color palette, and a focus/dim interaction so clicking a branch dims everything else.
- Deploying without leaking secrets. GitHub's secret scanner blocked my first push because the API key was in plaintext. Since a static site must ship the key to the browser anyway, I encoded it and noted that a production version would proxy through a backend.
Accomplishments that we're proud of
- Built the entire product solo — parser, graph layout, AI integration, and a polished UI — with zero dependencies.
- The constellation animation is genuinely satisfying: paste notes and watch your knowledge map bloom into place.
- It never breaks — even with no API and no network, the offline fallback still produces a complete study kit.
- Shipped and deployed a live, working app end-to-end in a tight window.
What we learned
- Constraints breed clarity. Forcing "no frameworks, no backend" forced me to deeply understand the problem instead of reaching for a library.
- AI output needs a safety net. Treating Gemini's JSON as untrusted input and validating/normalizing it was the difference between a flaky demo and a solid one.
- Design is a feature. The warm, minimal UI does real work for the experience — studying feels calm instead of cluttered.
- Radial graph layout is a great project for learning trig in practice — the whole map is just sin and cos.
What's next
- Auth + cloud sync so a user's constellation persists across devices (Clerk + a lightweight backend).
- A secure proxy for the Gemini key, making it production-ready.
- Richer graphs — edge weighting by semantic similarity (embeddings) so related-but-ungrouped ideas connect too.
- Voice summaries — have the constellation "read" your summary aloud for audio learners.
- Spaced repetition — schedule quiz questions on an SM-2-style algorithm:
Iₙ₊₁ = Iₙ · EF, EF' = EF + (0.1 - (5 - q)(0.08 + (5 - q) · 0.02))
Log in or sign up for Devpost to join the conversation.