Molecule.dev

← All templates

Flashcard App

Education · React + Node (Express) · 21 @molecule/* packages

Anki-like flashcard app with spaced repetition, decks, and study statistics — with built-in Stripe-backed subscription tiers

Open in Molecule

What is inside

  • auth
  • search
  • keyboard-shortcuts
  • subscriptions

Screens (14)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Dashboard /dashboard (signed in)
  • Decks /decks (signed in)
  • Study /study/:deckId (signed in)
  • Stats /stats (signed in)
  • Settings /settings (signed in)
  • DeckDetail /decks/:deckId (signed in)
  • CardNew /decks/:deckId/cards/new (signed in)
  • CardEdit /decks/:deckId/cards/:cardId/edit (signed in)
  • SessionSummary /study/:deckId/summary (signed in)

Data model (10 tables)

  • cards — id, deck_id, user_id, front, back, state, ease_factor, interval_days, …
  • deck_shares — id, deck_id, owner_id, shared_with_user_id, role, invite_token, accepted_at, created_at
  • decks — id, user_id, name, description, category, card_count, new_count, review_count, …
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • notifications — id, user_id, type, title, body, href, unread, created_at
  • payments — id, createdAt, updatedAt, userId, transactionId, productId, platformKey, data, …
  • resource_tags — id, tagId, resourceType, resourceId, createdAt
  • review_log — id, card_id, deck_id, user_id, quality, ease_factor, interval_days, state, …
  • tags — id, name, slug, color, description, createdAt, updatedAt
  • user_profiles — user_id, current_streak, longest_streak, total_reviews, daily_goal, last_study_date, theme, created_at, …

API (7 handlers)

  • cards api/src/handlers/cards.ts
  • decks api/src/handlers/decks.ts
  • notifications api/src/handlers/notifications.ts
  • profile api/src/handlers/profile.ts
  • reports api/src/handlers/reports.ts
  • stats api/src/handlers/stats.ts
  • study api/src/handlers/study.ts

Subscription tiers

free / pro / team — gated by: maxCards, maxDecks, advancedFeatures, canExport, retentionDays

Built from 21 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • S3_BUCKET S3 bucket for card images

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing