neon.study

neon.study — Cram smarter in seconds. Studying from messy notes or a vague topic sucks. You waste 30 minutes building flashcards before you actually learn anything.

Comment

Inspiration

What it does

How we built it

Challenges we ran into## Inspiration

Every student knows the feeling: it's 2 AM, you have a stack of messy lecture notes, and the exam is in 8 hours. You know the highest-ROI study techniques are active recall and self-testing — but who has time to hand-build flashcards and write practice questions at 2 AM?

We wanted a study buddy that turns any topic or pile of notes into a study session in under 10 seconds. Caffeinated. In neon.

What it does

neon.study is an AI-powered study buddy. You paste in:

  • a topic ("The Krebs cycle")
  • a paragraph from a textbook
  • or your raw lecture notes

…and instantly get back a complete study pack:

  1. A crisp summary — the topic distilled into 2–3 sentences plus key bullet takeaways
  2. Flippable flashcards — click to flip, built for active recall
  3. An auto-graded multiple-choice quiz — with per-question explanations so you learn why you got something wrong

No accounts. No deck imports. No setup. Just paste → generate → study.

How we built it

  • Frontend: React 19 + TanStack Start (SSR) + Tailwind CSS v4, with a custom "hacker-neon" design system built on semantic oklch color tokens, grid-paper background, and CRT-style glow effects. Framer Motion handles the card flips and tab transitions.
  • Backend: A TanStack Start server function (generateStudyPack) running on the edge. The client never touches the AI key.
  • AI: The Vercel AI SDK wired to the Lovable AI Gateway (Google Gemini 3 Flash under the hood) using the OpenAI-compatible adapter.
  • The secret sauce — structured output: Instead of asking the model to "return JSON" and praying, we use the AI SDK's Output.object() with a strict Zod schema that enforces the exact shape of a study pack (summary, 5–8 flashcards, 4–6 quiz questions with exactly 4 choices and a valid correctIndex). The UI is guaranteed to render correctly on every response.
  • Deployed on: Cloudflare Workers via TanStack Start's serverless runtime.

Challenges we ran into

  • Reliable structured output. Free-form LLM JSON is unreliable. Switching from prompt-based JSON to the AI SDK's typed Output.object + Zod schema eliminated runtime parsing crashes entirely.
  • Edge runtime constraints. TanStack Start runs SSR on Cloudflare Workers, which has no Node.js child processes or native modules. We had to pick AI SDK primitives that bundle cleanly for the Worker runtime.
  • Designing a "wow" frontend without slop. Default AI-generated UIs all look the same (purple gradients, generic cards). We committed hard to one direction — terminal-inspired hacker neon — with JetBrains Mono, scanlines, blinking cursors, and a glow-on-hover language.
  • Latency theater. A 6-second AI call feels long if the screen is blank. We added a sequential "Parsing input → Mining concepts → Forging quiz questions…" loader so the wait feels productive.

Accomplishments we're proud of

  • End-to-end working full-stack AI app — frontend, edge backend, structured AI — built and polished from scratch.
  • 100% type-safe pipeline from server function → Zod schema → React props. If the AI returns a malformed pack, TypeScript catches it.
  • Genuinely usable: we tested it on real CS and biology notes during the hackathon.

What we learned

  • Structured output + schemas is the single biggest unlock for shipping reliable AI features.
  • Server functions (RPC) beat hand-rolled fetch('/api/...') for type safety and DX.
  • A strong, opinionated design system beats a sprawling one. Two colors (neon green + violet) on near-black does more work than a 20-color palette.

What's next for neon.study

  • Spaced repetition — save decks and resurface cards on an SRS schedule
  • File uploads — drop in a PDF lecture or slide deck
  • Voice mode — quiz me out loud while I walk to class
  • Shareable decks — send your study pack to a study group with one link

Accomplishments that we're proud of

What we learned

What's next for neon.study

Built With

  • cloudflare-workers
  • framer-motion
  • google-gemini
  • lovable-ai-gateway
  • lucide-react
  • react
  • tailwindcss
  • tanstack-query
  • tanstack-router
  • tanstack-start
  • typescript
  • vercel-ai-sdk
  • vite
  • zod
Share this project:

Updates