Skip to main content

Naming Conventions

This document outlines the naming conventions used throughout the codebase to maintain consistency and avoid potential issues across different operating systems and environments.

File Naming Conventions​

We use kebab-case for all file and directory names.

// Good examples
user-profile.tsx
auth-context.tsx
api-utils.ts
login-form.tsx

// Bad examples
userProfile.tsx  // camelCase
UserProfile.tsx  // PascalCase
user_profile.tsx // snake_case

Rationale​

Kebab-case is preferred for file naming because:

  1. Cross-platform compatibility: Some operating systems (particularly Windows) are case-insensitive, which can lead to conflicts with camelCase or PascalCase file names.
  2. URL-friendly: Kebab-case translates well to URLs, which is beneficial for web applications.
  3. Readability: Words are clearly separated by hyphens, making them easy to read.

In-Code Naming Conventions​

Within our code files, we follow standard React and JavaScript/TypeScript naming conventions:

Components​

  • PascalCase for React component names and their files

    // Component definition
    export function UserProfile() {
      return <div>User Profile</div>;
    }

Variables and Functions​

  • camelCase for variables, functions, and instance methods

    const userData = { ... };
    function getUserData() { ... }

Constants​

  • UPPER_SNAKE_CASE for constants and static values

    const API_BASE_URL = 'https://api.example.com';
    const MAX_RETRY_ATTEMPTS = 3;

Types and Interfaces​

  • PascalCase for TypeScript types, interfaces, and classes

    interface UserData {
      id: string;
      name: string;
    }

    type AuthState = 'authenticated' | 'unauthenticated' | 'loading';

CSS Classes​

  • kebab-case for CSS class names

    .user-profile-container {
      display: flex;
    }

    .nav-item-active {
      font-weight: bold;
    }

Custom Hooks​

Naming​

  • camelCase with use prefix for hook names

    function useUserData() { ... }
    function useAuthentication() { ... }
    function useWindowSize() { ... }

File Naming​

  • kebab-case for hook files, with use- prefix

    use-user-data.ts
    use-authentication.ts
    use-window-size.ts

Utility Functions​

Naming​

  • camelCase for utility function names

    function formatDate(date) { ... }
    function calculateTotal(items) { ... }
    function validateEmail(email) { ... }

File Naming​

  • kebab-case for utility files, with descriptive names

    date-utils.ts
    string-utils.ts
    validation-utils.ts

Summary​

  • File and directory names: kebab-case
  • React components: PascalCase
  • Variables and functions: camelCase
  • Constants: UPPER_SNAKE_CASE
  • Types and interfaces: PascalCase
  • CSS classes: kebab-case

Following these conventions helps maintain a consistent codebase and avoids potential issues across different environments and operating systems.