laconic-deployer-frontend/standards/documentation/FEATURE_BUILDING_TEMPLATE.md

Feature Building: [Feature Name]

This is a template for the Feature Building process. Replace placeholder text with actual content for your feature.

1. Design and Data Flow Analysis

Design Analysis

UI Components

• Component 1: [Description, states, interactions]
• Component 2: [Description, states, interactions]
• ...

Interactions and Animations

• Interaction 1: [Description]
• Animation 1: [Description]
• ...

Responsive Behavior

• Mobile: [Description]
• Tablet: [Description]
• Desktop: [Description]

Accessibility Considerations

• [List accessibility requirements]

Data Flow Analysis

Data Requirements

• Data Entity 1: [Properties, validation rules]
• Data Entity 2: [Properties, validation rules]
• ...

API Endpoints

• Endpoint 1: [METHOD] /path - [Purpose, request/response format]
• Endpoint 2: [METHOD] /path - [Purpose, request/response format]
• ...

State Management

• Global State: [What needs to be in global state]
• Local State: [What can be kept in component state]
• Derived State: [What can be computed from other state]

Data Transformations

• [Describe any transformations needed between API and UI]

Caching/Persistence

• [Describe caching or persistence requirements]

2. Structure Planning

Routing

Routes

• /route1: [Purpose, parameters]
• /route2: [Purpose, parameters]
• ...

Layouts

• Route 1 Layout: [Description]
• Route 2 Layout: [Description]
• ...

Access Control

• [Describe any route guards or access control]

Component Hierarchy

ParentComponent
├── ChildComponent1
│   ├── GrandchildComponent1
│   └── GrandchildComponent2
└── ChildComponent2

Component Interfaces

• Component 1 Props: [Props description]
• Component 2 Props: [Props description]
• ...

File Structure

feature-name/
├── index.ts
├── types.ts
├── components/
│   ├── ComponentOne.tsx
│   └── ComponentTwo.tsx
├── hooks/
│   └── useFeatureData.ts
└── utils/
    └── featureUtils.ts

New Files to Create

• feature-name/index.ts: [Purpose]
• feature-name/types.ts: [Purpose]
• ...

3. File Skeletons

feature-name/index.ts

/**
 * @module FeatureName
 * @description [Brief description of the feature]
 *
 * This module exports the main components and hooks for the [Feature Name] feature.
 *
 * @example
 * ```tsx
 * import { FeatureComponent } from '@/features/feature-name';
 *
 * function MyComponent() {
 *   return <FeatureComponent />;
 * }
 * ```
 */

export * from './components/ComponentOne';
// Add additional exports

feature-name/components/ComponentOne.tsx

/**
 * @component ComponentOne
 * @description [Description of the component]
 *
 * Requirements:
 * - [Requirement 1]
 * - [Requirement 2]
 * - ...
 *
 * States:
 * - Loading: [Description]
 * - Error: [Description]
 * - Success: [Description]
 *
 * @example
 * ```tsx
 * <ComponentOne prop1="value" />
 * ```
 */

// Implementation details will go here

[Add skeleton documentation for all planned files]

4. Implementation Guide

Implementation Order

1. Create types.ts with all required interfaces
2. Implement API utilities and hooks
3. Implement base UI components
4. Implement container components
5. Connect components to data sources
6. Implement routing and navigation

Critical Requirements

Performance

• [List performance requirements]

Accessibility

• [List accessibility requirements]

Compatibility

• [List browser/device compatibility requirements]

Error Handling

• [List error handling expectations]

Testing Requirements

Unit Tests

• Component 1: [Test scenarios]
• Component 2: [Test scenarios]
• ...

Integration Tests

• [List integration test scenarios]

E2E Tests

• [List E2E test scenarios]

What NOT to Do

• ❌ [Anti-pattern 1]
• ❌ [Anti-pattern 2]
• ...

Review Checklist

• Code follows project style guide
• Components are properly documented
• All critical requirements are met
• Tests cover main functionality
• Accessibility guidelines are followed
• Performance is satisfactory
• Error handling is comprehensive

Process Checklist

• Complete Design & Data Flow Analysis
• Create Structure Plan
• Create Skeleton Files with Documentation
• Develop Implementation Guide
• Review and Finalize Feature Building Documents
• Implement Feature Following Guide
• Review Implementation Against Requirements