AI & Agents · Beginner
Recall: AI Flashcard Generator
Paste study text and generate clean question-and-answer flashcards you can review with spaced repetition, all stored locally.
You build a Next.js app where a user pastes any block of study text, sends it to Claude via a Route Handler, and receives a structured set of Q&A flashcards rendered on screen. Cards persist in IndexedDB so sessions survive page refreshes without a backend database. This project is worth building because it covers the full loop of prompt engineering, structured output parsing with Zod, and lightweight client-side storage in a single weekend.
What you build
- Paste arbitrary study text and generate 5 to 20 Q&A flashcards in one click
- Claude returns flashcards as validated JSON using a Zod schema so malformed responses are caught at the boundary
- Cards are saved to IndexedDB and survive hard refreshes with no server-side database
- Flip-card review UI with keyboard shortcuts (Space to flip, Arrow keys to navigate)
- Spaced repetition scheduler marks cards as Again, Hard, Good, or Easy and re-queues them accordingly
- Deck management lets users create, rename, and delete named decks
- Export any deck as a CSV for import into Anki or other SRS tools
What it teaches
- Prompt engineering for structured output: writing a system prompt that reliably returns a JSON schema rather than free prose
- Zod schema validation at an API boundary to safely parse LLM responses
- Client-side persistence with IndexedDB using the `idb` wrapper library
- Next.js App Router Route Handlers as a thin server layer that keeps API keys off the client
- Basic spaced repetition algorithm: computing a next-review date from a difficulty rating
- React state management for a multi-step UI (input, generating, review) without an external state library
How it works
- 1
User Input
- Textarea
- Deck name
↓ POST
- 2
Route Handler
- API key guard
- Claude call
↓ raw JSON
- 3
Zod Parse
- Schema validate
- Error boundary
↓ cards[]
- 4
IndexedDB
- Upsert cards
- Set due dates
↓ load
- 5
Review UI
- Flip card
- SRS rating
↓ update
- 6
Reschedule
- Again/Good/Easy
- New dueDate
Sign in to open the build guide
Free account. Get the step-by-step build and every resource link.
Take it further
- Add PDF upload support using `pdf-parse` so users can drop in a lecture PDF instead of pasting text.
- Implement a streak tracker and daily review goal using localStorage so users get a visual nudge when they have cards due.
- Stream the Claude response token by token using the Vercel AI SDK `streamText` so cards appear progressively rather than all at once.
