getScript('Or Die Tryin')

Contributing to Open Source Starter Guide

October 04, 2021

round brass-colored compass on map
Photographer: Denise Jans

Contributing to open source is an exciting endeavor that is packed with benefits for yourself and the community. Open-source projects allow anyone to utilize their skills and talents to improve a project.

For a brief overview of what open source is along with its benefits and how to get started, check out my previous post Contributing to Open Source: Where to Begin in 2021.

If you are ready to contribute to a project but don’t know where to begin, I’ve created the site Open Source Devs specifically to encourage newcomers to contribute to open source. This guide will walk you through making a change to the code for your dev info to be featured on the site. If you are not intending on contributing to this project, the process will be the similar for whichever project you chose.

How to Find an Open Source Project

Although you can browse GitHub and check the licenses of projects to learn about the project’s contribution guidelines, a quick way to find open source projects is to search GitHub for the #hacktoberfest topic.

GitHub #Hacktoberfest Topics page
GitHub Hacktoberfest topic

This guide will utilize the Open Source Devs project to explain the contribution process. If you would like to have a dev card featured on the site, follow the steps below!

How to Run a Project Locally

In this guide, I’ll be demonstrating how to make contributions using GitHub and git in the terminal, but GitHub also provides GitHub Desktop which allows you to make contributions without needing to use git or the terminal. Be sure to create a GitHub account so you can follow along.

  1. Fork the project - To access Open Source Devs in your local environment, navigate to the Open Source Devs GitHub repository and click the Fork button (usually found in the top-right section of the page). Forking a project adds a copy of the project to your GitHub repositories.
OpenSourceDevs repository on GitHub
Open Source Devs GitHub repo

If you have more than one GitHub account or organization, choose which one you want to add this project to.

Fork OpenSourceDevs modal
GitHub fork options

After selecting an account, GitHub will begin the forking process (which should only take a few seconds).

Forking MightyJoeW\OpenSourceDevs GitHub spinner
GitHub's forking animation
Forked OpenSourceDevs repository
Successfully forked project
  1. Clone the project - Next, you need to clone the project to your computer. Click the green Code button and copy the url from the field (
GitHub's Clone GUI
GitHub's clone feature

If you decide to use git to handle your contributions locally instead of GitHub Desktop, open your terminal (command line in Windows) and copy the following command to clone the project: git clone

Terminal view of cloning a project
Terminal view of cloning a project
  1. Move into the folder - Now that the project has been downloaded to your computer, you’ll need to move into that folder. Use the following command to change directories into the OpenSourceDevs directory: cd OpenSourceDevs
Terminal view of changing directories
Terminal view of changing directories
  1. Install the project’s dependencies - Now that you are in the OpenSourceDevs folder, you need to install the project’s dependencies with the following command: yarn (if you prefer installing with npm, use npm install)
Terminal view of installing a project's dependencies
Terminal view of installing a project's dependencies
  1. Run the project - Finally, to run the project to see it in your browser, use the following command: yarn start (or npm start if you installed with npm).
Terminal view of running the project
Terminal view of running the project

This project will run in your browser at http://localhost:3000/.

Different projects may have different scripts to run the project, so check the project’s package.json file and look in the scripts object to find the correct start command.

You should see a grid of cards with developer names and links. For this contribution, you will edit a JavaScript object to create a card featuring your GitHub profile info (along with links to your LinkedIn and website if desired).

Open Source Devs UI
Open Source Devs UI

How to Edit the Code Locally

  1. Create a new branch - Now that you’ve got the project running, you need to create your own branch to work on. You are currently on the main branch which is a protected branch in this project. The code from the main branch is what appears on, so contributors are not allowed to push directly to it.

To create a new branch, enter the following command into the terminal: git checkout -b 'name-of-branch' i.e. git checkout mightyjoew-bio

Terminal view of creating a branch
Terminal view of creating a branch
  1. Add your card info - In the projects files, navigate to src -> components -> dev-grid-utils.js (this is where you’ll add your info to an object). If there are no remaining default objects, copy and paste the final object and replace the values with your own details.
JavaScript file
dev-grid-utils.js file for adding new card
  1. Stage your changes Staging your changes essentially determines which files you want to be included in your change. When finished editing your card object, stage your change with the following command: git add .

The period is included as this tells git to stage all of the files you edited.

Terminal view of staging changes
Terminal view of staging changes
  1. Commit your changes - Changes need to be commited with a message before pushing back up to GitHub, so create a commit message using the following command structure: git commit -m "feat: description of change"

    i.e. git commit -m "feat: mightyjoew bio details"

Terminal view of committing changes
Terminal view of committing changes
  1. Push your changes to GitHub - Push your changes up to GitHub with the following command: git push origin name-of-branch

i.e. git push origin mightyjoew-bio

Termina view of pushing changes with git push
Terminal view of pushing changes with git push

How to Create a Pull Request

  1. Create a pull request - In GitHub, you’ll need to create a pull request. A pull request is a request for your change to be added to the original project.

When you go to your forked version of OpenSourceDevs on GitHub, you should see a banner at the top with a green button that says Compare & pull request. Clicking on this button will begin the pull request process.

Compare & pull request button in GitHub
Creating a pull request in GitHub

If you do not see this banner, click on the Pull requests tab and click on the green New pull request button (be sure to change the compare branch to your branch name to point to base: main).

  1. Provide details about your changes - Give your pull request a title and add a description of what the change is. If you want this to count towards the #hacktoberfest challenge, click the gear icon next to Labels to add the hacktoberfest label (if you’re unable to edit Labels, I’ll add it for you). #hacktoberfest pull requests only count towards the challenge in October.
Pull request title and details
Adding pull request details
  1. Submit the pull request - Click the green Create pull request button.

At this point, the project maintainer will review your pull request. If everything looks good, the maintainer will approve and merge your code. If the maintainer has any feedback, they’ll leave a comment on your pull request which you can respond to. If a code change is needed, you can go through the process above to make the change locally and push it to your branch again.

Lastly, your branch may have merge conflicts if you and another dev made changes in the same block of code in a file. In this scenario, the conflict needs to be resolved. If your branch has conflicts, you can use the web editor or command-line options under This branch has conflicts that must be resolved to resolve the conflicts.

GitHub pull request with conflicts
Pull request with conflicts

Congratulations! You are now an open-source contributor 🎉

If you got stuck anywhere in the process or want to celebrate submitting a pull request, reach out to me on LinkedIn or leave a comment below. Also, I recommend plugging into the #hacktoberfest community on for additional help and support.

Personal blog by Joe Warren.
Career Tips and Insight For Software Developers