MyApp

Consistent naming makes code readable and maintainable. Here are Plainform's conventions.

Files & Folders

Type	Convention	Example
Components	PascalCase	`Hero.tsx`, `PricingCard.tsx`
Utilities	camelCase	`utils.ts`, `formatDate.ts`
Types	PascalCase + suffix	`BlogInterfaces.ts`
Routes	kebab-case	`sign-in/`, `blog-post/`
Content	kebab-case	`getting-started.mdx`
API Routes	`route.ts`	`app/api/users/route.ts`

Code Elements

Interfaces & Types

Always prefix interfaces with I

Interface naming

✅ Good
interface IUser {
  id: string;
  name: string;
}

interface IPricingCardProps {
  title: string;
  price: number;
}

type Status = 'pending' | 'active' | 'inactive';

❌ Bad
interface User { }
interface PricingCardProps { }

Functions

Function naming

// Components: PascalCase
export function Hero() { }

// Utilities: camelCase with verbs
export function formatDate(date: Date): string { }
export function slugify(text: string): string { }

// Event handlers: handle prefix
const handleClick = () => { };
const handleSubmit = (e: FormEvent) => { };

// Booleans: is/has/can/should prefix
function isAuthenticated(): boolean { }
function hasPermission(user: IUser): boolean { }

Variables

Variable naming

// Regular: camelCase
const userName = 'John';
const totalPrice = 100;

// Booleans: is/has/can prefix
const isOpen = true;
const hasAccess = false;

// Config objects: camelCase
export const siteConfig = { };
export const stripe = new Stripe();

// True constants: SCREAMING_SNAKE_CASE
const MAX_FILE_SIZE = 5 * 1024 * 1024;
const API_VERSION = '2024-01-01';

// Locale variables: suffix with Locale
const heroLocale = locale?.homePage?.heroSection;

Database (Prisma)

schema.prisma

// Models: PascalCase, singular
model User {
  id        String @id
  firstName String
  orders    Order[]
}

// Fields: camelCase
// Relations: camelCase, descriptive

API Routes

route.ts

// File: route.ts
export async function GET(req: Request) { }
export async function POST(req: Request) { }

// Schemas: suffix with Schema
export const signInSchema = z.object({ });

Components: Hero.tsx → export function Hero()
Utilities: utils.ts → export function formatDate()
Interfaces: Always prefix with I → IUser, IProps
Booleans: isOpen, hasAccess, canEdit
Constants: siteConfig, MAX_SIZE
Routes: sign-in/, blog-post/

ESLint and Prettier enforce most of these automatically. Run npm run lint before committing.

Consistent naming makes code readable and maintainable. Here are Plainform's conventions.

Files & Folders

Type	Convention	Example
Components	PascalCase	`Hero.tsx`, `PricingCard.tsx`
Utilities	camelCase	`utils.ts`, `formatDate.ts`
Types	PascalCase + suffix	`BlogInterfaces.ts`
Routes	kebab-case	`sign-in/`, `blog-post/`
Content	kebab-case	`getting-started.mdx`
API Routes	`route.ts`	`app/api/users/route.ts`

Code Elements

Interfaces & Types

Always prefix interfaces with I

Interface naming

✅ Good
interface IUser {
  id: string;
  name: string;
}

interface IPricingCardProps {
  title: string;
  price: number;
}

type Status = 'pending' | 'active' | 'inactive';

❌ Bad
interface User { }
interface PricingCardProps { }

Functions

Function naming

// Components: PascalCase
export function Hero() { }

// Utilities: camelCase with verbs
export function formatDate(date: Date): string { }
export function slugify(text: string): string { }

// Event handlers: handle prefix
const handleClick = () => { };
const handleSubmit = (e: FormEvent) => { };

// Booleans: is/has/can/should prefix
function isAuthenticated(): boolean { }
function hasPermission(user: IUser): boolean { }

Variables

Variable naming

// Regular: camelCase
const userName = 'John';
const totalPrice = 100;

// Booleans: is/has/can prefix
const isOpen = true;
const hasAccess = false;

// Config objects: camelCase
export const siteConfig = { };
export const stripe = new Stripe();

// True constants: SCREAMING_SNAKE_CASE
const MAX_FILE_SIZE = 5 * 1024 * 1024;
const API_VERSION = '2024-01-01';

// Locale variables: suffix with Locale
const heroLocale = locale?.homePage?.heroSection;

Database (Prisma)

schema.prisma

// Models: PascalCase, singular
model User {
  id        String @id
  firstName String
  orders    Order[]
}

// Fields: camelCase
// Relations: camelCase, descriptive

API Routes

route.ts

// File: route.ts
export async function GET(req: Request) { }
export async function POST(req: Request) { }

// Schemas: suffix with Schema
export const signInSchema = z.object({ });

Quick Reference

ESLint and Prettier enforce most of these automatically. Run npm run lint before committing.

Naming Conventions

Files & Folders

Code Elements

Interfaces & Types

Functions

Variables

Database (Prisma)

API Routes

Quick Reference

On this page

Naming Conventions

Files & Folders

Code Elements

Interfaces & Types

Functions

Variables

Database (Prisma)

API Routes

Quick Reference

On this page