15 GitHub Repositories to Contribute for Hacktoberfest 2022
Tags: opensource, hacktoberfest, webdev, beginners
Published: 2022-10-07 09:31:30

## What is HACKTOBERFEST?
[Hacktoberfest](https://hacktoberfest.com/) is a yearly festival celebrating Open Source. It's done in October, and its primary goal is to encourage people worldwide to participate actively and contribute to Open Source Projects hosted across GitHub and GitLab.

To get started, [you must register](https://hacktoberfest.com/auth/) between September 26 and October 31 and find a project that suits your skill, labelled with the "hacktoberfest" label. 

Hacktoberfest is not only about the code. Non-code and low-code contributions are also accepted in the event. You can read more about these contributions [here](https://hacktoberfest.com/about/#low-or-non-code).

If you are new to `Open Source`, please start with this [YouTube Video](https://www.youtube.com/watch?v=MTXFOOnJgUA&t=158s).

## 15 GitHub Repositories to Contribute
I've been contributing to and maintaining several `open source` projects for a few years. These projects fall into the category of education, productivity, tools, or just a fun app! Many of these projects are getting contributions from people across the globe to make them better.

In `HACKTOBERFEST 2022`, if you want to contribute to projects in JavaScript, HTML, CSS, React, Next.js, Node.js, and other web development technologies, you must look into them. As the Open Source is not only about the source code contributions, each of these projects also accepts low-code and no-code contributions.

Another add-on is when you contribute to any of these repositories and want to get help, I can mentor you as much as possible. So why wait? Let's explore the repositories.

### 1. ReactPlay
`ReactPlay` 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. Apart from the core platform, you can contribute to other projects like `activities`, `docs`, and `blog`.

**Technology Areas**:

- ReactJS
- Next.js
- Tailwind CSS
- Plain CSS
- Sass
- GitHub Actions
- GraphQL
- Nhost
- Cypress

**Contribution Areas**:

- Features and Bugfixes
- Writing End-to-End tests
- Writing Blog articles
- Participating in Hackathon
- Help in Community Building
- Creating Plays
- Documentation

**Repository**:

{% github reactplay/react-play no-readme %}

### 2. TryShape
`TryShape` is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, and polygonal shapes and export them as SVG, PNG, and even CSS.

**Technology Areas**:

- Next.js
- Styled Components
- CSS Clip-Path

**Contribution Areas**:

- Features and Bugfixes
- Writing Blog articles
- Documentation

**Repository**:

{% github TryShape/tryshape no-readme %}

### 3. Web APIS Playground
The `Web APIs Playground` project showcases JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs are here to help with providing wrapper functions for many low-level tasks.

**Technology Areas**:

- Next.js
- JavaScript Web APIs
- TypeScript
- Tailwind CSS

**Contribution Areas**:

- Features and Bugfixes
- Writing Blog articles
- Documentation
- Adding new Web APIs demonstrations

**Repository**:

{% github atapas/webapis-playground no-readme %}

### 4. Markdown Cheatsheet
It is a single place for all the markdown syntaxes I have learned so far, and the great news is you can add to it.

**Technology Areas**:

- Markdown

**Contribution Areas**:

- Adding more markdown syntaxes

**Repository**:

{% github atapas/markdown-cheatsheet no-readme %}

### 5. Fork Me

Yeah, right. FORK ME!!! Once you fork it, It helps you learn to fork. Many beginners to open source struggle with how forking and merging work! You should have ideas about the UPSTREAM repository, FORKED repository, fetching, and merging. The fork-me repo aims to do that.

**Technology Areas**:

- Markdown
- GitHub Fork

**Contribution Areas**:

- Create a fork and learn from there.

**Repository**:

{% github atapas/fork-me no-readme %}

### 6. Promiviz

Do you find it hard to visualize how JavaScript promises work? Here is a tool to visualize JavaScript Promises on the browser. You can visualize the JavaScript Promise APIs and learn. It is a playground to learn about promises faster than ever!

**Technology Areas**:

- Plain JavaScript
- Plain CSS
- HTML

**Contribution Areas**:

- Add feature requests and implement.
- Fix bugs.
- Improve documentation.
- Create Content

**Repository**:

{% github atapas/promiviz no-readme %}

### 7. Shoes

`shoes` is an online e-commerce shoe store built using Gatsby and Strapi. It is an Open Source project built to learn how to use Gatsby and Strapi to build a static e-commerce site.

**Technology Areas**:

- Gatsby
- Strapi
- ReactJS
- GraphQL

**Contribution Areas**:

- Add feature requests and implement.
- Fix bugs.
- Deploy the site publicly.
- Create Content

**Repository**:

{% github atapas/shoes no-readme %}

### 8. Notify Me

It is an NPM with ~10K downloads. rIt is a notification timeline built using ReactJS that helps manage the notification in a time-based manner.

**Technology Areas**:
- ReactJS
- Bootstrap
- Sass
- NPM Ecosystem

**Contribution Areas**:

- Fixing customer issues.
- Revamp the look and feel.
- Better customizations.
- Better delivery mechanism(CI/CD).

**Repository**:

{% github atapas/notifyme no-readme %}

### 9. NodeX

`nodeX` is an OpenSource project to capture working code examples for various node.js modules. It is aimed at helping `Node.js` developers with code examples. Please contribute to the project in whatever ways possible.

**Technology Areas**:
- Node.js
- MD/MDX syntax
- NPM Ecosystem
- Website design
- Web application development

**Contribution Areas**:

- Create Node.js example code snippets.
- Documentations
- Create Content.
- Design a Website to show the snippets.
- Implement the website with modern technologies.

**Repository**:

{% github atapas/nodeX no-readme %}

### 10. Flicks

`Flicks` is an Open Source project to showcase the integration between Gatsbyjs and HarperDB. It provides a Gatsby-based user interface pulling data from HarperDB. So you can assume it is a library showing information about my favourite books!

**Technology Areas**:
- GatsbyJS
- HarperDB

**Contribution Areas**:

- Create feature requests.
- Implement features.
- Bug Fixes.
- Content Creation.

**Repository**:

{% github atapas/flicks no-readme %}

### 11. Gatsby HarperDB Source Plugin

It is a `Gatsbyjs` plugin that allows you to use the `HarperDB` as the data source so that a Gatsby project can pull the data at the build time. It will help any Gatsbyjs app to create a prebuilt markup with the data from HarperDB.

**Technology Areas**:
- GatsbyJS
- HarperDB
- Gatsby Plug-in infrastructure.

**Contribution Areas**:

- Create feature requests.
- Implement features.
- Bug Fixes.
- Content Creation.

{% github atapas/gatsby-source-harperdb no-readme %}

### 12. key Events Playground
A playground to get to know all about the key events just with a keystroke!

**Technology Areas**:
- Plain JavaScript
- Jquery
- HTML
- CSS

**Contribution Areas**:

- Create feature requests.
- Implement features.
- Bug Fixes.
- Content Creation.

**Repository**:

{% github atapas/js-keyevents-demo no-readme %}

### 13. Add Copyright
This open source project contains a Script to automate adding the Copyright text to one or more source files Recursively. The copyright text gets added to the top of the source file. Ice on the Cake is it doesn't duplicate the copyright text if it has been added already!

Note: The same tool can be used to add text blocks like License, File level Comments etc. Also, don't miss the [credit](https://github.com/atapas/add-copyright/blob/master/README.md#credit) section to know the source of the idea.

**Technology Areas**:

- Shell Script
- Operating System structure

**Contribution Areas**:

- Create feature requests.
- Implement features.
- Bug Fixes.
- Content Creation.
- Enable running it on multiple operating systems.

**Repository**:

{% github atapas/add-copyright no-readme %}

### 14. HTML Tips and Tricks
`HTML5` is not a new thing. We have used several features since its initial release(October 2014). As part of the #100DaysOfCode initiative, I have taken the time to revisit the feature list again. See what I found? I haven't used a bunch of it!

In this repo, I list down such HTML5 features that I haven't used much but found useful. I have also created a working example flow and hosted it on netlify. It's time you add more to it by contributing to this project.

**Technology Areas**:

- HTML5
- Plain JavaScript
- CSS

**Contribution Areas**:

- Add more examples
- Bug Fixes.
- Content Creation.

**Repository**:

{% github atapas/html-tips-tricks no-readme %}

### 15. HTML File Upload
All useful HTML File Upload Tips for Web Developers in a single place. This repository contains code examples that explain the tips in detail.

**Technology Areas**:

- HTML5
- Plain JavaScript
- CSS

**Contribution Areas**:

- Add more examples
- Bug Fixes.
- Content Creation.

**Repository**:

{% github atapas/html-file-upload no-readme %}

## Conclusion

That's it for now. The primary intention here is to help you with the technologies you aspire to learn. At the same time, you go through the entire lifecycle of the open-source contribution journey. As a maintainer of these projects, it will help a lot to improve them with your contributions. So it is a pure WIN-WIN.

If you found it helpful, please like/share this article so that it reaches others. In case you have any queries, please comment below so that I can respond to you. Let's get started 🚀.

<hr />
Let's connect. I share my learnings on JavaScript, Web Development, Career, and Content on these platforms as well,

- [Follow on Twitter](https://twitter.com/tapasadhikary)
- [Subscribe to YouTube Channel](https://www.youtube.com/tapasadhikary?sub_confirmation=1)
- [Projects on GitHub](https://github.com/atapas)
- [Profile on Showwcase](https://www.showwcase.com/atapas398)
- [Connect on LinkedIn](https://www.linkedin.com/in/tapasadhikary/)