Plainform | Project Structure

Quick guide to Plainform's folder structure and what goes where.

Root Structure

layout.tsx

page.tsx

Key Folders

`app/` - Next.js App Router

Routes, pages, layouts, and API endpoints.

app/ structure

app/
├── (auth)/          # Auth pages (sign-in, sign-up)
├── (base)/          # Main site pages
├── docs/            # Documentation
├── api/             # API routes
└── layout.tsx       # Root layout

Route groups (auth) and (base) don't appear in URLs.

`components/` - React Components

components/ structure

components/
├── ui/              # Base components (Button, Card, Dialog)
├── blog/            # Blog components
├── pricing/         # Pricing components
├── providers/       # Context providers
├── hooks/           # Custom hooks
└── styles/          # Global CSS

`content/` - MDX Content

content/ structure

content/
├── docs/            # Documentation pages
│   └── meta.json    # Navigation structure
└── blog/            # Blog posts

Add .mdx files and update meta.json for navigation.

`lib/` - Utilities & Integrations

lib/ structure

lib/
├── utils.ts         # General utilities (cn, formatDate)
├── stripe/          # Stripe client
├── prisma/          # Prisma client
├── supabase/        # Supabase JS clients
├── resend/          # Email client
└── amazon/          # S3 client

Each integration gets its own folder with client and helpers.

`prisma/` - Database

prisma/ structure

prisma/
├── schema.prisma    # Database schema
└── migrations/      # Migration history

Commands:

Prisma commands

npx prisma migrate dev    # Create migration
npx prisma studio         # Open GUI
npx prisma generate       # Generate types

`types/` - TypeScript Definitions

types/ structure

types/
├── BlogInterfaces.ts
├── StripeInterfaces.ts
└── EventInterfaces.ts

Prefix all interfaces with I: IUser, IBlogPost, IProps.

`validationSchemas/` - Zod Schemas

validationSchemas/ structure

validationSchemas/
├── authSchemas.ts
├── eventSchemas.ts
└── newsletterSchemas.ts

Runtime validation for forms and API routes.

`locales/` - Internationalization

locales/ structure

locales/
└── en.json          # English translations

en.json

{
  "homePage": {
    "heroSection": {
      "title": "Welcome"
    }
  }
}

Usage: import locale from '@/locales/en.json'

`config/` - Site Configuration

config/ structure

config/
└── site.ts          # Site metadata, links

Centralized config for site name, description, social links.

Development Files

`.husky/` - Git Hooks

Pre-commit, commit-msg, and pre-push hooks for code quality.

pre-commit: Runs linting checks
commit-msg: Validates commit message format (commitlint)
pre-push: Runs validation before pushing

`.vscode/` - VS Code Settings

Shared editor config and recommended extensions.

`.env` - Environment Variables

.env

DATABASE_URL="postgresql://..."
NEXT_PUBLIC_SUPABASE_URL="https://your-project-ref.supabase.co"
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY="sb_publishable_..."
CLERK_SECRET_KEY="sk_..."
CLERK_WEBHOOK_SECRET="whsec_..."
STRIPE_SECRET_KEY="sk_..."

Never commit .env files. Use .env.example as template.

Quick Reference

Need to...	Go to...
Add page	`app/(base)/your-page/page.tsx`
Create component	`components/ui/YourComponent.tsx`
Add API route	`app/api/your-endpoint/route.ts`
Write blog post	`content/blog/your-post.mdx`
Add docs page	`content/docs/section/page.mdx`
Create utility	`lib/utils.ts` or `lib/your-module/`
Define types	`types/YourInterfaces.ts`
Add validation	`validationSchemas/yourSchemas.ts`
Update database	`prisma/schema.prisma`

Import Aliases

Import examples

import { Button } from '@/components/ui/Button';
import { prisma } from '@/lib/prisma/prisma';
import type { IUser } from '@/types/UserInterfaces';
import locale from '@/locales/en.json';

The @/ alias points to project root.

Project Structure

On this page