Flashcard Generator

A modern, interactive flashcard generator app built with React, TypeScript, and Tailwind CSS. Features PDF upload support and uses Google's Gemini 2.5 Flash API for intelligent flashcard generation.

Features

• Three Input Methods:

  • Describe Topic: Generate flashcards from a topic description
  • Paste Text: Extract flashcards from pasted text content
  • Upload PDF: Upload PDF files and extract flashcards from the content

• Interactive Study Mode:

  • Beautiful 3D flip animations
  • Keyboard navigation (arrow keys)
  • Progress tracking
  • Responsive design

• AI-Powered Generation:

  • Uses Google Gemini 2.5 Flash API
  • Intelligent content extraction and flashcard creation
  • Optimized prompts for different content types

Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Google AI API key

Installation

1. Clone the repository:

   git clone <repository-url>
   cd flashcardgen

2. Install dependencies:

   npm install

3. Get a Google AI API Key:

   • Go to Google AI Studio
   • Create a new API key
   • Copy the API key

4. Configure the API Key:

   Option A: Using Environment Variables (Recommended)

   • Create a .env file in the project root:

   echo "VITE_GEMINI_API_KEY=your-actual-api-key-here" > .env

   Option B: Direct Code Replacement

   • Open src/FlashcardApp.tsx
   • Replace 'YOUR_API_KEY' with your actual API key:

   const model = new genAI.GenerativeModel('gemini-1.5-flash', 'your-actual-api-key-here');

5. Start the development server:

   npm run dev

6. Open your browser: Navigate to http://localhost:3000

Usage

Creating Flashcards

1. Choose an input method:

   • Describe Topic: Enter a topic like "capitals of the world" or "fun facts about San Diego"
   • Paste Text: Paste any text content you want to extract flashcards from
   • Upload PDF: Click the upload area and select a PDF file

2. Generate Flashcards:

   • Click "Generate flashcards" button
   • Wait for the AI to process your content
   • Your flashcards will be ready to study!

Studying Flashcards

• Flip Cards: Click on a card or use ↑↓ arrow keys
• Navigate: Use ←→ arrow keys or click the navigation buttons
• Progress: See your current position (e.g., "3 / 10")
• Create New: Click "Create new flashcards" to start over

Technical Details

Tech Stack

• Frontend: React 18 with TypeScript
• Styling: Tailwind CSS
• Build Tool: Vite
• AI API: Google Gemini 1.5 Flash (latest)
• PDF Processing: PDF.js

Debugging Features

The app includes comprehensive console logging to help debug issues:

• 🔧 API Initialization: Logs Gemini API setup process
• 📁 File Upload: Tracks PDF file processing
• 📖 PDF Extraction: Detailed PDF.js loading and text extraction
• 🚀 Flashcard Generation: Step-by-step AI generation process
• ❌ Error Handling: Detailed error information with context

Open your browser's developer console (F12) to see detailed logs during operation.

Project Structure

flashcardgen/
├── src/
│   ├── FlashcardApp.tsx    # Main application component
│   ├── main.tsx           # React entry point
│   └── index.css          # Global styles with Tailwind
├── index.html             # HTML template
├── package.json           # Dependencies and scripts
├── tsconfig.json          # TypeScript configuration
├── vite.config.ts         # Vite configuration
├── tailwind.config.js     # Tailwind CSS configuration
└── README.md              # This file

API Configuration

The app uses Google's Gemini 2.5 Flash API for generating flashcards. The API is loaded dynamically from CDN and configured with your API key.

PDF Processing

PDF files are processed client-side using PDF.js, which extracts text content for flashcard generation. No files are uploaded to external servers.

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run type-check - Run TypeScript type checking

Environment Variables

For production deployment, consider using environment variables for the API key:

1. Create a .env file:

   VITE_GEMINI_API_KEY=your-api-key-here
   

2. Update the API key usage in FlashcardApp.tsx:

   const model = new genAI.GenerativeModel('gemini-2.0-flash-exp', import.meta.env.VITE_GEMINI_API_KEY);

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Support

If you encounter any issues or have questions, please open an issue on the repository.