Title: [New Project] AI Flashcard Generator

[OmBapodra]

[ISSUE FORM] Pre-Submission Checks

• I have searched the existing issues and confirmed this request has not been raised already.
• I am willing to work on this issue if needed.

[ISSUE FORM] Contribution Program

GSSoC 2026

[ISSUE FORM] Difficulty Level

Beginner

[ISSUE FORM] Requested Project or Task

AI Flashcard Generator

[ISSUE FORM] Problem Description

🎯 Project Name

AI Flashcard Generator

📝 Description

A study tool that uses OpenAI's API to automatically generate Q&A flashcards from pasted text or notes. Users can flip cards, mark them as learned/unlearned, and track progress with localStorage persistence.

✨ Features

• Text input area to paste notes/content
• AI-powered flashcard generation (question + answer pairs)
• Flip-card animation using Framer Motion
• Mark cards as learned/unlearned
• Progress tracking (cards reviewed vs total)
• localStorage persistence for flashcard decks
• Responsive design with Tailwind CSS

🛠️ Tech Stack

• React.js
• TypeScript
• Tailwind CSS
• Framer Motion (animations)
• OpenAI API (flashcard generation)
• localStorage (data persistence)

📊 Difficulty

Intermediate

🎯 Why This Project?

• No AI/API-based learning tool currently exists in the repo
• Covers key React concepts: API integration, state management, custom hooks, conditional rendering, animations
• Highly useful for students preparing for exams
• Great portfolio project demonstrating full-stack API integration

📦 Implementation Plan

1. Create flashcard component with flip animation
2. Build text input UI with character count
3. Integrate OpenAI API for flashcard generation
4. Add localStorage for saving flashcard decks
5. Implement progress tracking (learned/unlearned)
6. Add responsive design and polish UI

🏷️ Labels

enhancement, gssoc, good first issue

[ISSUE FORM] Expected Solution or Scope

What to Build
A standalone React.js application that allows users to generate flashcards from pasted text using AI.

📋 Expected Solution or Scope

Core Functionality

Feature	Description
Text Input	Textarea where users paste notes/text (max ~5000 chars) with character counter
AI Generation	OpenAI API call to parse text into { question, answer } pairs
Flashcard Display	Animated flip cards showing question on front, answer on back
Card Navigation	Previous/Next buttons to browse through generated cards
Learned Toggle	Button to mark each card as learned/unlearned
Progress Bar	Visual indicator showing X/Y cards reviewed
Deck Persistence	Save/load flashcard decks via localStorage
Responsive UI	Mobile-friendly layout using Tailwind CSS

File Structure

src/
├── components/
│ ├── Flashcard.tsx
│ ├── FlashcardDeck.tsx
│ ├── TextInput.tsx
│ └── ProgressBar.tsx
├── hooks/
│ ├── useFlashcards.ts
│ └── useLocalStorage.ts
├── utils/
│ └── openai.ts
├── types/
│ └── index.ts
├── App.tsx
└── main.tsx

Deliverables

1. Working React app with all features above
2. README with setup instructions (including OpenAI API key config)
3. Screenshot of the UI for the showcase repo
4. Project entry added to config/project-Item.tsx

🏷️ Labels

enhancement, gssoc, good first issue

[ISSUE FORM] Resources or References

No response

[ISSUE FORM] Additional Context

I would like to work on this project assign @GSSOC'26 Contributor