CodeRacer Frontend Development Rules
Comprehensive coding standards and best practices for React/TypeScript development in the CodeRacer project.
Core Technologies
**Language**: TypeScript (strict mode, no `any` types)**Framework**: React 18+ with functional components and hooks**Routing/SSR**: Next.js**Styling**: Tailwind CSS**State Management**: Zustand**HTTP Client**: axios**Testing**: React Testing LibraryCritical Code Style Rules
Function Design
1. **Keep functions under 30 lines** - Break larger functions into smaller, focused units
2. **Use descriptive, action-oriented names**: `validateUserInput`, `handleSubmit`, `fetchUserData`
3. **Single Responsibility**: Each function should do ONE thing well
Variable Naming Standards
**Boolean variables**: Use prefixes `is`, `has`, `can`, `should` (e.g., `isLoading`, `hasPermission`)**Counters**: Use descriptive names (e.g., `retryCount`, `attemptNumber`, `userCount`)**IDs**: Always include type (e.g., `userID`, `matchID`, `sessionID`)**Collections**: Use plural forms (e.g., `users`, `matches`, `sessions`)**Avoid generic names**: Never use `data`, `result`, `temp`, `val`, `obj`**Temporary variables**: Even temporary variables need meaningful names (e.g., `currentUser`, `nextMatch`)Case Conventions
**camelCase**: Variables and functions**PascalCase**: Components and TypeScript types/interfaces**kebab-case**: File names**UPPER_CASE**: ConstantsConstants & Magic Values - MANDATORY
**NO MAGIC NUMBERS OR STRINGS ALLOWED**
Define constants for all numeric values: `const MAX_RETRY_COUNT = 3`Define constants for all string literals: `const STATUS_ACTIVE = 'active'`Use descriptive UPPER_CASE names: `MAX_CONNECTION_RETRIES`, `DEFAULT_SESSION_TIMEOUT`Group related constants in const blocks or objectsMove configuration values to config files**Example:**
```typescript
// ❌ BAD - Magic numbers and strings
if (retryCount > 3) {
throw new Error('failed');
}
// ✅ GOOD - Named constants
const MAX_RETRY_ATTEMPTS = 3;
const ERROR_MESSAGE_FAILED = 'Request failed after maximum retry attempts';
if (retryCount > MAX_RETRY_ATTEMPTS) {
throw new Error(ERROR_MESSAGE_FAILED);
}
// ✅ GOOD - Grouped constants
const API_CONFIG = {
MAX_RETRY_ATTEMPTS: 3,
DEFAULT_TIMEOUT: 30000,
BASE_URL: 'https://api.example.com',
} as const;
```
React Component Patterns
Component Design Principles
**Single Responsibility**: Each component renders ONE thing**Clear Purpose**: Component name indicates what it renders**Small Size**: Break large components into smaller, focused components**Descriptive Props**: Use meaningful prop names with TypeScript interfaces**Self-Documenting**: Code should be readable without excessive commentsBest Practices
Use functional components with hooksDefine TypeScript interfaces for all propsImplement error boundaries where appropriateUse `React.memo` for performance optimization when neededExtract reusable logic into custom hooksPrefer `const` over `let`, never use `var`State Management
Use **Zustand** for global stateKeep component state local when possibleUse proper TypeScript types for all stateImplement immutable state updatesStyling Guidelines
Use **Tailwind CSS** utility classes as primary styling methodCreate reusable component variantsUse CSS modules for complex, custom stylesFollow **mobile-first** responsive design approachAPI Integration
Use **axios** for all HTTP requestsImplement comprehensive error handlingDefine TypeScript interfaces for all API request/response typesHandle loading and error states explicitly in UIWebSocket Handling
Create custom hooks for WebSocket connectionsImplement proper cleanup in `useEffect` hooksHandle connection states properly (connecting, connected, disconnected, error)Use TypeScript for all message typesPerformance Optimization
Use `React.lazy` for code splittingImplement memoization with `React.memo`, `useMemo`, `useCallback`Optimize re-renders by avoiding unnecessary dependency changesUse proper dependency arrays in `useEffect` hooksCode Quality & Linting - MANDATORY
ESLint & Prettier
Follow all ESLint rules from `next/core-web-vitals` and `next/typescript`Use Prettier for consistent code formatting**All code must pass ESLint with zero errors or warnings**Import Ordering
Group imports in this order:
1. React imports
2. Next.js imports
3. Third-party libraries
4. Local/project imports
Production Code Standards
**Remove all `console.log` statements** from production code**Remove all unused variables and imports****No `any` types** - use proper TypeScript typing**Follow Rules of Hooks** - proper dependency arrays required**Use semantic HTML** and proper ARIA attributes for accessibility**Avoid memory leaks** - proper cleanup in effectsTesting Requirements
Write unit tests for all utility functionsTest component **behavior**, not implementation detailsUse **React Testing Library** for component testsMock external dependencies appropriatelySecurity Best Practices
Validate **all user inputs** before processingSanitize data before rendering to prevent XSSUse proper authentication and authorization patternsImplement proper CORS handling for API requestsProject Structure
Organize components by **feature/domain**Use barrel exports (`index.ts` files) for cleaner importsKeep components **small and focused** (under 200 lines)Separate **business logic** from UI/presentation componentsCode Review Checklist
Before submitting code, verify:
[ ] All functions are under 30 lines[ ] Function names clearly describe their purpose[ ] All variables have descriptive names (no `data`, `result`, `temp`)[ ] Boolean variables use proper prefixes (`is`, `has`, `can`, `should`)[ ] **Zero magic numbers** - all numeric values are named constants[ ] **Zero magic strings** - all string literals are named constants[ ] Constants are grouped logically[ ] Component props have TypeScript interfaces[ ] Error handling is implemented[ ] Proper cleanup in `useEffect` hooks[ ] No unnecessary re-renders[ ] **ESLint passes with no errors or warnings**[ ] **No `console.log` statements**[ ] **No unused variables or imports**[ ] **TypeScript strict mode compliance**[ ] **Proper import ordering**[ ] **Accessibility attributes included**[ ] **Performance optimizations applied**Usage
This skill should guide all React/TypeScript development in the CodeRacer frontend. When writing or reviewing code:
1. Start with the Code Review Checklist
2. Verify all critical rules (function size, naming, constants)
3. Ensure TypeScript strict mode compliance
4. Run ESLint and fix all issues before committing
5. Write self-documenting code that follows these patterns
These rules ensure code quality, maintainability, and consistency across the entire codebase.