All Standards
This page provides a comprehensive overview of all frontend development standards. Each standard is designed to ensure consistency, quality, and maintainability across all frontend projects.
Quick Navigation
| Category | Standards |
|---|---|
| Architecture | Component Size, Logic in Hooks, TypeScript |
| Data Management | Data Fetching, Backend Integration |
| UI & Design | Styling, Accessibility, Responsive |
| Quality | Error Handling, Performance, Anti-Patterns |
| Workflow | Git Standards, Required Libraries, Feature Flags |
| Code Engineering | Engineering, AI Usage |
| Guidelines | Linting, Naming, URL Sync, i18n, Controlled Components |
Architecture
Component Size & Single Responsibility
Components should remain small, easy to read, and focused on a single purpose. Large components are harder to maintain, test, and extend.
Logic in Hooks
Hooks are the place for business logic, side effects, async tasks, and state derivation. Keeping them small, clear, and single-purpose ensures better readability, testability, and reuse.
Use TypeScript as Intended
TypeScript was created to help developers write safer and more maintainable JavaScript. It enforces static typing, catches errors earlier, improves IDE support, and documents intent directly in code.
Data Management
Data Fetching & State Management
In client components, all data fetching must be done via useQuery from TanStack Query. Direct requests with axios inside client components are prohibited.
Backend Integration Policy
Once the UI Design is ready or agreed upon, "waiting for backend" is not an acceptable excuse. Developers must create mock requests and responses based on the agreed API design.
UI & Design
Styling & Design System
A consistent styling approach across the team is critical for maintainability and scalability. We rely on UI libraries such as Tailwind, Bootstrap, or MUI.
Accessibility
Accessibility is not optional. It ensures that applications are usable by people with disabilities, but it also improves overall usability and SEO.
Responsive Design
All UIs must be fully responsive, covering the entire device range from mobile to desktop. Responsiveness is not optional—it is a core requirement.
Quality
Error, Empty, Loading
Handling all possible states is critical for both user experience and reliability. Every asynchronous flow must clearly define what happens when data is loading, empty, successful, or has failed.
Performance
Performance should be considered from the start. Keep components small, avoid unnecessary re-renders, and load only what is needed.
React Anti-Patterns
Good React code is simple, predictable, and easy to read. Anti-patterns make components fragile, harder to maintain, and confusing for other developers.
Guidelines
Linting Standards
Linting enforces consistency and prevents common mistakes in the codebase. All developers must use the same linting configuration to ensure a unified style across the team.
Naming Conventions
Consistency in naming folders and files is critical for project readability and maintainability. All contributors must follow the same convention defined at the start of the project.
Controlled Components
All forms must use React Hook Form for state management and validation. Form fields must be implemented as reusable, controlled components that integrate seamlessly with React Hook Form's context.
URL-synced UI State
UI components like modals, side views, tabs, and filters must keep their state in sync with the URL's query parameters. This ensures that the application state is shareable, reproducible, and restorable.
Internationalization
Every project must be initialized with localization support, even if it starts with only one language. This ensures that adding new languages later is seamless and does not require refactoring.
Workflow
Git Branching & Commit Standards
A clear Git workflow keeps collaboration predictable and avoids confusion. Branch names and commit messages must be consistent, descriptive, and easy to understand.
Required Libraries
The following libraries are mandatory in the codebase unless there is a strong justification to use alternatives: TanStack React Query, React Hook Form, Zod, Material UI, Tailwind CSS, Day.js, and Material React Table.
Feature Flags
All new features should be thought of as feature flag and if it can be feature flagged or not. A feature flag allows enabling/disabling the feature at runtime without code changes or redeploys.
Code Engineering
Engineering in Frontend
Frontend code should follow proven software engineering principles to stay readable, maintainable, and scalable as the project grows. Two core principles are SOLID and DRY.
AI-Assisted Code Usage
AI tools can speed up development, but they must be used responsibly. AI output is never a substitute for developer understanding or proper review.
Remember: These standards are not optional. They are the foundation of our frontend development practice and should be followed consistently across all projects.