DEV Community

Cover image for Merge your first Pull Request - Prepare for the Hacktoberfest 2023
Ankur Singh
Ankur Singh

Posted on • Updated on

Merge your first Pull Request - Prepare for the Hacktoberfest 2023

Introduction

Welcome πŸ‘‹ to this blog. What is open-source? Did you hear about open-source and think "Can I contribute?" or thought "Is it difficult to contribute to open source?".
I know only HTML, CSS etc. Can I able to contribute? or I don't have an IT background Can I able to contribute?
If these types of questions come to your mind then this blog is for you 😊.

While reading and following the steps of this blog from beginning to end. I guarantee you will able to make a Pull Request and merge after review in this open-source web application. Please have a look at this web application.

Let's break down the part of contribution into steps:

  1. Fork the repository
  2. Clone the repository to your local system.
  3. Open it in code-editor
  4. Install dependencies(If needed)
  5. Make a separate branch and make your changes there.
  6. Commit and Push your changes to your forked repository.
  7. Make a Pull Request (PR).

Step 1 Fork the repository

To contribute to any open-source project you must make a fork of it. What do you mean by that? Let's understand it. Let's take an example of my repository The whole codebase is hosted in https://github.com/ankur0904/card by URL it is absolutely clear that the card repository belongs to the ankur0904 account. That means you or anyone in the world don't have permission to make changes in the repository.
But contributing to open source means you can contribute to this project. BUT HOW?? The solution is to make a copy of the same codebase with your account. You can do it by simply clicking the Fork button.
Go to this URL and click on the Fork button

Fork repository image

Step 2 Clone the repository to your local system

The next step is to clone the repository to your local environment. For this copy the https URL.

Clone repository

After then open the terminal and run this command

$ git clone https://github.com/<YOUR_USERNAME>/card.git
Enter fullscreen mode Exit fullscreen mode

Note: For cloning the repository you must have git installed on your local environment. If not installed, install it from here.

Step 3 Open it in code-editor

Open the cloned folder into your favourite code editors.

Step 4 Install dependencies

Open the integrated terminal into your code editors and run the following command to install the required dependencies (in this case node_modules)

$ npm install
Enter fullscreen mode Exit fullscreen mode

If you want to start the project you can run this command

$ npm start
Enter fullscreen mode Exit fullscreen mode

Then go to the web browser and open http://localhost:3000.

Note: For installing the dependencies and running the project you must have installed node.js into your local environment if not. Download it from here.

Step 5 Make a separate branch and make your changes

To make a separate branch, you can run this command

$ git branch <BRANCH_NAME>
Enter fullscreen mode Exit fullscreen mode

To switch to the new created branch, you can run this command.

$ git checkout <BRANCH_NAME>
Enter fullscreen mode Exit fullscreen mode

BRANCH_NAME can be anything related to the issue or feature, you are working on or some projects have guidelines for the branch name convention.

Make your changes

On checking the file structure, you will notice there is a file names data.js.

File structure

The content of data.js is like that

const data = [
    {name: "Ankur Singh", technology: "Python, Javascript, C, C++", lastProject: "React.js", svg: `
      <svg xmlns="http://www.w3.org/2000/svg" width="250" fill="currentColor" class="bi bi-emoji-laughing pt-4" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
        <path d="M12.331 9.5a1 1 0 0 1 0 1A4.998 4.998 0 0 1 8 13a4.998 4.998 0 0 1-4.33-2.5A1 1 0 0 1 4.535 9h6.93a1 1 0 0 1 .866.5zM7 6.5c0 .828-.448 0-1 0s-1 .828-1 0S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 0-1 0s-1 .828-1 0S9.448 5 10 5s1 .672 1 1.5z" />
      </svg>
    `,},
]


export default data;
Enter fullscreen mode Exit fullscreen mode

In this file you will add your code(Contribution), you will add a JSON Object like this

{name: "", technology: "", lastProject: "", svg: ``},
Enter fullscreen mode Exit fullscreen mode

name: Write name
technology: Technology name
lastProject: Last project built on
svg: svg element

If you don't want to fill all the field, you can leave it blank by simply adding "-"

You can take the svg element from here. In the filter section type emoji and choose your desired emoji and copy the HTML. It will look like this

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-emoji-wink" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

Note:

  • In the class attribute, we have this bi bi-emoji-wink values, you please πŸ™ add two another class pt-4 and my-svg to this and it'll look like this bi bi-emoji-wink pt-4 my-svg and remove any height and width attributes (if present)
  • Add svg element in the (backtick) only.

Updated HTML element will look like this

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-emoji-wink pt-4 my-svg" viewBox="0 0 16 16">
    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
    <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
  </svg>
Enter fullscreen mode Exit fullscreen mode

Everything till here is done. But let's cross-check. Your data.js folder will look something like that "" is filled with some data or -.

const data = [
  {name: "", technology: "", lastProject: "",svg: ``},
  {name: "", technology: "", lastProject: "",svg: ``},
]

export default data;
Enter fullscreen mode Exit fullscreen mode

Step 6 Commit and Push your changes to your forked repository.

It's time to commit to your changes. You can think of committing as save. Run these commands

$ git add .
$ git commit -m "YOUR MESSAGE"
Enter fullscreen mode Exit fullscreen mode

You can replace YOUR MESSAGE with any relevant message you want.

Time to push the code to your repository. To push run these commands

$ git push origin <BRANCH_NAME>
Enter fullscreen mode Exit fullscreen mode

Step 7 Make a Pull Request

Then go to your profile and switch the branch to the new which is created by you.

branch image

There you see an option of Compare and Pull request Click on it and make a Pull Request.

You can change the title and description. You can write Adds new profile in the title.

Congrats!πŸ₯³πŸ₯³πŸ₯³ You made your first open-source contribution.

I will merge your PR within 24 hours.

You got it 🀩

You have learned how to contribute to open-source projects. Thanks for reading till the end. If you have any feedback, the comment section is yours. If you find this blog useful you can star this repository and connect with me.

Hire me: ankursingh91002@gmail.com
LinkedIn
Twitter

Top comments (6)

Collapse
 
xanderrubio profile image
Alexander Clemens

Well done Ankur! I always appreciate individuals who assist and help others in getting involved in open source. Thanks for sharing!

Collapse
 
ankur0904 profile image
Ankur Singh

Thank you :)

Collapse
 
xanderrubio profile image
Alexander Clemens

My pleasure!

Thread Thread
 
ankur0904 profile image
Ankur Singh

:)

Collapse
 
pradumnasaraf profile image
Pradumna Saraf

Good one, Ankur

Collapse
 
ankur0904 profile image
Ankur Singh

Thank you so much.