Development Guidance

Coding Standards and Best Practices

General Principles

• Follow SOLID principles for object-oriented design
• Keep functions small and focused on a single responsibility
• Use meaningful variable and function names that clearly describe their purpose
• Write code that is self-documenting whenever possible
• Add comments only for complex algorithms or business rules

Project Structure

• Organize code by feature rather than by type
• Use consistent file naming across the project
• Create small, focused components rather than large monolithic ones
• Separate business logic from UI components

TypeScript Standards

• Use strict type checking
• Define interfaces for all data structures
• Avoid using any type unless absolutely necessary
• Use generics to create reusable components
• Leverage discriminated unions for state management

React Best Practices

• Use functional components with hooks
• Keep component state minimal and focused
• Leverage React's Context API for state that needs to be shared between components
• Use custom hooks to abstract complex logic
• Follow the presentational and container component pattern

Styling Conventions

• Use Tailwind CSS for styling components
• Follow responsive design principles
• Maintain a consistent color scheme using the design tokens
• Use CSS variables for themes and dynamic styling

Testing Strategy

• Write unit tests for all business logic
• Create integration tests for component interactions
• Use snapshot testing sparingly and with purpose
• Mock external dependencies appropriately
• Aim for high test coverage but prioritize critical paths

Security Considerations

• Never hardcode sensitive information, use environment variables
• Validate all user inputs
• Implement proper error handling
• Follow the principle of least privilege
• Keep dependencies updated to avoid security vulnerabilities

Performance Guidelines

• Optimize renders with React.memo, useMemo, and useCallback
• Implement virtualization for long lists
• Use code splitting for large applications
• Optimize images and assets
• Implement proper loading states and lazy loading

Accessibility Standards

• Ensure proper semantic HTML
• Support keyboard navigation
• Use appropriate ARIA attributes
• Maintain sufficient color contrast
• Test with screen readers

Remember: Consistency is key. Follow these guidelines throughout the project to maintain a high-quality, maintainable codebase.