# Feature Building Process This document outlines our standardized approach to building new features. Following this process ensures that features are well-designed, properly structured, thoroughly documented, and consistently implemented. ## 1. Design and Data Flow Analysis Before writing any code, thoroughly analyze the design and data flow requirements: ### Design Analysis - Study the Figma/design mockups thoroughly - Identify all UI components and their states - Note interactions, animations, and transitions - Identify responsive behavior requirements - Document accessibility considerations ### Data Flow Analysis - Map out the data requirements for the feature - Identify data sources and sinks - Document API endpoints that will be used - Define state management needs - Identify where data transformations occur - Document any caching or persistence requirements ### Output Create a Design & Data Requirements document containing: - Screenshots/references to relevant design mockups - Component breakdown with states and props - Data flow diagram - API contract expectations - State management approach ## 2. Structure Planning Once the design and data requirements are understood, plan the structure: ### Routing - Define all routes needed for the feature - Document route parameters and query parameters - Specify layout components for each route - Define route guards or access control ### Component Hierarchy - Create a component tree showing parent-child relationships - Identify reusable components vs. feature-specific components - Define prop interfaces for all components - Document component responsibilities and boundaries ### File Structure - Plan the directory structure following project conventions - Define file naming following established patterns - Identify shared utilities, hooks, or helpers needed - Plan test file organization ### Output Create a Structure Plan document containing: - Route definitions - Component hierarchy diagram - Directory and file structure plan - List of new files to create with their purpose ## 3. File Creation with Documentation Create skeleton files with comprehensive documentation: ### For Each Component: - Purpose and responsibility - Props interface with detailed documentation - State management approach - Side effects and cleanup - Error handling approach - Expected behaviors for all edge cases - Performance considerations - Testing strategy ### For Data/API Files: - Type definitions - Function signatures with parameters and return types - Error handling approach - Caching strategy - Retry logic ### For Hooks/Utilities: - Purpose and usage examples - Parameters and return values - Side effects - Error scenarios - Performance characteristics ### Output A set of skeleton files with detailed JSDoc comments outlining implementation requirements for each file. ## 4. Implementation Guide Create a comprehensive guide for engineers or AI agents to follow: ### Implementation Order - Dependency graph showing which files should be implemented first - Recommended implementation sequence ### Critical Requirements - Performance requirements - Accessibility requirements - Browser/device compatibility requirements - Error handling expectations ### Testing Requirements - Unit test coverage expectations - Integration test scenarios - E2E test scenarios ### What NOT to Do - Anti-patterns to avoid - Performance pitfalls - Security concerns - Common mistakes ### Review Checklist - Code quality checks - Performance review points - Accessibility review points - Security review points ## Example: Feature Building for a User Profile Page ### 1. Design & Data Analysis ``` Design Requirements: - Profile page with user avatar, name, email, and bio - Edit profile form with validation - Activity feed showing recent actions ... Data Requirements: - User profile data from GET /api/users/:id - Profile updates via PUT /api/users/:id - Activity data from GET /api/users/:id/activity ... ``` ### 2. Structure Plan ``` Routes: - /profile - Main profile view - /profile/edit - Edit profile form Components: - ProfilePage - ProfileHeader - ActivityFeed - ActivityItem - ProfileEditForm - ImageUploader - FormFields ... ``` ### 3. File Skeleton (Example for ProfileHeader.tsx) ```tsx /** * @component ProfileHeader * @description Displays the user's profile header with avatar, name, and key information * * Requirements: * - Display user avatar with fallback for missing images * - Show user name, handle, and join date * - Display edit button only if user is viewing their own profile * - Show verified badge if account is verified * - Handle loading and error states * ... */ ``` ### 4. Implementation Guide (Excerpt) ``` Implementation Order: 1. Types and API functions 2. Hooks for data fetching 3. Base components (ProfileHeader, ActivityItem) 4. Container components (ProfilePage, ActivityFeed) 5. Form components Do NOT: - Make direct API calls from components - use the defined hooks - Store sensitive user data in localStorage - Use inline styles except for dynamically calculated values - Implement custom form validation - use the specified validation library ... ``` ## 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 By following this standardized feature building process, we ensure that features are implemented consistently, with clear documentation, and according to best practices. ## Getting Started To start building a new feature using this process, use the [Feature Building Template](./FEATURE_BUILDING_TEMPLATE.md) as a starting point. This template provides a structured document that you can fill in with the specific details for your feature.