Free
πŸŽ“ Education
CROSS_PLATFORM

Recall Decks

Flashcard learning app with spaced repetition, swipe-grade cards and progress you can feel.

3.2k views 361 copies 362 words

The Prompt

# Recall β€” Spaced-Repetition Flashcard App

## Goal
Design and build "Recall", a spaced-repetition flashcard app. Feel: gym for memory β€” short, focused sessions with visible strength gains. Every screen should feel native-quality β€” fluid, tactile, zero jank.

## Visual Language
- **Palette**: slate #111318 dark base, mint #6EE7B7 for 'known', amber for 'again', violet #A78BFA for deck accents
- **Type scale**: large title 32-34px bold, section header 20px semibold, body 16-17px, caption 13px.
- **Surfaces**: layered backgrounds (base / elevated card / sheet), 20px card radius, subtle 1px hairline separators.
- **Iconography**: consistent 24px stroke icons, 1.75px stroke weight.

## Screens
1. **Decks home** β€” deck cards with mastery ring, due-today count badge, streak flame subtle in corner; 'Review all due (23)' primary button.
2. **Review** β€” one card center-stage: tap to flip (3D Y-rotation), then swipe right=Good / left=Again / up=Easy; progress bar top with cards remaining.
3. **Card editor** β€” front/back fields with markdown-lite (bold, code, image), 'add reverse card' toggle, deck picker.
4. **Deck stats** β€” retention curve line chart, maturity breakdown donut (new/learning/mature), heatmap of review days.
5. **Session summary** β€” after review: 'Nice. 23 cards, 91% recalled', mastery ring animates its delta, next-due forecast row.

## Interactions & Motion
- Card flip is a proper perspective 3D flip (600ms) with slight scale dip; answer side has a soft glow tint matching grade buttons.
- Swipe directions leave a color trail (mint/amber/violet) and the next card scales up from 0.94 behind.
- Mastery ring delta animates with a spring and a tiny +2% label float.
- Spring physics for all transitions (stiffness ~260, damping ~24); never linear easing.
- Skeleton loaders for every async surface; optimistic UI for user actions.

## Details That Matter
- Session cap defaults to 20 cards β€” finishing feels better than abandoning. 'Keep going?' after.
- Due-badge tone: '23 ready' not '23 overdue!'. Language shapes habit.
## Tech & Quality Bar
- React Native + Expo + TypeScript (or Flutter if requested). Reanimated for 60fps gestures.
- Dark & light mode from a single token file. Safe-area aware on all screens.
- Haptics on key confirmations. Offline-tolerant: cache last data, show stale-while-revalidate.

You may also like