🧠 AI Flashcard Generator

July 2024 · React · Node.js · OpenAI API · MySQL

🔍 Project Overview

This project is an AI-powered web application that turns PDFs into Anki-style flashcards using the OpenAI API. The goal was to automate the study process by generating effective questions and answers following cognitive learning principles, including the Minimum Information Principle.

⚙️ Methodology

Frontend: Built using React for a responsive UI. Users can upload a PDF, enter their email, and view/download flashcards.
Backend: Node.js and Express handle PDF parsing with pdf-parse, and prompt engineering for GPT-4 request formatting.
Flashcard Prompting: Carefully engineered prompts instruct GPT-4 to extract concepts and generate questions adhering to the Minimum Information Principle.
Email Delivery: Integrated with EmailJS to send flashcards directly to the user’s inbox.

💡 Features

Drag-and-drop PDF upload interface
Multiple-choice, cloze, and basic Q&A card generation
PDF summarisation for contextual understanding
Send cards directly to user via email

📉 Errors & Fixes

OpenAI API context length exceeded – resolved by chunking PDF content into batches with semantic breaks.
EmailJS failed to send attachments on some clients – used fallback links to online previews of the flashcards.
Misinterpreted text in scanned PDFs – improved PDF parsing logic with OCR fallback (planned).

📈 Key Takeaways

Effective prompt design directly impacts the quality of AI-generated content.
Combining GPT with React and Express results in seamless AI-driven user experiences.
There's strong potential for academic tools that bridge AI and user interactivity.

🔗 Repository

GitHub Repo: AI Flashcard Web App

← Back to Blog