Back to docsRecipe

Recipe: Flashcard maker

Build a spaced-repetition flashcard app with Meridian's scheduling primitives and local-first sync.

Difficulty

Intermediate

Time

~4 hours

Prerequisites

Meridian CLI, React

Overview

You'll scaffold a Meridian project, model decks and cards with the schema builder, implement SM-2 scheduling, and wire up a local-first sync layer that works offline. By the end you'll have a functional flashcard app with review queues, streak tracking, and cross-device sync.

Steps

  1. 1

    Scaffold the project

    Run meridian init flashcards and select the React + TypeScript template.

  2. 2

    Define the schema

    Create decks and cards collections with fields for front, back, ease factor, interval, and next review date.

  3. 3

    Implement SM-2

    Write the scheduling function that updates ease factor and interval based on review quality (0–5). Cards graduate from learning to review state automatically.

  4. 4

    Build the review UI

    Create a card component that shows the front, flips on tap, and exposes the 0–5 rating buttons. Wire it to the scheduler.

  5. 5

    Enable sync

    Add Meridian's sync provider. Configure conflict resolution as last-write-wins per card. Test offline review and reconnect.

Want the full source?

Clone the examples repo and run meridian dev to see it in action.