initial commit

templates/README.md

@@ -0,0 +1,216 @@
+# 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:**
+
+```bash
+# 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:**
+
+```bash
+# 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:**
+
+```bash
+# 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:**
+
+```bash
+# 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:**
+
+```bash
+# 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":
+
+```bash
+# 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