| name | frontend-feature-implementation |
| description | Best practices for implementing features. Use when building pages, wiring API integrations, or assembling organisms. |
Frontend Feature Implementation Patterns
Role & Responsibilities
The Product Developer assembles the application using the blueprint (FTS) and parts (Design System).
- Input: FTS and Component Library.
- Output: Working features in
src/pages and src/components/organisms.
- Goal: Deliver functional user value.
Page Assembly
- Layout: Use
src/templates/AppLayout.tsx for consistent page structure.
- Loading States: Handle loading states from TanStack Query gracefully (skeletons or spinners).
- Error States: Display user-friendly error messages when API calls fail.
Forms (React Hook Form)
- Validation: Use Zod schemas to define validation rules.
- Integration: Connect forms to
useMutation hooks.
- UX: Disable submit buttons while
isPending is true.
API Integration
- Client: Use functions from
src/api/client.ts.
- Hooks: Create custom hooks for reusable data logic (e.g.,
useVenue(id)).
- Mapbox: When using maps, handle the
onLoad event and ensure markers are cleaned up.
Testability
- Data Attributes: Add
data-testid="feature-name" to key interactive elements.
- Accessibility: Ensure form fields have associated labels.
