Merge your first Pull Request - Prepare for the Hacktoberfest 2023
Tags: opensource, beginners, hacktoberfest23
Published: 2023-09-04 17:48:14

## 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](https://card36.vercel.app/) open-source web application. Please have a look at [this](https://card36.vercel.app/) 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](https://github.com/ankur0904/card) URL and click on the Fork button*

![Fork repository image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b534q1hntkp2g6g4un8w.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9japws8arpyhxev87hhy.png)

After then open the terminal and run this command 
```bash
$ git clone https://github.com/<YOUR_USERNAME>/card.git
```

**Note:** *For cloning the repository you must have git installed on your local environment. If not installed, install it from [here](https://git-scm.com/downloads)*.

## 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`)
```bash
$ npm install
```
If you want to start the project you can run this command
```bash
$ npm start
```
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](https://nodejs.org/en/download).*

## Step 5 Make a separate branch and make your changes
To make a separate branch, you can run this command
```bash
$ git branch <BRANCH_NAME>
```
To switch to the new created branch, you can run this command.
```bash
$ git checkout <BRANCH_NAME>
```
> `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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqns9fch3ja6bw66gb8s.png)

The content of `data.js` is like that
```js
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;
```
In this file you will add your code(**Contribution**), you will add a `JSON Object` like this
```js
{name: "", technology: "", lastProject: "", svg: ``},
```
`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](https://icons.getbootstrap.com/). In the filter section type `emoji` and choose your desired emoji and copy the `HTML`. It will look like this
```HTML
<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>
```
**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

```HTML
<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>
```
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 `-`.
``` js
const data = [
  {name: "", technology: "", lastProject: "",svg: ``},
  {name: "", technology: "", lastProject: "",svg: ``},
]

export default data;
```

## 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
```bash
$ git add .
$ git commit -m "YOUR MESSAGE"
```
> You can replace `YOUR MESSAGE` with any relevant message you want.

Time to push the code to your repository. To push run these commands
```bash
$ git push origin <BRANCH_NAME>
```
## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2pikty289g41nezwqwv.png)

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](https://github.com/ankur0904/card) repository and connect with me.


Hire me: ankursingh91002@gmail.com 
            [LinkedIn](https://www.linkedin.com/in/ankur-singh-161458227/)
            [Twitter](https://twitter.com/ankursingh91002)