Skip to Content
StandardsTech Stack

Tech Stack

Every technology in the Frequency stack was chosen deliberately. This page documents what we use, why we chose it, and how the pieces fit together.

Core Framework

Next.js 15

App Router

React Server Components, streaming, parallel routes. The App Router gives us fine-grained control over rendering strategies per route. Currently on v15.5.

React 19

Latest

Server components by default, Actions, use() hook, improved Suspense. Every component is a server component unless marked with 'use client'.

TypeScript 5

Strict

Strict mode enabled. Types flow from LinkML schemas through generated TypeScript to components. No any allowed except in escape-hatch scenarios with comments explaining why.

Mantine v8

Primary UI

CSS Modules, no runtime CSS-in-JS. 100+ components with built-in dark mode, accessibility, and responsive design. See UI & Design for usage rules.

Documentation

TechnologyVersionRole
Nextra4.6MDX-based documentation framework for Next.js App Router
nextra-theme-docs4.6Documentation theme with sidebar, search, TOC
Pagefind1.xPost-build static search index for full-text search

Data & State

TechnologyRoleWhy
SupabaseDatabase + Auth + RealtimePostgreSQL with RLS, built-in OAuth, SSR-friendly via @supabase/ssr
LinkMLData modelingYAML-based schema language — generates SQL DDL and TypeScript from one source
ZodRuntime validationType-safe schemas at the boundary between client and server
TanStack QueryServer state managementCaching, background refetching, optimistic updates
React Hook FormFormsMinimal re-renders, Zod integration via resolvers

Infrastructure

TechnologyRoleWhy
VercelHosting & CDNZero-config Next.js deployment, each app is its own Vercel project
Route 53DNSReliable DNS with wildcard support for PR preview subdomains
pnpmPackage managerFast, disk-efficient, strict dependency resolution. Currently v9.15
TurborepoBuild orchestrationParallel builds, caching, monorepo-aware task running. Currently v2.8

Developer Experience

TechnologyRoleWhy
ESLint 9LintingShared config via @frequencyads/eslint-config, flat config format
PrettierFormattingConsistent code formatting, runs on pre-commit via lint-staged
HuskyGit hooksPre-commit (lint + format), pre-push (type-check), commit-msg validation
PagefindFull-text searchStatic search index built post-build

Brand & Components

PackagePurpose
@frequencyads/brandColors, typography, gradients, Mantine theme (frequencyTheme)
@frequencyads/componentsShared UI: Hero, AudioPlayer, CodeBlock, FadeInSection, PrincipleCard, DosDonts, etc.
@tabler/icons-reactIcon library — lightweight outline SVGs

Workspace Packages

PackagePurpose
@frequencyads/authSupabase auth middleware, OAuth callback, login components, useAuth() hook
@frequencyads/dbSupabase client factory, table prefixing, database types
@frequencyads/modelsLinkML schemas, generated TypeScript types, SQL migration scripts
@frequencyads/eslint-configShared ESLint configuration
@frequencyads/tsconfigShared TypeScript configuration

AI Tooling

TechnologyRoleWhy
Frequency AI DriversAgent orchestration9 specialist agents for development, security, and review
ClaudeAI modelOpus 4.5 for complex reasoning, Sonnet 4.5 for speed
Linear / NotionTask syncProduction uses Linear, sandbox uses Notion

See AI Development for the full agent system documentation.

Version Matrix

RequirementMinimumCurrent
Node.js24.xv24 (.nvmrc)
pnpm9.x9.15.1
TypeScript5.x5.9.3
React19.x19.2.4
Next.js15.x15.5.12
Mantine8.x8.3.14
Nextra4.x4.6.1
Turborepo2.x2.8.7

Day 2 Roadmap

These technologies are planned but not yet integrated:

CategoryCandidatesStatus
Background JobsInngest, Trigger.devEvaluating
EmailResend + React EmailPlanned
File UploadUploadthingPlanned
AnalyticsPostHog, Vercel AnalyticsEvaluating
Error TrackingSentryPlanned
ORMDrizzleEvaluating (alongside raw Supabase)
PaymentsStripePlanned
Advanced SearchAlgolia, MeilisearchEvaluating
UI AnimationFramer MotionPlanned

Dependency Rules

  1. Always check existing packages before adding new dependencies
  2. Prefer workspace packages (@frequencyads/*) over duplicating code
  3. Check bundle size with bundlephobia.com before adding client-side dependencies
  4. Verify React 19 compatibility — not all libraries support the latest React
  5. Pin major versions in package.json — use ^ for minor/patch only
  6. Document new dependencies in the Architecture page and in CLAUDE.md if AI needs to know about them
Last updated on