AI Flashcard Generator

• 

  initial page

• 

  answer

Inspiration

I wanted a faster way to create study flashcards without manually writing them out. Most flashcard tools require you to type everything yourself — I wanted to just name a topic and have the cards ready instantly.

What it does

AI Flashcard Generator takes any topic you enter and generates 6–8 study flashcards using AI. Each card shows a question, and you click to reveal the answer. There's a progress tracker so you can see how many cards you've reviewed.

How I built it

• React for the UI and state management
• Vite as the build tool
• OpenRouter API to access the Qwen 2.5 7B model
• Prompt engineering to get the model to return clean, structured JSON every time

Challenges I faced

• Getting the AI to consistently return valid JSON without extra markdown or explanation
• Handling edge cases where the model wraps the array in different object keys
• Accidentally committing my .env file and having to rewrite git history to remove it

What I learned

• How to integrate a third-party LLM API into a React app
• Prompt design for structured JSON output
• Git history rewriting with filter-branch
• Always add .env to .gitignore before the first commit!

Built With

• api
• javascript
• openrouter
• qwen
• react
• vite