⚡ AI Flashcard Generator

An AI-powered flashcard generator that turns any text into study flashcards instantly. Paste your notes, pick how many cards you want, and let the AI do the rest.

Features

• Paste any text (lecture notes, book summaries, articles)
• Choose how many flashcards to generate (5, 8, 10, or 15)
• Flip cards to reveal answers
• Navigate with Prev/Next or click directly from the grid
• Clean dark UI

Tech Stack

Layer	Technology
Frontend	React + Vite
Backend	Python + FastAPI
AI Model	LLaMA 3.3 70B via Groq API

Getting Started

Prerequisites

• Node.js
• Python 3.8+
• A free Groq API key from console.groq.com

1. Clone the repo

git clone https://github.com/Fouad-dev101/ai-flashcard-generator.git
cd ai-flashcard-generator

2. Backend Setup

cd backend
python -m venv venv
venv\Scripts\activate        # Windows
# source venv/bin/activate   # Mac/Linux

pip install -r requirements.txt

cp .env.example .env
# Open .env and paste your Groq API key

uvicorn main:app --reload

Backend runs at: http://localhost:8000

3. Frontend Setup

Open a new terminal:

cd frontend
npm install
npm run dev

Frontend runs at: http://localhost:5173

How It Works

1. You paste text into the frontend
2. React sends it to the FastAPI backend via a POST request
3. The backend builds a prompt and calls the Groq API (LLaMA 3.3 70B)
4. The AI returns flashcards as JSON
5. React displays them as flippable cards

Project Structure

ai-flashcard-generator/
├── backend/
│   ├── main.py           # FastAPI server + Groq API logic
│   ├── requirements.txt  # Python dependencies
│   └── .env.example      # Environment variable template
└── frontend/
    ├── src/
    │   ├── App.jsx        # Main React component
    │   └── App.css        # Styles
    ├── index.html
    └── package.json

Environment Variables

Create a .env file inside the backend/ folder:

GROQ_API_KEY=your_groq_api_key_here

Never commit your .env file. It's already in .gitignore.

Author

Fouad Sabbani — @Fouad-dev101