Frizzle - AI-Powered Math Grading for Teachers

Project Overview

Duration: 2025 - Present

Role: Senior Full-Stack Developer

Industry: Frizzle - AI-Powered Math Grading for Teachers.

Stage: Early-stage

Type Safety First → Minimize runtime errors.
Server Logic First → Better security & performance, Server Components by default, Client Components when needed.
Automated Workflows → Type generation, migrations, testing.
Strict Contracts → Database migrations, GraphQL schemas as sources of truth.
Non-blocking Operations → Analytics/notifications don't block responses.
Error Tracking → PostHog integration across all layers.
Type Generation: Automatic GraphQL & Prisma type generation.
Database: Migration-first workflow (Prisma migrations required).
Data Streaming: Suspense for parallel loading.

Server-First Architecture: Reduced client-side JavaScript, faster TTI (Time to Interactive), better Core Web Vitals.
Image Optimization: Automatic format optimization (WebP for modern browsers), Responsive image sizing, Lazy loading by default
GraphQL Query Optimization: Reduced payload size, faster API responses.
Non-blocking Operations: Faster API response times, better UX.
Suspense & Streaming: Users see UI faster, perceived performance improves even if data takes time.
MobX Efficient Re-renders: Minimal re-renders, smooth UI interactions.

GraphQL API - Type-safe queries and mutations with auto-generated types.
AWS S3 - Image storage with presigned URLs and CORS support for exports.
Supabase - PostgreSQL database + real-time updates (replaces GraphQL subscriptions).
Google OAuth - Authentication via Google One Tap + Supabase Auth.
Stripe - Payment processing with automatic subscription management.
PostHog - Error tracking, session replay, and analytics.

Automatic Type Generation - auto-syncs GraphQL & Prisma types.
Stripe Webhooks - Auto-enroll users, reset monthly usage, manage subscriptions.
Real-time Status Updates - Supabase Realtime for worksheet processing tracking.
Server Actions - Non-blocking operations via after() (analytics, notifications).
Prisma Migrations - Automated schema versioning with migrations.
Auto-grading - Processes worksheets and generates feedback automatically.
Usage Tracking - Counts completed worksheets against monthly limits (Free: 50/mo, Pro: Unlimited).
Error Boundaries - React error capture → PostHog logging.

User Signup → Auto-create Stripe customer + free subscription
Worksheet Upload → Auto-check usage limits → Auto-grade → Auto-increment counter
Monthly Billing → Stripe resets usage automatically (no cron jobs)
Export → Canvas rendering → Auto-upload to S3 with CORS headers

Server Components by Default - Direct DB access, zero JS shipped when possible
Streaming with Suspense - Progressive rendering for faster perceived performance
MobX State Management - Observable stores for fine-grained reactivity (non Redux)
Client-Side Error Boundaries - Catches React errors and reports to PostHog
ProseMirror Editor - Rich text feedback with collaborative editing capabilities
Canvas-based UI - GradingCanvas component for image annotation with custom feedback placement

Type-Safe GraphQL - Auto-generated TypeScript types from schema (no manual types)
Prisma ORM - Migration-first DB design with type-safe queries
PostgreSQL + Supabase - Serverless PostgreSQL with built-in real-time
Normalized Relational Schema - Proper foreign keys and relations via Prisma
Real-time Subscriptions - Supabase Realtime instead of GraphQL subscriptions (lighter weight)
Parallel Data Loading - Promise.all() in Server Components for faster page loads

Prisma Migrations - Version-controlled schema evolution (never manual SQL)
GraphQL Resolvers - Business logic separation from API
API Routes - Stripe webhooks, S3 uploads, GraphQL endpoint
Server Actions - Direct mutation patterns with
Non-Blocking Ops - after() for deferred analytics/notifications without blocking responses
Composite Keys - Multi-field unique constraints for data integrity

Image Optimization - Next.js Image component for S3-hosted worksheet images
Real-time Feedback - Instant status updates during worksheet grading
Presigned URLs - Direct S3 upload without backend intermediary
CORS-Enabled Exports - Canvas rendering with images embedded in downloads
Responsive UI - Tailwind CSS with custom red/amber theme
Error Recovery - Graceful error handling with user-facing messages via PostHog
Lazy Loading - Components load progressively with Suspense boundaries

Next.js, React, TypeScript, Tailwind CSS, MobX (state management), Apollo Client (GraphQL), ProseMirror (rich text editor) ,html2canvas-pro (canvas rendering)