CRUD Pattern Reference
Complete reference implementation for Create, Read, Update, Delete interfaces.
THIS IS THE STANDARD. Copy these patterns for any entity in the codebase. The Contact entity demonstrates all CRUD operations with proper validation, navigation, and state management.
Contact List
Table view with search, filter, status badges, and row actions.
Contact Detail
Single entity view with all fields and actions.
Contact Create
Form for creating new entities with validation.
Contact Edit
Form for updating existing entities.
Architecture Notes
Data Layer
Static mock data in lib/crud-pattern/data.ts. Types, helper functions, and status configurations are centralized here.
Form Components
TanStack Form with @stackmates/ui-forms. FormInput and FormSelect handle validation and error display automatically.
UI Components
Button from @stackmates/ui-interactive/atoms. All other UI is vanilla Tailwind for clarity.
Navigation Pattern
List → Detail → Edit → Detail. Create returns to List. URL params for entity IDs: ?id=1
How to Use This Pattern
- Copy
lib/crud-pattern/data.tsand replace Contact with your entity - Copy each page and update imports to your data file
- Update field names, labels, and validation rules
- Replace console.log with actual server actions
- Update navigation links to match your routes