# name: Feature Structure Template description: Template for creating complete Feature-Based Architecture structure version: 1.0.0 template: | # Feature Structure for ({featureName}) ## Directory Structure ``` app/(features)/({featureName})/ ├── api/ # Backend API layer │ └── {entityName}/ │ ├── [id]/ # Dynamic routes for specific entities │ │ ├── route.ts # Individual entity operations (GET, PUT, DELETE) │ │ └── [action]/ # Specific actions (optional) │ │ └── route.ts │ ├── controller.ts # Business logic controller extending BaseController │ ├── route.ts # Collection operations (GET, POST) │ └── schema.ts # Zod validation & TypeScript types ├── components/ # Feature-specific UI components │ ├── {entityName}-form.tsx # Create/edit forms │ ├── {entityName}-list.tsx # List/table components │ ├── {entityName}-card.tsx # Individual item display │ └── {entityName}-search.tsx # Search/filter components ├── hooks/ # Custom React hooks │ ├── use{EntityName}.ts # Single entity operations │ ├── use{EntityName}Mutations.ts # Create/update/delete mutations │ └── use{Entities}.ts # List/search operations ├── types/ # TypeScript type definitions │ └── {entityName}.types.ts # Feature-specific types (extends base schema types) └── {featurePages}/ # Next.js pages ├── [id]/ # Dynamic pages for specific entities │ ├── page.tsx # Entity detail view │ └── edit/ # Edit entity page │ └── page.tsx ├── new/ # Create new entity pages │ └── page.tsx └── page.tsx # Feature listing/index page ``` ## File Templates ### API Route (route.ts) ```typescript import { NextRequest, NextResponse } from 'next/server' import { get{EntityName}Controller } from './controller' import { dbConnect } from '@/shared/lib/db-connection' import { withErrorHandler } from '@/shared/lib/error-handler' // GET /api/{entityName} - List entities export const GET = withErrorHandler(async (request: NextRequest) => { const dbClient = await dbConnect() const controller = get{EntityName}Controller(dbClient) return await controller.getAll(request) }) // POST /api/{entityName} - Create entity export const POST = withErrorHandler(async (request: NextRequest) => { const dbClient = await dbConnect() const controller = get{EntityName}Controller(dbClient) return await controller.create(request) }) ``` ### Feature Hook (use{Entities}.ts) ```typescript import { useState, useCallback } from 'react' import { {EntityName}DatabaseModel, {EntityName}Search } from '../api/{entityName}/schema' import { useAppContext } from '@/shared/contexts/app-context' export const use{Entities} = () => { const [entities, setEntities] = useState<{EntityName}DatabaseModel[]>([]) const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0, totalPages: 0 }) const { isLoading, setIsLoading } = useAppContext() const fetchEntities = useCallback(async (params: {EntityName}Search = {}) => { setIsLoading(true) try { const searchParams = new URLSearchParams(params as any) const response = await fetch(`/api/{entityName}?${{searchParams}}`) const result = await response.json() if (result.success) { setEntities(result.data) setPagination(result.pagination) } } catch (error) { console.error('Error fetching {entities}:', error) } finally { setIsLoading(false) } }, [setIsLoading]) return { entities, pagination, isLoading, fetchEntities } } ``` ### Feature Component ({EntityName}List.tsx) ```typescript 'use client' import { use{Entities} } from '../hooks/use{Entities}' import { {EntityName}Card } from './{entityName}-card' import { useEffect } from 'react' export function {EntityName}List() { const { entities, isLoading, fetchEntities } = use{Entities}() useEffect(() => { fetchEntities() }, [fetchEntities]) if (isLoading) { return