Instruction file imported from christocdas0/prompt_engineering_workshop (.github/instructions/react_instruction.instructions.md). Copyright stays with the author.

ReactJS Todo App Development Instructions

Instructions for building a modern, scalable, maintainable Todo App using the latest ReactJS best practices (React 18+) and optimized architecture patterns.

Project Context

• React 18+ (functional components + hooks only)
• Vite as primary build tool
• React Query for server-state (if backend sync is used)
• Reusable components and custom hooks for shared logic
• Mobile-first responsive layout
• Local storage or IndexedDB for offline support (optional)

Development Standards

Architecture

• Use functional components with hooks as primary building block
• Organize files by feature
• Separate UI and logic layers
• Implement reusable UI primitives like Button, Input, Modal
• Maintain clean and scalable component hierarchy

Component Design

• Keep components small, reusable, and focused
• Avoid prop drilling via context/hooks
• Maintain accessibility-friendly markup
• Use composition patterns effectively

State Management

• useState for local state
• useReducer for complex flows
• Zustand or Context API for global todo state
• React Query for server sync
• Normalize todos structure

Hooks and Effects

• Follow rules of hooks strictly
• Extract logic to custom hooks
• Use cleanup functions properly
• Use memoization hooks for performance critical areas

Styling

• Prefer TailwindCSS or CSS Modules
• Use responsive design
• Follow a consistent design system

Performance Optimization

• Use React.memo for pure visual components
• Lazy load non-critical pages
• Avoid unnecessary rerenders
• Virtualize long lists

Data Fetching & Persistence

• Use localStorage/IndexedDB for offline apps
• Use React Query for server state
• Implement optimistic updates and proper error handling

Error Handling

• Implement Error Boundaries
• Use meaningful user-facing error messages
• Wrap async calls in try/catch

Forms & Validation

• Use controlled components or react-hook-form
• Validate required fields
• Ensure accessibility for form elements

Routing

• Use React Router
• Implement lazy-loaded routes
• Provide fallback UI for 404

Testing

• Use React Testing Library + vitest
• Test component behavior
• Mock APIs and localStorage
• Add accessibility tests

Security

• Sanitize user input
• Avoid storing sensitive data in localStorage
• Use HTTPS for API calls

Accessibility

• Keyboard-friendly UI
• Proper ARIA attributes
• Semantic HTML
• Color contrast compliance

Implementation Process

1. Setup folder structure
2. Define TS interfaces
3. Implement components
4. Add state management
5. Add persistence/sync
6. Implement routing
7. Add forms and validation
8. Add error handling
9. Add tests
10. Optimize performance
11. Ensure accessibility
12. Add documentation

Additional Guidelines

• Follow React naming conventions
• Use ESLint + Prettier
• Maintain clean imports
• Use meaningful commit messages

Common Patterns

• Custom hooks for CRUD
• Provider pattern for global state
• Presentational UI components
• Optimistic UI updates
• Compound components for advanced UI needs