Hacktoberfest 2022: Contributing as A React Developer

Published in

StackAnatomy

6 min readOct 16, 2022

October is here, and Hacktoberfest 2022 has officially begun! Hacktoberfest is an annual month-long celebration of open-source organized by DigitalOcean, Appwrite, and Docker.

Hacktoberfest 2022 marks the 9th edition. During this event, anyone worldwide can get involved by contributing to any open-source project of their choice and earn a limited edition swag after merging four successful pull requests.

It aims to foster the open-source movement and encourage participation.

Hacktoberfest is open to everyone and at Any skill level, whether you are a beginner starting in your tech journey or you are already an expert in your field.

To fully understand why Hacktoberfest exists, we need to get familiar with a term called Open Source.

What is Open Source?

If you have never heard about open source, it is precisely how it sounds. It’s Social Coding. It’s like social media but for Software.

Open source is a term that originally referred to Open Source Software (OSS). Open source software (OSS) is Software that is made accessible for use, modification, and distribution with its original rights. It is software that is distributed with its source code.

The source code of software is the portion that most computer users never see; it’s the code that computer programmers change to determine how a program or application operates.

Programmers with access to the source code can modify a program by adding to it, modifying it, or fixing any problematic sections. OSS frequently comes with a license that enables programmers to adapt the software to their specific needs and regulate how it can be distributed.

Even if you haven’t contributed to open-source projects yet, chances are good that you already use a number of them.

People like you who contribute to them are the sole reason they are available and present.

Here are some well-known examples of Open Source Software:
Mozilla Firefox, VLC Media Player, Linux Kernel, Reactjs Library, Android OS.

Reasons to Contribute to Open Source?

There are plenty of reasons why you should contribute to open-source projects. Some of them are:

Learn new skills and Communicate with others.
Gain Recognition and Leverage Your Career.
Improve existing software.
Gain Real-World experience.
Build your confidence as a developer.
Build your resume or CV.

What’s new this year to Hacktoberfest?

There are some new changes made In Hacktoberfest 2022. This year’s edition focuses on encouraging non-code and low-code contributions. There has been a long-running misconception that open source is only for technical persons (developers) who want to write code. This is false, and Hacktoberfest seeks to change the narrative, placing extra emphasis on them.

Head over here to learn more.

You can sign up anytime between now and October 31st, so you have just over three weeks to participate.

Click this link to the Official Website to get started.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience — start using OpenReplay for free.

Contributing as A React Developer

The React Ecosystem is built on many open-source projects; hence, there are many projects to contribute to. Almost all software/tools we use daily as React Developers are open Sourced projects.

Hacktoberfest is a fantastic way to get involved with the React open-source community and support the projects you use and love.

Finding React projects to work on

Finding a decent repository to contribute to, especially for issues within your area of expertise, is one of the most challenging aspects of open source.

So, here are a few approaches and sources for discovering Open Source projects to participate in:

For Beginners:

GoodFirstIssues.com
GoodFirstIssue.dev
Firstcontributions.github.io

Also, you can check out the GitHub Explore page for various projects.

Using the GitHub Issues Search Filters

We can take it a little step further and directly search for issues we can work on. We would do this using the issues search tab.

Now you can search for React issues using various terms. Such as:

is: You can sort issues by state, such as open/closed and issues/pull requests.

is:open is:issue

label: You can look up issues based on labels like “help wanted”, “frontend”, “hacktoberfest” etc.

label:hacktoberfest label:react

language: Sort the issues based on the language you choose, such as Java, Dart, or javascript.

language:javascript

Hence when we put such a combination into a single search string, we can get the following result.

is:open is:issue label:hacktoberfest language:javascript label:react

To see more filter options to further narrow your search, click here

Some open-source projects you can start contributing to

1. React Play

React-play is an open-source platform that helps you learn ReactJS faster with a hands-on practice model. It is a collection of projects that you can use to learn ReactJS.

Here are some resources to get you started:

2. Novu

Novu is a fully functional real-time notification center for your web and react apps. The only open-source notifications infrastructure that manages multi-channel content, scheduled notifications, digest engine, user preferences, and delivers Email, SMS, Push and Chat notifications using a single API.

Here are some resources to get you started:

3. Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. It was made for UI development, testing, and documentation.

Here are some resources to get you started:

Sentry

Sentry is the Official Sentry SDK for JavaScript. Sentry helps over 3.5M developers and 85K organizations see what matters, solve errors and performance issues quicker, and continuously learn about their application health — from the front to the back.

Here are some resources to get you started:

Refine

According to Official Documentation:

Refine is a React-based framework for the rapid ✨ development of web applications. It eliminates the repetitive tasks demanded by CRUD operations and provides industry-standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.

Some resources to help you get started:
Refine issues.
Refine’s contribution guidelines.

Conclusion

It can be intimidating to submit your first Hacktoberfest contribution. Start by making little but significant adjustments to your favorite project, and then delve deeper.

Resources

Keep Hacking!!

A tip from the editor: Look at our Getting Started With Open Source At Hacktoberfest and What NOT To Do At Hacktoberfest 2022 on how to get started with contributing — and how NOT to!