Code Patterns
101 production-ready code patterns organized into 21 categories. Copy, paste, and ship.
Overview
Each pattern includes:
- Complete, working code examples
- TypeScript types and interfaces
- Best practices and gotchas
- Integration instructions
Pattern Categories
UI Components (13 patterns)
Build polished user interfaces with these battle-tested components.
| Pattern | Description |
|---|---|
| forms | Form handling with react-hook-form and Zod validation |
| modals | Radix Dialog with animations and accessibility |
| tables | Data tables with sorting, filtering, pagination |
| data-tables | TanStack Table with advanced features |
| navigation | Headers, sidebars, breadcrumbs |
| cards | Card layouts and compositions |
| layouts | Page layouts, grids, responsive design |
| tabs | Tab interfaces with Radix |
| file-upload | Drag-and-drop file uploads |
| dropdowns | Dropdown menus, combobox, multi-select |
| tooltips | Tooltips, popovers, hover cards |
| accordions | Collapsible accordion panels |
| command-palette | Command palette with cmdk |
Database (9 patterns)
Database operations, queries, and management.
| Pattern | Description |
|---|---|
| prisma | Prisma client setup and configuration |
| queries | Common query patterns and optimization |
| migrations | Safe migration strategies |
| seeding | Database seeding with realistic data |
| soft-delete | Soft delete implementation |
| multi-tenant | Multi-tenancy patterns |
| full-text-search | PostgreSQL full-text search |
| pooling | Connection pooling for serverless |
| transactions | Transaction handling |
API (9 patterns)
Build robust APIs with these patterns.
| Pattern | Description |
|---|---|
| route-handler | Next.js App Router API routes |
| server-action | Server Actions with useActionState |
| middleware | Request/response middleware |
| error-handling | Consistent error responses |
| pagination | Cursor and offset pagination |
| filtering | Query parameter filtering |
| rate-limiting | Rate limiting with Redis |
| graphql | Apollo Server with DataLoader |
| versioning | API versioning strategies |
Testing (9 patterns)
Comprehensive testing strategies.
| Pattern | Description |
|---|---|
| vitest | Vitest setup and configuration |
| unit | Unit testing best practices |
| component | React component testing |
| e2e | End-to-end with Playwright |
| mocking | Mocking strategies |
| fixtures | Test data fixtures |
| coverage | Code coverage setup |
| snapshots | Snapshot testing |
| integration | Integration testing |
Authentication (6 patterns)
Secure authentication implementations.
| Pattern | Description |
|---|---|
| nextauth | NextAuth.js configuration |
| oauth | OAuth 2.0 flows |
| jwt | JWT handling and validation |
| rbac | Role-based access control |
| mfa | Multi-factor authentication |
| session-management | Session handling |
Security (7 patterns)
Protect your application.
| Pattern | Description |
|---|---|
| validation | Input validation with Zod |
| csrf | CSRF protection |
| headers | Security headers |
| encryption | Data encryption |
| secrets | Secret management |
| rate-limiting | Rate limiting |
| audit-logging | Audit log implementation |
AI/ML (7 patterns)
Integrate AI into your applications.
| Pattern | Description |
|---|---|
| openai | OpenAI API integration |
| embeddings | Vector embeddings |
| rag | Retrieval-augmented generation |
| streaming | Streaming responses |
| agents | AI agent patterns |
| function-calling | Function calling |
| prompt-engineering | Prompt design |
Payments (6 patterns)
Handle payments with Stripe.
| Pattern | Description |
|---|---|
| stripe | Stripe setup and configuration |
| subscriptions | Subscription management |
| webhooks | Webhook handling |
| invoicing | Invoice generation |
| usage-billing | Metered billing |
| checkout | Checkout flows |
Performance (5 patterns)
Optimize your application.
| Pattern | Description |
|---|---|
| caching | Caching strategies |
| lazy-loading | Code splitting and lazy loading |
| optimization | Performance optimization |
| profiling | Performance profiling |
| bundle-analysis | Bundle size analysis |
State Management (4 patterns)
Manage application state.
| Pattern | Description |
|---|---|
| zustand | Zustand store setup |
| react-query | TanStack Query |
| context | React Context patterns |
| url-state | URL state management |
Email (4 patterns)
Send emails effectively.
| Pattern | Description |
|---|---|
| templates | React Email templates |
| transactional | Transactional emails |
| queues | Email queue processing |
| tracking | Email tracking |
Deployment (4 patterns)
Deploy with confidence.
| Pattern | Description |
|---|---|
| docker | Docker configuration |
| ci-cd | CI/CD pipelines |
| environments | Environment management |
| monitoring | Application monitoring |
Utilities (4 patterns)
Common utility patterns.
| Pattern | Description |
|---|---|
| dates | Date handling with date-fns |
| formatting | Number and text formatting |
| validation | Validation utilities |
| errors | Error handling utilities |
Additional Categories
| Category | Count | Patterns |
|---|---|---|
| Search | 2 | full-text, algolia |
| Realtime | 2 | websockets, sse |
| Notifications | 2 | push, in-app |
| Files | 2 | upload, s3 |
| SEO | 1 | meta-tags |
| Logging | 1 | structured |
| i18n | 1 | translations |
| Analytics | 1 | tracking |
Using Patterns
Via CLI
Loading code block...
Via MCP
Your AI assistant can access patterns directly:
"Use the JWT authentication pattern from Bootspring"
"Show me the Stripe subscriptions pattern"
"Apply the rate limiting pattern to my API"
Pattern Structure
Each pattern follows this structure:
Loading code block...
Contributing Patterns
We welcome contributions! See our contribution guide for details on submitting new patterns.