Skip to content

Welcome to Shin wiki!

Sanaz Mahmoudi edited this page Aug 12, 2024 · 8 revisions

Coding Guidelines for Shin-webapp

This section provides essential coding guidelines for all engineers working on this project. Following these guidelines will help maintain consistency and quality across our codebase.

1. Case Sensitivity

We adhere to strict case sensitivity for folder names. For instance, module names start with an uppercase letter (e.g., UserModule), while pages begin with a lowercase letter (e.g., loginPage).

Default vs. Named Exports: Default exports are primarily used when a file contains a single export, such as a component. If multiple exports exist within a file, prefer using named exports to keep the imports clear and explicit.

2. Module Structure

Each module is organized into two main folders: components and containers.

  • The components folder includes reusable, general-purpose components specific to the module.

  • The containers folder houses sections of a page that include logic, API calls, and more complex compositions.

3. Styling Conventions

We use .module.scss files for styling. When importing these styles, always name the import styles.

Use the BEM (Block, Element, Modifier) methodology to apply class names. For example:

className={styles['error__code']}

For more details on BEM, refer to the BEM Naming Convention.

4. Folder Structure

Each folder(module/page) should contain:

  • A main index file. (index.tsx)
  • An index.types file for TypeScript types. (index.types.ts)
  • A [name].module.scss file for styling.
Clone this wiki locally