Help me plan the component architecture for a React application.
App description: [WHAT IT DOES]
Pages/views: [LIST MAIN PAGES]
State management: [CONTEXT / REDUX / ZUSTAND / UNSURE]
API: [REST / GRAPHQL / NONE YET]
Provide:
1. **Component Tree**: Visual hierarchy of all components
2. **Atomic Design**: Organise into atoms, molecules, organisms, templates, pages
3. **State Architecture**: Where to put state (local, context, global store)
4. **Props Design**: Key props for each major component
5. **Custom Hooks**: Hooks to extract for reusable logic
6. **Data Fetching**: Strategy for API calls and caching
7. **File Structure**: Folder organisation convention
8. **Routing Plan**: Route structure and navigation flow
9. **Performance Considerations**: Where to use memo, useMemo, lazy loading
10. **Scalability Notes**: How this architecture handles future growth
Help me plan the component architecture for a React application.
App description: [WHAT IT DOES]
Pages/views: [LIST MAIN PAGES]
State management: [CONTEXT / REDUX / ZUSTAND / UNSURE]
API: [REST / GRAPHQL / NONE YET]
Provide:
1. **Component Tree**: Visual hierarchy of all components
2. **Atomic Design**: Organise into atoms, molecules, organisms, templates, pages
3. **State Architecture**: Where to put state (local, context, global store)
4. **Props Design**: Key props for each major component
5. **Custom Hooks**: Hooks to extract for reusable logic
6. **Data Fetching**: Strategy for API calls and caching
7. **File Structure**: Folder organisation convention
8. **Routing Plan**: Route structure and navigation flow
9. **Performance Considerations**: Where to use memo, useMemo, lazy loading
10. **Scalability Notes**: How this architecture handles future growth
How to use this prompt
Copy the prompt above and paste it into ChatGPT, Claude, Gemini, or any AI assistant. Replace the bracketed placeholders with your specific details.
Leave a Review
Tried this prompt? Let us know how it worked — your reviews help other users find the best prompts.