MyApp

Getting Started

IntroductionInstallationPull Updates
Architecture
Architecture OverviewProject StructureNaming ConventionsCode StyleRouting

Setup

IDEAI AgentsMCP ServersEnvironment Variables

Workflow

Git WorkflowBuild & DeployTroubleshooting

Authentication

OverviewSetup & ConfigurationUsage & IntegrationTroubleshooting

Payments

OverviewSetup & ConfigurationUsage & IntegrationTroubleshooting

Supabase

OverviewSetup & ConfigurationTroubleshooting

Database

Database SetupPrisma ORMUsage & IntegrationMigrationsTroubleshooting

Storage

OverviewSetup & ConfigurationUsage & IntegrationTroubleshooting

Emails

OverviewSetup and ConfigurationUsage and IntegrationTroubleshooting

SEO

OverviewConfiguration & Best PracticesCustomization & Optimization

UI

OverviewSetup and ConfigurationThemingTroubleshooting
MyApp
Architecture

Architecture Overview

High-level architecture and key design decisions

Plainform is built on Next.js 16 App Router with Cache Components mode, leveraging modern React patterns and a carefully selected tech stack.

Core Principles

Server-First: Server components by default, client components only when needed (hooks, events, browser APIs).

Type Safety: TypeScript strict mode + Zod validation + Prisma types throughout.

Modular Integrations: Each service (Clerk, Stripe, etc.) encapsulated in lib/ for easy swapping.

Content-Driven: MDX with Fumadocs for type-safe, version-controlled content.

Cache Components: Next.js 16 feature for optimal performance with Suspense boundaries.

Performance

  • Partial Prerendering: Static shell with dynamic streaming
  • Cache Components mode: Suspense boundaries for optimal caching
  • Automatic code splitting per route
  • Server component caching with revalidateTag('tag', 'max')
  • Static generation for marketing pages
  • CDN caching for assets
  • Database connection pooling

Security

  • Clerk middleware protects routes
  • Zod validates all input
  • Webhook signature verification
  • API Rate limiting
  • Sanitized error messages
  • SQL injection prevention (Prisma)

Project Structure

Folder organization guide

Naming Conventions

File and code naming patterns

Code Style

TypeScript patterns and best practices

Routing

App Router and navigation

How is this guide ?

Last updated on

Architecture

Understand Plainform's architecture, conventions, and design patterns

Project Structure

Folder organization and file structure guide

On this page

Core Principles
Performance
Security