Loopnotes

Inspiration

Lecture notes never match how you actually think through a topic. The real understanding usually happens out loud — explaining something to a friend, or muttering through it while pacing around your room. But that spoken explanation just evaporates. We wanted to catch it and turn it into something you can actually revise from — and go further than a plain summarizer, into something that honestly tells you what you don't know yet.

What it does

Loopnotes lets you talk through a topic like you're teaching it to someone else — or paste in raw lecture notes if you'd rather type. It sends that into Gemini and gets back a full study kit:

• A short summary of the core ideas
• Key terms with plain-language definitions, shown as flip cards
• A self-quiz with questions, answers, and a short explanation of why each answer is correct — not just what it is
• An exam readiness score (0–100%), estimated honestly from what the notes actually cover
• Knowledge gap detection — concepts that are missing entirely, only weakly explained, or solidly covered, sorted into 🔴 / 🟡 / 🟢
• Memory tricks — a short mnemonic or analogy for the trickiest concepts, generated specifically for that topic

No prompt-writing, no copy-pasting into a chat window — one button turns rambling into something you can actually study from.

How we built it

• Plain HTML/CSS/JS, no framework, no build step — fast to iterate on in a single sitting
• The browser's built-in Web Speech API handles live voice-to-text, so there's no extra cost or latency just to capture what you said
• Everything else runs through a single Gemini API call (gemini-2.5-flash-lite) using responseMimeType: "application/json", with one prompt schema that asks for the summary, quiz, exam readiness, knowledge gaps, and memory tricks all at once — one request, one structured response, no extra round trips or extra quota cost
• The frontend renders that JSON as interactive cards: flip-to-reveal key terms, tap-to-reveal quiz answers with explanations, and a readiness bar that fills based on Gemini's own honest self-estimate

Challenges we ran into

• Getting Gemini to give an honest, not generous exam-readiness score and a genuinely useful gap analysis, rather than vague reassurance — solved by being explicit in the prompt that thin notes should score low and "missing" concepts should be named specifically, not hedged
• Model deprecation mid-build: gemini-2.0-flash and gemini-1.5-flash had both been retired, which took some debugging to trace since the error wasn't always obvious. Moved to gemini-2.5-flash-lite, which currently has the strongest free-tier limits
• Free-tier rate limits (429 errors) during heavy testing — added exponential backoff with retries so a transient rate limit doesn't just kill the request mid-demo
• Keeping one Gemini call doing five things at once without the JSON breaking — solved with a strict, explicit schema in the prompt rather than asking loosely and hoping the shape came back consistent

What we learned

Most of the "intelligence" in a good Gemini integration isn't clever code — it's a precisely specified output schema. Once we defined exactly what shape of answer we wanted (including asking Gemini to be honest rather than encouraging), the model did the heavy lifting. We also learned firsthand how fast free-tier model names go stale, and to build in retry logic before we needed it, not after a string of confusing errors.

What's next

• Adaptive quiz difficulty (easy / medium / hard, regenerated on demand)
• Export the full study kit as a PDF revision sheet
• Let the app remember past study kits so students build a running library of topics across a semester

Built With

• ai
• css3
• edtech
• education
• gemini-2.5-flash-lite
• gemini-api
• google-ai-studio
• html5
• javascript
• json
• netlify
• productivity
• rest-api
• web-speech-api