Monetization — a real freemium model backed by Stripe Checkout:

One-time payments with upgrade credit — existing customers only pay the difference (verified server-side). Quotas and feature gates are enforced in the backend, not just hidden in the UI.

Plus everything around it:

• Powered by open models on the Groq API, with robust JSON parsing (retry + salvage) so generations don't fail — Pro/Ultra requests use the larger 120B model
• Smart review — an SM-2 spaced-repetition engine schedules each card exactly when you're about to forget it
• Statistics — day streaks, a weekly review chart, and per-deck mastery. Mastery is graded on how far each card's SM-2 interval has stretched rather than on a pass/fail threshold, so progress moves from the first review onwards, and every deck shows its card mix (mature / young / learning / new, using Anki's 21-day maturity line) plus when it is next due
• Folders — organize your sets into color-coded animated folders
• File upload — extract notes straight from PDF, TXT, or MD files in the browser
• Set sharing — Ultra users can publish read-only links to any set
• Accounts & authentication — JWT-based auth with bcrypt-hashed passwords, plus API-key auth for Ultra
• Light & dark mode — switch themes instantly, preference is remembered
• Bilingual UI — toggle between Norwegian and English
• Editorial design system — a warm paper-and-ink palette with a single accent colour, Clash Display / General Sans typography, and hairline borders instead of heavy shadows
• Restrained motion — mask reveals and staggered sections on the landing page, and quick 150–250 ms micro-interactions inside the app so it stays fast to work in (framer-motion + CSS, prefers-reduced-motion respected)
• Account management — change password, export data, or delete your account
• Public landing page — browse the app and pricing before signing up

Screenshots

How it works

┌─────────────┐      ┌──────────────┐      ┌─────────────┐      ┌──────────────┐
│   React +   │ HTTP │   FastAPI    │  SQL │ PostgreSQL  │      │   Groq API   │
│    Vite     │─────▶│   backend    │─────▶│  database   │      │   (gpt-oss)  │
│  (frontend) │◀─────│              │◀─────│             │      │              │
└─────────────┘ JSON └──────┬───────┘ rows └─────────────┘      └──────▲───────┘
                            │                                          │
                            └──────────── prompt + notes ──────────────┘
                                          flashcards (JSON)

1. You paste notes on the Generate page and choose a card count and difficulty.
2. The frontend sends the request to the FastAPI backend with your JWT token in the Authorization header.
3. The backend builds a prompt and asks Groq to return a strict JSON array of { question, answer } objects.
4. The cards are saved to PostgreSQL under a new deck linked to your user, and the deck is returned to the frontend.
5. You're taken straight into study mode to review them.

Tech stack

Running locally

The app is live above — but you can also clone and run it yourself.

Tests, CI & Docker

Tests — backend logic (auth hashing, JWT, AI-response parsing & mind-map normalization) and frontend utilities/hooks are covered by unit tests:

cd backend && pytest          # backend (pytest)
cd frontend && npm test       # frontend (Vitest)

CI — every push and pull request runs the full test suite and a production build via GitHub Actions.

Docker — run the whole stack (frontend + backend + PostgreSQL) with one command:

GROQ_API_KEY=your_key docker compose up --build

📁 Project structure

FlashGenius/
├── backend/
│   ├── main.py              # FastAPI app + CORS + routers
│   ├── database.py          # DB connection & table setup
│   ├── requirements.txt
│   └── routers/
│       ├── auth.py          # register, login, /me, API keys, account
│       ├── billing.py       # Stripe checkout + payment confirmation
│       └── flashcards.py    # generation, decks, folders, reviews, stats, sharing
│
└── frontend/
    └── src/
        ├── api.js           # Axios instance with JWT interceptor
        ├── useMe.js         # cached account/tier hook + tier gating helpers
        ├── App.jsx          # Routes + auth guards + page transitions
        ├── components/      # Topbar, Footer, Folder, ShareButton, skeletons
        └── pages/
            ├── Landing.jsx        # public marketing page
            ├── Pricing.jsx        # plan comparison + Stripe checkout
            ├── Dashboard.jsx      # sets, folders, stats strip
            ├── Generate.jsx       # notes input + count/difficulty + file upload
            ├── Study.jsx          # card-flip study mode
            ├── SmartStudy.jsx     # SM-2 spaced repetition
            ├── Stats.jsx          # streaks, weekly chart, mastery
            ├── Mindmap.jsx        # interactive zoomable mind map
            ├── SharedDeck.jsx     # public read-only shared sets
            └── Settings.jsx       # plan, theme, language, data, account

What I built

This is a full-stack project I built end to end:

• Designed and built the entire frontend in React — a public landing page, auth flow, dashboard with animated folders, an AI generation page with live settings, card-flip study and SM-2 review modes, a statistics page, an interactive mind map with zoom/pan, and a pricing page.
• Built the REST API in FastAPI from scratch, including JWT authentication, bcrypt password hashing, tier-based feature gating, and full CRUD for decks, folders, and reviews.
• Integrated Stripe Checkout end to end — one-time payments per tier, upgrade pricing where existing customers pay only the difference, and server-side payment verification before any account is upgraded.
• Designed a relational schema in PostgreSQL (users → folders → decks → flashcards → card progress + review log) and wrote the queries by hand.
• Implemented the SM-2 spaced-repetition algorithm on the backend to schedule card reviews, feeding the streak and mastery statistics.
• Integrated a large language model through Groq and engineered the prompt so the model returns strict, parseable JSON every time — including swapping the model out when the provider retired the one I had been using.
• Did all the UI/UX and styling myself in plain CSS + framer-motion — an editorial paper-and-ink design system, a warm dark mode that keeps the same feel instead of turning black, page transitions, micro-animations, and WCAG AA contrast in both themes.

What I learned

• Connecting a frontend, backend, database, and an external AI API into one working product — and how the pieces talk to each other over HTTP and SQL.
• Authentication done properly — how JWTs flow from login through to protected endpoints, and why passwords must be hashed (I hit and fixed a real bcrypt edge case along the way).
• Prompt engineering for reliability — getting an LLM to consistently return machine-readable JSON took a strict system prompt and a low temperature, not just asking nicely.
• Working with constraints — I started on one AI provider, hit free-tier limits, and migrated the whole integration to Groq, which taught me to keep that layer swappable.
• Shipping a complete, polished experience rather than a demo — empty states, loading states, error handling, responsive layouts, and the small details that make an app feel finished.