Delete Flashcard is Not Working
Describe the bug
When attempting to delete an individual flashcard from the saved flashcards view, the delete button does not perform any action. The flashcard remains in the list and is not removed from the database or the UI.
Root Cause Analysis
After reviewing the codebase, the delete API exists at src/app/api/decks/[id]/route.ts but only handles deck-level deletion. There is no API endpoint or UI handler for deleting individual flashcards within a deck. The FlashcardViewer.tsx component only has flip/navigation buttons — no delete action.
What Needs to Be Done
- Create a new API route:
src/app/api/flashcards/[id]/route.ts with a DELETE handler
- Add a delete button/icon to
src/components/flashcards/FlashcardViewer.tsx
- Implement confirmation dialog before deletion
- Add proper authorization check (only card owner can delete)
- Show success/error toast notification after deletion
- Update the UI optimistically to remove the card from the list
Tech Stack Reference
- Database: Prisma ORM with PostgreSQL (Supabase)
- Auth: Clerk v6 — use
auth() to get userId
- UI: shadcn/ui components, Tailwind CSS
- Existing pattern: See
src/app/api/decks/[id]/route.ts for delete API example
To Reproduce
- Sign in and generate flashcards
- Navigate to saved flashcards (
/flashcards)
- Open a deck and try to delete an individual flashcard
- Observe: no delete option exists or the action fails
Expected behavior
Individual flashcards should be deletable with a confirmation dialog, and the UI should update immediately.
Acceptance Criteria
Delete Flashcard is Not Working
Describe the bug
When attempting to delete an individual flashcard from the saved flashcards view, the delete button does not perform any action. The flashcard remains in the list and is not removed from the database or the UI.
Root Cause Analysis
After reviewing the codebase, the delete API exists at
src/app/api/decks/[id]/route.tsbut only handles deck-level deletion. There is no API endpoint or UI handler for deleting individual flashcards within a deck. TheFlashcardViewer.tsxcomponent only has flip/navigation buttons — no delete action.What Needs to Be Done
src/app/api/flashcards/[id]/route.tswith a DELETE handlersrc/components/flashcards/FlashcardViewer.tsxTech Stack Reference
auth()to getuserIdsrc/app/api/decks/[id]/route.tsfor delete API exampleTo Reproduce
/flashcards)Expected behavior
Individual flashcards should be deletable with a confirmation dialog, and the UI should update immediately.
Acceptance Criteria