DEV Community

Cover image for One more PR for Hactoberfest
Hulya
Hulya

Posted on

One more PR for Hactoberfest

Hactoberfest is upon us and it may be hard to find a project to contribute to especially for beginners. I have created a project with React and Docusaurus and looking for new contributors. You can create a PR and get one step closer to finishing your Hactoberfest.

If you are new to Open Source, you can follow along with this guide and create your PR for the project.

You can find the Github link for the project.

How to create a Pull Request for A-Z Coding Resources

In this guide, we will learn how to make a pull request for A-Z Coding Resources. We will make the changes from the command line. But first, let’s make clear the difference between Git and Github.

Git is a version control software and Github is a collaboration platform that uses Git.

Now, we can start contributing to our project by installing Git on our computer.

1. Install Git

  1. First, let's see if you have Git already installed on your computer. Type the command below in Terminal, PowerShell, or any terminal application. If you already have git installed, you can skip the next few steps.

  2. If you don’t have git installed, go to https://git-scm.com/downloads.

  3. Select your operating system and the installer will download.

  4. Open the installer and follow the instructions. It should be fine to select all of the default options.

  5. Restart your terminal, PowerShell, or Git Bash.

  6. Run the git --version command again.

2. Configure Git

We want to configure our local environments so that the correct GitHub account is associated with our commits.

1.On GitHub, find your user name. You can find it by clicking your avatar in the upper right-hand corner. It will say "Signed in as"

2.Return to your command line or terminal. Replace hulyak with your username.

git config --global user.name "hulyak"
Enter fullscreen mode Exit fullscreen mode

3.Use the command below to configure your email address as well.

git config --global user.email "your-email-address"
Enter fullscreen mode Exit fullscreen mode

4.You can use the two commands below to double-check that you've set this up.

git config user.name

git config user.email
Enter fullscreen mode Exit fullscreen mode

3. Fork the Repository

Navigate to the GitHub repo and click Fork in the upper right-hand corner, this will open up a dialog where you can click on your username to fork the repository.

Alt Text

This will create a local copy under your GitHub username. You need to fork the repo into your account because Github doesn't allow pushing code to repositories that you don't own, then you can make all your changes to the copied repository.

4. Clone the Repo

To clone the repository, go to your forked copy of the GitHub repo, and select the green 'Clone or download' menu button, then click on the icon shown in the screenshot to copy the repository URL that you will need to use:

Go to your terminal and navigate to the directory where you want to clone the project.

cd desktop
Enter fullscreen mode Exit fullscreen mode

Then, to clone the remote repository to your computer, execute the git clone command with the link that you just copied:

git clone <github-repo-link>
Enter fullscreen mode Exit fullscreen mode

This will create a new folder with the remote GitHub repository name and download all the project files and repository data into it.

Cd into the folder that was just created.

cd a-to-z-coding-resources
Enter fullscreen mode Exit fullscreen mode

You should this something similar to the screenshot.

5. Check out the Contributing guideline

Before we make any changes in the code, we need to check out the Contributing Guidelines.

If you check out the Readme page, it will redirect you to the CONTRIBUTING.md file. File name is CONTRIBUTING.md.

Or, you can check out the Issues tab, and decide how to contribute to the project.

Adding a New Resource

  • Go to the docs folder and look at the resources.
  • All you need is to add a unique new resource to any of the markdown files. You only need to add one resource for the Pull Request.
  • Go to the end of the page and add a new resource.
  • Image of the resource is not necessary, if you want to add the image of the website, you can first load the image on Dev.to and paste the link from there.
  • You can add a short description after the heading. For the heading use ### for Heading level 3 and make sure it looks good.

If you need help writing markdown files, you can check out this website.

You can checkout this example:

### 1.[Reacti Flux](https://discord.com/invite/reactiflux)

Reacti Flux is the largest community of React developers (110,000+)!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at0opxihu02u0o2xvcq2.png)
Enter fullscreen mode Exit fullscreen mode

Creating A New Resource Page and Adding New Resource

If you cannot find a new resource to add, you can just create a new page and a different category. It can be related to frontend, backend, cloud, blockchain, or mobile development. It can be whatever you want.

For that, create a new markdown file for a new category and add the resource there.

  • create the file name as <category>-<number>.md and add the resource to the file. For example, you can the file as free-websites-1.md. Then, go to the sidebars.js file in the root of the project and add the file name to the list.
module.exports = {
  someSidebar: {
    resources: [
      'free-websites-1',
      'free-media-3',
      'react-5',
      'css-2',
      // 'markdown-features',
      'javascript-4',
      'nextjs-6',
      'job-hunt-8',
      'career-9',
      'computer-science-7',
      // add the new file name
    ],
  },
}
Enter fullscreen mode Exit fullscreen mode
  • MDX file starts with YAML front matter block declared as triple-dashed lines. Declare the title property.
---
title: "Free Images/Videos"
---
Enter fullscreen mode Exit fullscreen mode
  • After the title, add your resource similar to this:
### 1.[Reacti Flux](https://discord.com/invite/reactiflux)

Reacti Flux is the largest community of React developers (110,000+)!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at0opxihu02u0o2xvcq2.png)
Enter fullscreen mode Exit fullscreen mode

6. Pull the recent changes

Before you make any changes, it's good to check if there have been any changes from GitHub down to your local copy  by using the command:

git pull

7. Make Your Changes

Make changes in any of the markdown files under the docs folder.

8. Review Your Changes

Use the git diff command to see the changes you’ve made. This will show your changes with the + sign. To quit the terminal, use the q key.

Run the project.

npm install
npm start
Enter fullscreen mode Exit fullscreen mode

Make sure the page loads without any errors and you have added a new resource.

9. Stage, Commit and Push Your Changes

Next, you want to stage, commit, and push your changes to your fork. Staging means saving your changes so they are ready to be added to your branch.

git add .
git commit -m "type your commit message"
Enter fullscreen mode Exit fullscreen mode
  • m is a flag for the message. That means that whatever comes after -m is a message explaining your commit. Your commit message doesn't have any effect on your code; it's like a comment.
git push
Enter fullscreen mode Exit fullscreen mode

git push adds the changes on your computer to your GitHub repository.

10. Create a Pull Request

Navigate back to the original repo from which you forked, and you will see a prompt to open a new Pull Request from the branch you just pushed to.

Click Compare & pull request, add a description describing the changes you made.

Add a screenshot of the page with the added resource.

To submit your pull request, click the green 'Create pull request' button.

Well done, you have made your pull request! 🎉🎉🎉

11. Wait For Merge and Code Review

The owner of the repo can now review your changes and decide whether to approve and merge, request changes, or decline your pull request.

TIP: If you need to add more changes to this pull request, you don't need to create different pull requests. Just push your new changes to the same fork and it will automatically update the PR.

I hope you liked this guide on how to make a pull request for the project. If you would like to learn more about Open Source, you can check out these resources:

May the FOSS be with you!

Let's connect. You can follow me on Github and Twitter.

Top comments (1)

Collapse
 
wingkwong profile image
wkw

Happy Hacktoberfest! We invite you to contribute NocoDB.

NocoDB is an open source Airtable alternative.

NocoDB works by connecting to any relational database and transforming them into a smart spreadsheet interface! This allows you to build no-code applications collaboratively with teams. NocoDB currently works with MySQL, PostgreSQL, Microsoft SQL Server, SQLite, Amazon Aurora & MariaDB databases.

Also NocoDB's app store allows you to build business workflows on views with combination of Slack, Microsoft Teams, Discord, Twilio, Whatsapp, Email & any 3rd party APIs too. Plus NocoDB provides programmatic access to APIs so that you can build integrations with Zapier / Integromat and custom applications too.

GitHub logo nocodb / nocodb

🔥 🔥 The Open Source Airtable alternative - Powered by Vue.js 🚀 🚀

NocoDB
The Open Source Airtable Alternative

Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet

Build Status Node version Twitter

WebsiteDiscordTwitter

OpenSourceAirtableAlternative

NocoDB - The Open Source Airtable alternative | Product Hunt

Quick try

1-Click Deploy

Heroku


Deploy NocoDB to Heroku with 1-Click


Using Docker

docker run -d --name nocodb -p 8080:8080 nocodb/nocodb:latest
Enter fullscreen mode Exit fullscreen mode

To persist data you can mount volume at /usr/app/data/.

Using Npm

npx create-nocodb-app

Using Git

git clone https://github.com/nocodb/nocodb-seed
cd nocodb-seed
npm install
npm start

GUI

Access Dashboard using : localhost:8080/dashboard

Join Our Community


Screenshots

2

1

7

5

6

3

4

11

10

8

9

Features

Rich Spreadsheet Interface

  •  Search, sort, filter, hide columns with uber ease
  •  Create Views : Grid, Gallery, Kanban, Gantt, Form
  •  Share Views : public & password protected
  •  Personal & locked Views
  •  Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
  •  Roles : Owner, Creator, Editor, Viewer, Commenter, Custom Roles.
  •  Access Control : Fine-grained access control even at database, table & column level.

App