Skip to content

Contributing to CodeForBC‐Web

Jump to bottom
Correy Lim edited this page Apr 30, 2024 · 2 revisions

Contributing to CodeForBC-Web

Table of Contents

Setting up the Project Locally

Before you start contributing, make sure to set up the project locally. Follow the steps outlined in the Project Setup.

Referencing the Style Guide

Ensure that your contributions adhere to the project's style guide. The style guide details the coding conventions, formatting rules, and best practices to maintain a consistent codebase. Refer to the Coding Style Guide.

Branch Naming Convention

Follow the branch naming convention for clarity:

Feature branches: feature/description

Contributing Process

How to Contribute to an Open Source Project on GitHub

Before Starting to Code

  1. Choose an Issue:
    • Browse the Open Issues section.
    • Choose an issue that aligns with your skills or interests.
    • Assign yourself to the issue to indicate that you're working on it.
    • If you have any questions or need clarification regarding the issue, feel free to ask in the issue thread section.
  2. Project Board
    • Navigate to the project board.
    • Locate the corresponding task card for your feature.
    • Drag the card to the 'In Progress' column to signify that you are actively working on it.

Note: This process helps in keeping the project board up-to-date and provides clear visibility into the status of ongoing tasks.

For OpenBC Team Member

If you are a member of the OpenBC team:

  1. Create a branch for your feature. git checkout -b feature/description
  2. Implement your changes on the branch.
  3. When ready, create a pull request (PR) against the main branch.

For External Contributors

If you are an external contributor:

  1. Fork the repository to your GitHub account.
  2. Clone the forked repository to your local machine.
  3. Create a branch for you feature. git checkout -b feature/description
  4. Implement your changes on the branch.
  5. When ready, create a pull request against the main branch of the original OpenBC-Web repository.

After Creating the Pull Request

  1. Navigate to the project board again.
  2. Locate the corresponding task card for your feature.
  3. Drag the card to the 'In Review'.
  4. Link the pull request you created to the related issue on the task card.

Note: We will review your pull request and either merge it, request changes to it, or close it with an explanation.

Folder Structure

This documentation provides a comprehensive overview of the project's folder structure, explaining the purpose of each directory and highlighting key files within. For general folder structure please refer to Project Info

openbc-web/
|-- .github/
|   |-- workflows/
|   |   |-- nextjs.yml
|   |   |-- pr.yml
|-- .vscode/
|   |-- extensions.json
|   |-- settings.json
|-- public/
|   |-- next.svg
|   |-- vercel.svg
|-- src
|   |-- `__tests__`/
|   |   |-- `__snapshots__`/
|   |   |   |-- header.snapshots.tsx.snap
|   |   |-- github.mapping.test.ts
|   |   |-- header.snapshot.tsx
|   |-- app/
|   |   |--about/
|   |   |   |-- about.page.test.tsx
|   |   |   |-- about.scss
|   |   |   |-- page.tsx
|   |   |--join-us/
|   |   |   |-- join-us.page.test.tsx
|   |   |   |-- join-us.scss
|   |   |   |-- page.tsx
|   |   |--projects/
|   |   |   |-- projects.scss
|   |   |   |-- page.tsx
|   |   |--dataModals/
|   |   |   |-- link.ts
|   |   |   |-- project.ts
|   |   |--favicon.ico
|   |   |--globals.scss
|   |   |--layout.tsx
|   |   |--page.tsx
|   |-- client-services/
|   |   |-- github.client-service.test.tsx
|   |   |-- github.client-service.ts
|   |-- components/
|   |   |--banner/
|   |   |   |-- banner.scss
|   |   |   |-- banner.test.tsx
|   |   |   |-- banner.tsx
|   |   |--footer/
|   |   |   |-- footer.scss
|   |   |   |-- footer.tsx
|   |   |--header/
|   |   |   |-- header.scss
|   |   |   |-- header.test.tsx
|   |   |   |-- header-data.tsx
|   |   |   |-- header.tsx
|   |   |--project/
|   |   |   |-- project.scss
|   |   |   |-- project.tsx
|   |-- enum/
|   |   |-- header-enum.tsx
|   |-- mapper/
|   |   |-- github.mapping.ts
|   |-- utils/
|   |   |--header-map/
|   |   |   |-- header-map.test.tsx
|   |   |   |-- header-map.tsx
|-- eslintrc.cjs
|-- .gitignore
|-- package.json
|-- package-lock.json
|-- jest.config.mjs
|-- CODEOWNERS
|-- .prettierrc
|-- tsconfig.json
|-- next.config.js
|-- README.md

1. .github/

  • Purpose: GitHub-related configurations.
  • Contents:
    • workflows/: GitHub Actions workflows.
      • nextjs.yml: Workflow for Next.js.
      • pr.yml: Pull Request workflow.

2. .vscode/

  • Purpose: Visual Studio Code configurations for consistent development environments.
  • Contents:
    • extensions.json: List of recommended VS Code extensions.
    • settings.json: Project-specific VS Code settings.

3. public/

  • Purpose: Publicly accessible assets used in the application.

4. src/

  • Purpose: Main source code directory.

  • Contents:

    a. __tests__/

    • Purpose: Test files and snapshots for Jest.
    • Contents:
      • __snapshots__/: Jest snapshot files.
        • header.snapshots.tsx.snap: Snapshot file for header component tests.
      • github.mapping.test.ts: Test file for GitHub mapping.
      • header.snapshot.tsx: Snapshot test file for header component.

    b. app/

    • Purpose: Application-specific components and pages.

    • Contents:

      i. about/
      • Purpose: Components and styles related to the About page.
      • Contents:
        • about.page.test.tsx: Test file for the About page.
        • about.scss: Stylesheet for the About page.
        • page.tsx: About page component.
      ii. join-us/
      • Purpose: Components and styles related to the Join Us page.
      • Contents:
        • join-us.page.test.tsx: Test file for the Join Us page.
        • join-us.scss: Stylesheet for the Join Us page.
        • page.tsx: Join Us page component.
      iii. projects/
      • Purpose: Components and styles related to the Projects page.
      • Contents:
        • projects.scss: Stylesheet for the Projects page.
        • page.tsx: Projects page component.
      iv. dataModals/
      • Purpose: Data modals used across the application.
      • Contents:
        • link.ts: Link data modal.
        • project.ts: Project data modal.
      v. favicon.ico
      • Purpose: Favicon for the application.
      vi. globals.scss
      • Purpose: Global styles shared across the application.
      vii. layout.tsx
      • Purpose: Layout component.
      viii. page.tsx
      • Purpose: Base page component.

    c. client-services/

    • Purpose: Client services related to external APIs.
    • Contents:
      • github.client-service.test.tsx: Test file for GitHub client service.
      • github.client-service.ts: GitHub client service.

    d. components/

    • Purpose: Reusable UI components.

    • Contents:

      i. banner/
      • Purpose: Banner component.
      • Contents:
        • banner.scss: Stylesheet for the Banner component.
        • banner.test.tsx: Test file for the Banner component.
        • banner.tsx: Banner component.
      ii. footer/
      • Purpose: Footer component.
      • Contents:
        • footer.scss: Stylesheet for the Footer component.
        • footer.tsx: Footer component.
      iii. header/
      • Purpose: Header components.
      • Contents:
        • header.scss: Stylesheet for the Header components.
        • header.test.tsx: Test file for the Header components.
        • header-data.tsx: Header data.
        • header.tsx: Header component.
      iv. project/
      • Purpose: Project component.
      • Contents:
        • project.scss: Stylesheet for the Project component.
        • project.tsx: Project component.

    e. enum/

    • Purpose: Enumerations used within the application.
    • Contents:
      • header-enum.tsx: Header enumerations.

    f. mapper/

    • Purpose: Mappers for data transformations.
    • Contents:
      • github.mapping.ts: GitHub mapping.

    g. utils/

    • Purpose: Utility functions.

    • Contents:

      i. header-map/
      • Purpose: Header map utility.
      • Contents:
        • header-map.test.tsx: Test file for the Header map utility.
        • header-map.tsx: Header map utility.

5. Configuration Files

  • Purpose: Various configuration files for tools used in the project.
  • Contents:
    • eslintrc.cjs: ESLint configuration.
    • .gitignore: Git ignore file.
    • package.json: Node.js package file.
    • package-lock.json: Package lock file.
    • jest.config.mjs: Jest configuration.
    • CODEOWNERS: Code owners file.
    • .prettierrc: Prettier configuration.
    • tsconfig.json: TypeScript configuration.
    • next.config.js: Next.js configuration.
    • README.md: Project documentation.
Clone this wiki locally