TypeScript/React/Next.js/NestJS project with SOLID principles, strict naming conventions, and performance optimization
Apply these coding standards to a TypeScript project using React, Next.js, and NestJS with strict SOLID principles and naming conventions.
1. **Interfaces**: Always prefix with 'I'
- Example: `IUserProfile`, `IApiResponse`
2. **Enums**: Always prefix with 'E'
- Example: `EUserStatus`, `EPermissionLevel`
3. **Constants**: Define explicit constant objects (no magic strings)
- Example: `const USER_STATUS = { ACTIVE: 'active', INACTIVE: 'inactive' } as const;`
4. **Variables**: Use descriptive names with auxiliary verbs
- Boolean: `isLoading`, `hasPermission`, `canEdit`
- Functions: `getUserProfile`, `validateInput`, `handleSubmit`
Apply all five SOLID principles:
1. **Components**:
- Functional components with arrow functions
- Named exports
- Use React.FC with typed props
```typescript
interface IUserProfileProps {
user: IUser;
onUpdate: (user: IUser) => void;
}
export const UserProfile: React.FC<IUserProfileProps> = ({ user, onUpdate }) => {
// implementation
};
```
2. **Performance Optimization**:
- Use React.memo for expensive renders
- Use useMemo for expensive computations
- Use useCallback for function props
- Implement code splitting with dynamic imports
3. **Custom Hooks**: Extract reusable logic
```typescript
export const useUserProfile = (userId: string) => {
const [profile, setProfile] = useState<IUserProfile | null>(null);
const [isLoading, setIsLoading] = useState(false);
// ... logic
return { profile, isLoading };
};
```
4. **Imports**: Use @/ prefix (no relative paths)
```typescript
import { UserProfile } from '@/components/user/UserProfile';
import { api } from '@/lib/api';
```
1. **RORO Pattern**: Receive Object, Return Object
```typescript
interface ICreateUserParams {
name: string;
email: string;
}
interface ICreateUserResult {
user: IUser;
success: boolean;
}
const createUser = async (params: ICreateUserParams): Promise<ICreateUserResult> => {
// implementation
};
```
2. **Consistent API Response Format**:
```typescript
interface IApiResponse<T> {
success: boolean;
data: T;
message: string;
timestamp: string;
}
```
3. **Input Validation**: Use Zod for all inputs
```typescript
import { z } from 'zod';
const userSchema = z.object({
name: z.string().min(1),
email: z.string().email(),
});
```
Always use try-catch for async operations with consistent error responses:
```typescript
try {
const result = await performOperation();
return {
success: true,
data: result,
message: 'Operation successful',
timestamp: new Date().toISOString(),
};
} catch (error) {
console.error('Operation failed:', error);
return {
success: false,
data: null,
message: error instanceof Error ? error.message : 'Unknown error',
timestamp: new Date().toISOString(),
};
}
```
1. Validate all inputs with proper schemas (Zod)
2. Sanitize data before database operations
3. Use authentication middleware properly
4. Implement proper authorization checks
5. Never trust client-side data
Follow AAA pattern (Arrange, Act, Assert):
```typescript
describe('UserProfile', () => {
it('should display user name', () => {
// Arrange
const mockUser: IUser = { id: '1', name: 'Test User' };
// Act
render(<UserProfile user={mockUser} />);
// Assert
expect(screen.getByText('Test User')).toBeInTheDocument();
});
});
```
```typescript
// ✅ CORRECT: Interfaces with I prefix
interface IUserProfile {
id: string;
name: string;
email: string;
}
// ✅ CORRECT: Enums with E prefix
enum EUserStatus {
ACTIVE = 'active',
INACTIVE = 'inactive',
PENDING = 'pending',
}
// ✅ CORRECT: Constant objects
const USER_STATUS = {
ACTIVE: 'active',
INACTIVE: 'inactive',
PENDING: 'pending',
} as const;
// ✅ CORRECT: Descriptive boolean variables
const isLoading = true;
const hasPermission = false;
const canEdit = user.role === EUserRole.ADMIN;
// ✅ CORRECT: Component with typed props
export const UserCard: React.FC<IUserCardProps> = React.memo(({ user, onEdit }) => {
const [isEditing, setIsEditing] = useState(false);
const handleEdit = useCallback(() => {
setIsEditing(true);
onEdit(user);
}, [user, onEdit]);
return (
<div className="user-card">
<h2>{user.name}</h2>
<button onClick={handleEdit}>Edit</button>
</div>
);
});
// ✅ CORRECT: API handler with validation
export const createUser = async (
params: ICreateUserParams
): Promise<IApiResponse<IUser>> => {
try {
const validatedData = userSchema.parse(params);
const user = await db.users.create(validatedData);
return {
success: true,
data: user,
message: 'User created successfully',
timestamp: new Date().toISOString(),
};
} catch (error) {
return {
success: false,
data: null,
message: 'Failed to create user',
timestamp: new Date().toISOString(),
};
}
};
```
Use this skill for:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/asimplestargazer-ai-project-rules/raw