Codetribute is a site that guides contributors to their first contribution. It helps new contributors find a project they want to work with, learn about that project, and then find a task that is suitable to their skills and interests and not already assigned to someone else.
- Node version v16.18.1
First, fork this repository to another GitHub account (your account). Then you can clone and install:
git clone https://github.com/<YOUR_ACCOUNT>/codetribute.git cd codetribute yarn
Codetribute relies on two servers, namely, GitHub’s GraphQL API v4 (managed by GitHub) and bugzilla-graphql-gateway. The latter is required to perform queries to the Bugzilla API. For a local setup, clone the repo and follow the instruction for starting it prior to launching this application. You will need to launch the bugzilla-graphql-gateway in a terminal instance separate from this application in order to run both simultaneously.
To get started with local development, create a file in the root of the repo named
.env with the following content. You can also set the variables in your shell environment.
GITHUB_PERSONAL_API_TOKEN=<your_github_api_token> BUGZILLA_ENDPOINT=http://localhost:3090 PORT=5000
Generate a GitHub personal access token here. When prompted about scopes, access to public repositories is the only one required.
src/: source code
src/App: top-level component
src/components: generic components that can be used in any view (not view-specific)
Tasks and Configuration
Building this project uses Neutrino, neutrino-preset-mozilla-frontend-infra
Install npm dependencies and start it up:
This will start a local development server on port 5000 (http://localhost:5000).
Additionally if you wish to query the Bugzilla GraphQL API locally instead of the production instance, you'll need to clone and run mozilla-frontend-infra/bugzilla-graphql-gateway.
Adding a project
Codetribute can read from both GitHub and Bugzilla. Regarding the latter, bugs with the
good-first-bug keyword and mentored bugs will appear in the list.
To add a new entry to the site, create a file
src/data using the template example as the initial setup.
For inspiration, check out the Taskcluster yaml file.
name: <Project Name> summary: A short summary of the project icon: An icon from https://materialdesignicons.com/ introduction: | ## About <Project Name> <A short summary to capture the curiosity of interested contributors> ## Who Works on <Project Name>? <Give a contributor an idea of what kind of people they'll meet> ## How Do I Get Started? <General advice - tutorials to learn about the project, development setup, repo to clone if there is only one> ### How Do I Write the Code? <Summary of the development and patch-submission process -- pull requests? patches on bugzilla? tests?> ## How Do I Get Help? <Suggestions for how, and when, to ask for help -- mailing lists, irc channels, bug or issue comments, etc.> products: - <Bugzilla Product> - <Bugzilla Product>: ['<Bugzilla Component 1>', '<Bugzilla Component 2>'] # to include multiple products or components under a single label in the "Projects" menu, or customize the label: - label: <Project Label shown in the dropdown, to change/group the label from the default value which is the component name> products: - <Bugzilla Product> - <Bugzilla Product>: ['<Bugzilla Component 1>', '<Bugzilla Component 2>'] repositories: - <Organization Name>/<Repository Name> : <Github Label> - <Organization Name>/<Repository Name> : ['<Github Label 1>', '<Github Label 2>']
introduction fields are to be rendered as markdown, allowing for bullet points, links and other simple formatting.
Each project should have an icon associated to it to be displayed on the home page. To pick an icon, you could either:
- Include an icon in
src/images/projectIcons. The icon should have the same name as its configuration file and have the image extension set as
- Pick an icon from materialdesignicons and include its name in the
iconfield of the yaml file.
Below is information about how to get a bug or issue appear on the site.
Codetribute will read the
repositories field from the yaml file and will take extract the issues that match the repository labels.
Example: Display servo issues tagged with the label E-easy
repositories: - servo/servo: E-easy
Example: Display telemetry-dashboard issues tagged with either the mentored or good first issue label
repositories: - mozilla/telemetry-dashboard: ['mentored', 'good first issue']
/languages/:language route, we get issues from repositories whose primary language is the language selected & tagged with labels specified in yaml files
or any issues across Github repositories with the language lowercased as the label (e.g.,
Codetribute will read the
products field from the yaml file and will extract bugs with keyword
good-first-bug. Here are some ways to display bugs on the site.
Example: Display all Taskcluster bugs with keyword good-first-bug
products: - Taskcluster
Example: Display Taskcluster bugs that are under either the Tools component or the Queue component with keyword good-first-bug
products: - Taskcluster: ['Tools', 'Queue']
This project welcomes contributors. If you are interested, please feel free to join the mailing list