Development

Overview

This section covers everything you need to know about developing with this template. From running development servers to working with AI coding assistants, you'll find all the essential development workflows and best practices here.

Getting Started with Development

After initial setup, you're ready to start development:

npm run dev

This starts the development server with hot reload and opens your app at http://localhost:3000. The dev command uses Turbopack for fast refresh and runs declarative routing in watch mode automatically.

What's in This Section

Commands

Complete reference of all npm scripts and CLI commands:

• Development server and build commands
• Database operations (push, generate, migrate, studio)
• Declarative routing commands
• Type checking and linting
• Email development server
• Testing utilities

AI Agents

AI coding assistant support and configuration:

• Supported agents (Claude Code, Cursor, Windsurf, GitHub Copilot, Antigravity)
• What agents know about this project
• Critical rules for AI-assisted development
• Configuration file locations

Best Practices

Development conventions and patterns:

• Type safety guidelines
• Server/Client component separation
• Database operation patterns
• tRPC usage best practices
• Styling conventions
• Form handling
• Security considerations

Quick Reference

Common Development Tasks

File Creation Flow

When adding new features:

1. Create feature module in src/features/<name>/
2. Follow 5-file pattern (schema.ts, functions.ts, hooks.ts, fields.tsx, prompts.tsx)
3. Add database table in src/db/tables/ if needed
4. Run npm run db:push to apply schema changes
5. Create page in src/app/[locale]/<path>/page.tsx
6. Run npm run dr:build to generate routes

See Templates for step-by-step guides.

Development Environment

Project Structure

src/
├── app/              # Next.js App Router (pages, layouts, API routes)
├── components/       # Shared UI components
├── config/           # App-wide configuration
├── db/               # Database schema and operations
├── features/         # Feature-based modules (domain logic)
├── forms/            # Form utilities and abstractions
├── hooks/            # Shared React hooks
├── i18n/             # Internationalization
├── lib/              # Utilities and library integrations
├── messages/         # Translation files
├── routes/           # Declarative routing config
├── trpc/             # tRPC routers and setup
└── types/            # Global type definitions

Configuration Files

Development Philosophy

This template follows strict conventions for consistency and maintainability:

• Type safety first - Use TypeScript type, Zod schemas, tRPC
• Feature-based organization - Group by domain, not by technical layer
• Component standards - Use <Icon>, <H1>-<H6>, <Section>
• Design tokens - No arbitrary Tailwind values
• Server-first - Prefer Server Components, mark Client Components explicitly

Next Steps

Additional Resources

• Architecture - System design and tech stack
• Patterns - Feature development patterns
• Templates - Step-by-step guides for common tasks
• Database - Database operations and migrations