TypeScript & React

Casing Rules

Element	Convention	Example
Classes	PascalCase	OrderService, UserRepository
Interfaces	PascalCase	UserProfile, ApiResponse
Type aliases	PascalCase	UserId, OrderStatus
Enums	PascalCase	PaymentMethod, UserRole
Enum members	PascalCase	PaymentMethod.CreditCard
Functions / methods	camelCase	getUserById, processPayment
Variables	camelCase	userCount, isActive
Boolean variables	camelCase with is/has/can prefix	isLoading, hasPermission
Constants	SCREAMING_SNAKE_CASE	MAX_RETRY_COUNT, DEFAULT_TIMEOUT
React components	PascalCase	UserProfile, OrderSummary

File Naming

# Classes and services — match the exported name:
UserService.ts
OrderController.ts
EmailValidator.ts

# React components — PascalCase, or index-based:
UserProfile.tsx
UserProfile/index.tsx

# Tests — mirror the source file:
UserService.test.ts
UserService.integration.test.ts
OrderWorkflow.e2e.test.ts

# Avoid:
userservice.ts       # no casing
orderCtrl.ts         # abbreviation
api.ts               # no qualifier
test_userservice.ts  # wrong convention for this ecosystem

Project Structure

src/
├── components/       # Reusable UI components
│   ├── common/
│   ├── forms/
│   └── layout/
├── services/         # Business logic and API clients
├── types/            # TypeScript type definitions
│   ├── api/
│   └── domain/
├── utils/            # Pure helper functions
└── hooks/            # Custom React hooks