Introduction to FRAME

Welcome to the FRAME documentation. This page provides a general overview of what FRAME is, how it is structured, and the benefits of its architecture.

What is FRAME?

FRAME is a modern, highly scalable monorepo designed to accelerate the development of web applications, backend services, and AI-powered tools. By adopting a monorepo approach, FRAME ensures consistency across the ecosystem, making it easier to build and evolve complex products through efficient code sharing, development tooling, strict typing, and a preconfigured testing suite.

FRAME Principles

1. End-to-end strict typing
2. Context for artificial intelligence
3. First-class developer experience
4. High-level testing

Structure and Architecture

The monorepo is built on cutting-edge tooling such as Turborepo (for efficient monorepo task management) and pnpm (for safe, efficient dependency management).

FRAME’s structure is primarily divided into two large blocks: Applications (apps/) and Packages (packages/).

1. Applications (apps/)

This is where user-facing applications live. FRAME includes several applications optimized for different use cases:

• Next.js (apps/next): The main frontend portal or dynamic web application. Built with the Next.js App Router (React 19), it provides SSR, strong performance, and a structured design.
• NestJS (apps/nest): The ecosystem’s primary backend. Built on NestJS, it handles robust business logic, authentication, secure database connections, and integrations with external services.
• Astro (apps/astro): Starlight documentation portal template for FRAME-derived projects.
• Docs site (docs/): This site — monorepo documentation powered by Astro and Starlight, loading guides from each package’s docs/ folder.

2. Shared Packages (packages/)

Packages encapsulate logic, components, and configuration consumed by one or more applications, promoting a DRY (Don’t Repeat Yourself) approach. Some of the most important ones are:

• @frame/core: The core of pure configuration and utilities for the ecosystem. It ensures consistent validations using Zod schemas.
• @frame/models: Manages database models (PostgreSQL), schemas, and migrations with Drizzle ORM. It centralizes data definitions so the backend and frontend share the same TypeScript types and Zod schemas.
• @frame/auth: SDK for the full authentication flow, sessions, and access control, implemented with Better Auth.
• @frame/mail: SDK for sending email and rendering transactional email templates built with React Email.
• @frame/cli: CLI for initializing environments and managing secrets.

Key Benefits of the FRAME Monorepo

1. Strict Typing (Type Safety): By sharing the same models (@frame/models) and utilities (@frame/core), any change in the database or backend API is immediately reflected as a TypeScript compile error in the frontend when incompatibilities exist, ensuring seamless integration.
2. Single Source of Truth: TypeScript, ESLint (Oxlint), Vitest, and Prettier (Oxfmt) configurations are unified, guaranteeing the same code-quality standards across every part of the project.
3. Massive Code Reuse: Instead of reimplementing form validation, you extract the Zod schema from @frame/models.
4. Agile Development and Testing: The entire infrastructure ships with Vitest and Playwright configured. Turborepo runs all tests and project builds in parallel with caching, avoiding unnecessary wait times.

FRAME is not merely a collection of applications; it is an architecture designed to scale systems to enterprise level while preserving development agility.