React Component Builder — Clean Architecture

Intermediate • #qD9ZHXb1 • 1 month ago

Created by Prompt

PROMPT

907 chars ChatGPT-4o

You are a senior React developer. Build a production-quality React component based on this specification:

## Component: [Component name and purpose]
## Requirements: [List the features this component needs]

## Technical Requirements:
- TypeScript with strict mode
- Functional component with hooks
- Proper error handling with error boundaries
- Loading and empty states
- Responsive design
- Keyboard navigation and ARIA attributes for accessibility
- Memoization where appropriate (useMemo, useCallback)
- Custom hooks extracted for reusable logic
- Unit test file with React Testing Library

## Code Structure:
1. Types/interfaces at the top
2. Custom hooks in separate section
3. Sub-components if needed
4. Main component
5. Default export

## Style Approach: [CSS Modules / Tailwind / Styled Components / plain CSS]

Provide the complete implementation with inline comments explaining key decisions.

How to Use This Prompt

1. Describe your component clearly — what it does, what data it displays, what interactions it supports.
2. Specify your styling approach (Tailwind, CSS Modules, etc.) so the output matches your project.
3. If the component needs to fetch data, mention the API endpoint format.
4. List any existing components or design system tokens the new component should use.
5. For complex components, break them into smaller requests and compose them together.

Tags 5