Coding Standards

Coding Standards

Repository File Structure

The repository of ClassConnect follows a monorepo structure and is organized to separate concerns and improve maintainability:

• .github/: Contains GitHub-specific configurations such as workflows for continuous integration and templates for issues and pull requests.
• resources/: Houses static assets like images, stylesheets, and fonts. This ensures that all resources are centrally located and easily accessible.
• scripts/: Contains utility scripts for tasks such as setup, deployment, and database migrations. This promotes automation and consistency in these processes.
• src/: The core of the project, divided into:
• backend/: Server-side code, including APIs, database models, and business logic.
• frontend/: Client-side code, including React components, styles, and assets.
• common/: Shared code between the backend and frontend, such as utility functions and constants.
• .gitignore: Specifies files and directories to be ignored by Git, preventing unnecessary files from being tracked.
• CONTRIBUTING.md: Guidelines for contributing to the project.
• README.md: Provides an overview of the project, setup instructions, and usage details.

Conventions and Styles

1. Naming Conventions:

• Classes: Use PascalCase. Each word starts with a capital letter (e.g UserProfile, ClassManager).
• Functions: Use camelCase. The first word starts with a lowercase letter, and each subsequent word starts with a capital letter (e.g., getUsername, calculateScore).
• Variables: Use camelCase similar to functions (e.g., userName, totalCount).
• Constants: Use UPPER_CASE with underscores to separate words (e.g., MAX_USERS, API_ENDPOINT).

2. Indentation:

• Use 2 spaces for each level of indentation. This ensures consistency and readability across different editors and environments.

3. Braces:

• Opening braces { are placed on the same line as the statement (K&R style), with closing braces } aligned with the corresponding opening statement.
• Example:

function exampleFunction() {
  if (condition) {
    // code block
  } else {\
    // code block
   }
}

4. Comments:

• JSDoc: Use JSDoc style comments for documenting functions, methods, and classes. This helps in generating documentation and understanding code functionality. /**

• Calculates the sum of two numbers.
• @param {number} a - The first number.
• @param {number} b - The second number.
• @returns {number} The sum of a and b. */ function add(a, b) { return a + b; }

• Inline Comments: Use single-line comments (//) for brief explanations or to clarify complex logic. let result = calculateResult(); // Compute the result based on the inputs

Linter and Formatting Tools

• ESLint: Ensures code quality and adherence to coding standards.
• Configuration: .eslintrc.json
• Extends recommended settings from popular style guides (e.g., Airbnb, Google).
• Custom rules are defined to enforce specific coding styles and practices relevant to the project.
• Example configuration snippet:

{
  "extends": "eslint:recommended",
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

• Prettier: Automatically formats code to maintain a consistent style across the codebase.
• Configuration: .prettierrc
• Ensures uniform code style, such as indentation, quotes, and line lengths.
• Example configuration snippet:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

• Integration with ESLint: Prettier is integrated with ESLint to run formatting checks as part of the linting process. This is typically done through a pre-commit hook, ensuring that code is formatted before it is committed to the repository.