ai-wpa/templates/README.md

Boilerplate Templates

This directory contains template files to help you quickly create new components, pages, API routes, hooks, and database models with consistent patterns and best practices.

Available Templates

1. Page Template (page.template.tsx)

Use this template to create new Next.js pages with proper metadata and SEO setup.

Features:

• Metadata generation with SEO optimization
• Responsive layout structure
• Examples for static and dynamic pages
• Proper TypeScript types

Usage:

# Copy the template
cp templates/page.template.tsx app/my-new-page/page.tsx

# Replace TEMPLATE_NAME with your page name
# Update metadata and content

2. Component Template (component.template.tsx)

Create reusable React components with proper TypeScript interfaces and styling patterns.

Features:

• TypeScript interface definitions
• Multiple component patterns (client/server, compound, forwardRef)
• Loading states and error handling
• Tailwind CSS with custom UI patterns
• Accessibility considerations

Usage:

# Copy the template
cp templates/component.template.tsx components/MyComponent.tsx

# Replace TEMPLATE_NAME and implement your logic

3. API Route Template (api-route.template.ts)

Build robust API endpoints with validation, authentication, and error handling.

Features:

• Full CRUD operations (GET, POST, PUT, DELETE)
• Zod validation schemas
• Authentication middleware integration
• Consistent error handling
• Request/response TypeScript types
• Pagination support

Usage:

# Copy the template
cp templates/api-route.template.ts app/api/my-endpoint/route.ts

# Update schemas and implement business logic

4. Custom Hook Template (hook.template.ts)

Create custom React hooks with proper patterns and optimizations.

Features:

• TanStack Query integration
• State management patterns
• Debouncing and cleanup
• Multiple hook patterns (simple state, localStorage, API)
• TypeScript generics

Usage:

# Copy the template
cp templates/hook.template.ts hooks/useMyHook.ts

# Replace TEMPLATE_NAME and implement your logic

5. Database Model Template (model.template.ts)

Build Mongoose models with Zod validation and proper TypeScript types.

Features:

• Zod schema validation
• Mongoose schema with indexes
• Instance and static methods
• Middleware for data processing
• Virtual fields
• Full TypeScript support

Usage:

# Copy the template
cp templates/model.template.ts models/MyModel.ts

# Define your schema and methods

Template Conventions

Naming Conventions

• Files: Use descriptive names in kebab-case or camelCase
• Components: Use PascalCase for component names
• Variables: Use camelCase for variables and functions
• Constants: Use UPPER_SNAKE_CASE for constants

Code Organization

• Group related imports together
• Define types and interfaces at the top
• Implement main logic in the middle
• Export statements at the bottom
• Add JSDoc comments for complex functions

Error Handling

• Always wrap async operations in try-catch blocks
• Use proper HTTP status codes for API routes
• Provide meaningful error messages
• Log errors for debugging

TypeScript Best Practices

• Define proper interfaces for props and return types
• Use generics where appropriate
• Avoid any type - use unknown if needed
• Leverage union types for variants

Security Considerations

• Always validate input data with Zod schemas
• Use authentication middleware for protected routes
• Sanitize user inputs
• Follow principle of least privilege

Quick Start Guide

1. Choose the appropriate template for your use case
2. Copy the template file to your desired location
3. Replace placeholder names (TEMPLATE_NAME, etc.)
4. Update imports to match your project structure
5. Implement your specific logic
6. Test your implementation

Example Workflow

Creating a new feature called "Tasks":

# 1. Create the model
cp templates/model.template.ts models/task.ts
# Edit: Define Task schema, add methods

# 2. Create API routes
cp templates/api-route.template.ts app/api/tasks/route.ts
# Edit: Implement CRUD operations for tasks

# 3. Create custom hook
cp templates/hook.template.ts hooks/useTask.ts
# Edit: Add task-specific logic and API calls

# 4. Create components
cp templates/component.template.tsx components/TaskCard.tsx
cp templates/component.template.tsx components/TaskList.tsx
# Edit: Implement task UI components

# 5. Create pages
cp templates/page.template.tsx app/tasks/page.tsx
cp templates/page.template.tsx app/tasks/[id]/page.tsx
# Edit: Build task management pages

Template Customization

Feel free to modify these templates to match your project's specific needs:

• Add your own validation patterns
• Include additional dependencies
• Modify styling approaches
• Add project-specific utilities
• Update error handling patterns

Contributing to Templates

When improving templates:

1. Keep them generic and reusable
2. Add comprehensive comments and examples
3. Follow established patterns in the codebase
4. Test templates with real use cases
5. Update this README with changes

Support

If you encounter issues with templates or need additional patterns:

1. Check existing implementations in the codebase
2. Review Next.js and React documentation
3. Consult TypeScript best practices
4. Ask for help in team discussions