CityCatalyst Coding Standards

To ensure uniformity of our code base the following standards should be applied.

1. Indenting and Formatting:

• Choose an indentation style (e.g., 2 spaces or 4 spaces) and stick with it throughout the project.
• Use consistent line breaks and spacing for improved readability.

2. Naming Conventions:

• Follow consistent naming conventions for variables, functions, classes, and components.
• Use meaningful and descriptive names that convey the purpose and functionality of the code element.
• For TypeScript, consider using camelCase for variables and functions, and PascalCase for classes and components.

3. Type Annotations:

• Make full use of TypeScript's static type system to catch errors early.
• Always annotate function parameters and return types with appropriate type definitions.
• Use interfaces or type aliases for complex data structures.

4. Imports and Exports:

• Use explicit import and export statements for better clarity.
• Organize imports alphabetically and group them by external dependencies, internal modules, and relative imports.

5. Components and Containers:

• Separate your components into presentational (dumb) components and container (smart) components.
• Presentational components focus on rendering UI and receive data via props.
• Container components handle data logic and interact with Redux, state, or context.

6. State Management:

• If using Redux, structure your store with actions, reducers, and selectors.
• Use async actions and middleware for handling asynchronous operations.
• Consider using the Redux Toolkit to simplify store setup and reduce boilerplate.

7. File Structure:

• Organize your files and folders logically to promote easy navigation.
• Group related components, styles, and tests in the same directory.

8. Code Comments:

• Write clear and concise comments explaining complex logic, algorithms, or code decisions.
• Avoid unnecessary comments that simply repeat what the code is doing.

9. Testing:

• Write unit tests and integration tests for your components and functions.
• Use a testing library like Jest along with testing utilities like React Testing Library.

10. Linting and Formatting Tools:

• Use ESLint and Prettier to enforce coding standards and formatting rules.
• Configure them to automatically format code and catch potential issues.

11. Code Reviews:

• Conduct regular code reviews to ensure adherence to coding standards.
• Encourage team members to provide constructive feedback during reviews.

12. Documentation:

• Maintain a README file with project setup instructions, architecture overview, and any other necessary information.
• Document important decisions, libraries used, and any coding guidelines that may not be obvious.