Defines frontend environment variables, component design, and data flow patterns. Use when configuring React environment.
TypeScript-based React application implementation. Architecture patterns should be selected according to project requirements and scale.
process.env does not work in browser environments// Build tool environment variables (public values only)
const config = {
apiUrl: import.meta.env.API_URL || 'http://localhost:3000',
appName: import.meta.env.APP_NAME || 'My App'
}
// Does not work in frontend
const apiUrl = process.env.API_URL
.env files in Git (same as backend)Correct Approach for Secrets:
// Security risk: API key exposed in browser
const apiKey = import.meta.env.API_KEY
const response = await fetch(`https://api.example.com/data?key=${apiKey}`)
// Correct: Backend manages secrets, frontend accesses via proxy
const response = await fetch('/api/data') // Backend handles API key authentication
React Component Architecture:
State Management Patterns:
useState for component-specific stateMaintain consistent data flow throughout the React application:
Single Source of Truth: Each piece of state has one authoritative source
Unidirectional Flow: Data flows top-down via props
API Response -> State -> Props -> Render -> UI
User Input -> Event Handler -> State Update -> Re-render
Immutable Updates: Use immutable patterns for state updates
// Immutable state update
setUsers(prev => [...prev, newUser])
// Mutable state update (avoid)
users.push(newUser)
setUsers(users)
unknown) -> Type Guard -> State (Type Guaranteed)// Type-safe data flow
async function fetchUser(id: string): Promise<User> {
const response = await fetch(`/api/users/${id}`)
const data: unknown = await response.json()
if (!isUser(data)) {
throw new Error('Invalid user data')
}
return data // Type guaranteed as User
}
Use the appropriate run command based on the packageManager field in package.json.
test - Run teststest:coverage - Run tests with coveragetest:coverage:fresh - Run tests with coverage (fresh cache)test:safe - Safe test execution (with auto cleanup)cleanup:processes - Cleanup Vitest processesQuality checks are mandatory upon implementation completion:
Phase 1-3: Basic Checks
check - Biome (lint + format)build - TypeScript buildPhase 4-5: Tests and Final Confirmation
test - Test executiontest:coverage:fresh - Coverage measurementcheck:all - Overall integrated check