Mini Apps — Intermediate React challenge.
Build a Flashcard Study App from scratch: a 3D flip card with question/answer, Prev/Next navigation with proper edges, category filtering, a form to add your own cards, and a 'Mark as Mastered' flow that sets cards aside without deleting them.
Requirements
- The current card is tracked by id, not array index, so reordering never loses track of what's on screen.
- Clicking the card flips it; Next/Prev reset the flip and respect first/last-card edges (no wraparound).
- Marking the current card mastered promotes the next card into view -- unless it was the last card, in which case it falls back to the new last card.
- Mastered cards are excluded from rotation but never deleted from state; the mastered count always reflects the true total.
- A category dropdown (derived from every card's category, plus 'All') filters the visible rotation; changing it resets you to the first matching card.
- An Add Card form (description, answer, category) appends a brand-new card to the deck at runtime; Add is disabled until all three fields are filled.
- Mastering every card reveals an 'All cards mastered!' message and hides the card and its nav controls -- but the category filter and Add Card form stay usable so a freshly added card can bring the deck back to life.
Signature
function FlashcardApp(): JSX.Element
Example
<FlashcardApp />
// click card -> flips to show the answer
// click Next x3 -> lands on the last card, Next disabled
// select category "Math" -> only Math cards show, Prev/Next reset around the new set
// fill in a new card and click Add -> it joins the end of the rotation
// click "Mark as Mastered" on the last card -> falls back to the previous card, not off the edge
// master all 4 -> "All cards mastered!" (until you add a new one)
Constraints
- Mastered cards stay in the `cards` array with mastered: true -- they are filtered out for display, never spliced out of state.
- The category filter's option list is derived from every card's category (mastered or not), so it doesn't shrink just because a category's cards all got mastered.