EdTechAISaaS

KLUUU // AI quiz platform

No-code prototype rebuilt as a production EdTech SaaS

React + TypeScriptSupabase Edge FunctionsGoogle Gemini AIStripeEN / DE i18nFreemium SaaS
CRSF / 003Coralsoft Showcase
7
Distinct question types with dedicated components and validation
11
Supabase Edge Functions covering the entire backend surface
<10s
From file upload to first interactive question
01 — The brief

KLUUU had a clear product hypothesis: students and self-directed learners should be able to drop any study material — a PDF, a DOCX, an image of lecture notes — and get a ready-to-take quiz in seconds. The concept had been validated with a rapid prototype built on Lovable, an AI-assisted no-code builder. Early users responded well; the core loop worked.

But the prototype had hit its ceiling. The generated scaffold offered no control over the database architecture, no custom backend logic, no path to a real subscription model, and code that was too fragile to extend with confidence. Moving from a validated idea to paying customers required a complete rebuild.

02 — What we built

The product surface

The rebuild covered every layer of the product — frontend SPA, serverless backend, AI pipeline, subscription infrastructure, email automation, analytics, and i18n. The flagship feature is a quiz generation pipeline that goes from file upload to interactive quiz in under ten seconds. Images are passed directly to Gemini as multimodal vision input — no third-party OCR step. DOCX files are unpacked as ZIP archives and parsed from their raw XML.

01

Quiz generation pipeline

PDF, DOCX, image and TXT inputs up to 50 MB → text extraction or vision input → structured Gemini prompt → JSON questions → live interactive quiz with progress persisted to sessionStorage.

02

Seven question types

Multiple choice, true/false, short answer, multiple select, fill in the blank, ordering, numeric — each with a dedicated React component and both client- and server-side validation.

03

Stripe subscription infrastructure

Checkout session creation, webhook processing, customer portal, and a Supabase Realtime listener that upgrades the client's access level within 500ms of a successful payment — no page refresh required.

04

Learning streak engine

Server-side streak computation with timezone stored per user — so a daily window is accurate in Tokyo and Berlin independently. Four streak states with contextual motivational messaging.

05

Lifecycle email automation

Five Brevo automation triggers: welcome, onboarding completion, Pro upgrade thank-you, cancellation win-back (with discount) and streak-at-risk reminder — all fired from a single Edge Function.

06

Conversion tracking stack

Mixpanel for funnel analysis and retention cohorts, GTM for tag management, Meta Pixel and TikTok Pixel for ad attribution — unified through a single analytics dispatcher with revenue metadata on purchase events.

03 — Architecture and stack

Decisions, not just dependencies.

The frontend is a client-rendered React SPA with React Router v6 protected routes gated by auth and subscription status. TanStack React Query manages all server state; Supabase Realtime subscriptions feed live data back into the cache without polling. Session quiz progress is persisted to sessionStorage so users can close the tab and resume exactly where they left off.

The entire backend runs as eleven Deno-based Supabase Edge Functions — fully serverless, zero infrastructure to manage. Row-Level Security is enabled on every table; users can only ever read and write their own rows. Two fully isolated environments (staging on develop, production on main) use separate Supabase projects, Stripe keys, and analytics IDs — test traffic never touches live billing or production data.

04 — Delivery highlights

What was hard, and how we shipped it.

  1. 01

    Prototype-to-production migration

    Rebuilt the entire application from a Lovable-generated scaffold to a professional React + Supabase stack — preserving validated UX patterns while introducing TypeScript throughout, proper RLS policies, a redesigned data model, and a maintainable component architecture.

  2. 02

    Three-tier short-answer validation

    Free-text answers go through exact match, then fuzzy matching via Levenshtein distance, then Gemini AI adjudication as a final fallback — returning a binary verdict with a reasoning string shown to the user. Maximum leniency without sacrificing correctness.

  3. 03

    Real-time subscription sync

    A Supabase Realtime listener on the subscriptions table means a completed Stripe payment propagates to the client and unlocks Pro features in under 500ms — no polling, no page refresh.

  4. 04

    Full EN / DE localisation

    Every route, UI string, legal page (Privacy Policy, Terms, Imprint), and email automation is fully localised for both English and German markets — including GDPR-compliant account deletion that cascades across all user-owned tables.

  5. 05

    Zero-maintenance serverless backend

    Eleven Edge Functions cover the entire backend surface — quiz generation, answer validation, subscription lifecycle, streak computation, email triggers, and GDPR deletion. No servers to patch, scale, or monitor. Deployed per-environment via Supabase CLI in lockstep with the frontend.

Looking at a project that sits at this kind of seam?

Bring us the architecture, the constraints, and the ship date. We will bring the rest.