Architecture

Tech stack, project structure, and data flow.

Tech Stack

  • Framework — Next.js 14+ (App Router)
  • Language — TypeScript
  • Database — PostgreSQL via Prisma ORM (Neon serverless)
  • Auth — NextAuth.js v4 with JWT sessions + optional MFA
  • Payments — Stripe (subscriptions, embedded checkout)
  • Banking — Plaid (account linking, transaction sync)
  • Styling — Tailwind CSS with custom design tokens
  • Charts — Recharts
  • Email — Custom email templates via the email service
  • Market Data — Yahoo Finance API (server-proxied)

Project Structure

app/
  (auth)/         # Login, signup, MFA, password reset
  (dashboard)/    # Authenticated app pages
  admin/          # Admin panel (separate auth)
  knowledgebase/  # This knowledgebase (public)
  api/            # All API routes
  blog/           # Public blog

components/
  app/            # Feature-specific components
  ui/             # Reusable UI primitives

lib/              # Shared utilities, services, configs
prisma/           # Schema, migrations, seeds
scripts/          # Dev/debug scripts

Data Flow

Authentication

NextAuth handles login/signup with JWT sessions. Middleware protects dashboard routes and checks MFA status. Admin uses a separate cookie-based token.

Plaid Integration

Link Token → Plaid Link UI → Exchange Token → Store access token → Cursor-based transaction sync. All Plaid calls are server-side. Cron jobs keep data fresh.

Tier Permissions

Every API route resolves the user's subscription tier via Stripe and checks feature access against a static tier config. Client-side gating shows upgrade prompts.

Subdomain Routing

Middleware detects subdomains (admin.*, knowledgebase.*) and rewrites to the appropriate route group. This allows separate layouts and auth for each context.

Key Patterns

  • App Data Provider — useAppData() hook provides cached user settings, tier status, and family data across all dashboard pages.
  • Error Handling — withErrorHandler wrapper on API routes for consistent error logging and responses.
  • Tier Config — Static feature config in lib/tier-config.ts defines what each tier can access.
  • View Density — User-selectable compact/comfortable/spacious layouts via context provider.