Architecture Overview

Tech stack:

• Next.js 14 (Pages Router) with middleware.js and instrumentation.js
• GraphQL (Yoga via graphql-yoga with feature flag switch from legacy handler)
• React 18, Material UI 5, Relay (react-relay v14)
• Backing stores: Postgres (Supabase) via Prisma; legacy FaunaDB; flag-driven migration
• Services layer in TypeScript (services/*) wrapping Prisma/Supabase and domain logic
• Feature flags via Statsig and flags/next
• Observability: Sentry, Axiom; debugging with Spotlight
• Payments: Stripe; Messaging: Twilio, Mailgun
• Flow type with an ongoing migration to TypeScript

High-level diagram:

• Client (Next.js pages + Relay) → /api/graphql → GraphQL Yoga → Resolvers → Services → Prisma/Postgres
• Legacy path (flagged): GraphQL legacy handler → FaunaDB
• Middleware: withStableId (cookie) and withAuth (tokens) gate most routes

Key directories:

• Frontend: components/, containers/, pages/, hooks/
• API: pages/api/*, lib/graphql/*, server/graphql/*
• Domain services: services/*
• Data model: prisma/schema.prisma
• GraphQL schema: server/graphql/schema/*.graphql, assembled in server/graphql/schema/index.js
• Flags: lib/flags/index.js, Statsig server: lib/statsig-backend.ts
• Plan features: constants/features.js

Build and codegen:

• Relay compiler uses Flow artifacts (relay.config.js), app code is mixed JS/Flow + TS
• GraphQL codegen (codegen.yml) for TS types in some areas
• Prisma generate/seed

Execution modes:

• Flags control Postgres enablement and GraphQL Yoga routing, plus per-entity migrations
• Vercel deployment with cron triggers in vercel.json