DEV Community

Cover image for 15 GitHub Repositories to Contribute for Hacktoberfest 2022
Tapas Adhikary
Tapas Adhikary

Posted on • Originally published at blog.greenroots.info

15 GitHub Repositories to Contribute for Hacktoberfest 2022

What is HACKTOBERFEST?

Hacktoberfest 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 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.

If you are new to Open Source, please start with this YouTube Video.

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 logo reactplay / react-play

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

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 logo TryShape / 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, polygonal shapes, export them as SVG, PNG, and even as CSS.

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 logo atapas / webapis-playground

The Web APIs Playground is a project to showcase the JavaScript Web APIs with examples and demonstrations. Client-side JavaScript APIs are here to help with providing wrapper functions for many low-level tasks.

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 logo atapas / markdown-cheatsheet

A single place for all the markdown syntaxes I have learned so far.

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 logo atapas / fork-me

Yeah, right. FORK ME!!! Once you fork me, I help you learn forking.

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 logo atapas / promiviz

Visualize JavaScript Promises on the browser. Visualize the JavaScript Promise APIs and learn. It is a playground to learn about promises faster, ever!

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 logo atapas / shoes

Shoes is an online shoe store built using Gatsby and Strapi

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 logo atapas / notifyme

react-notification-timeline is a react based component helps in managing the notification in time-based manner.

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 logo atapas / nodeX

A collection of examples from Node.js modules.

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 logo atapas / flicks

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

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 logo atapas / gatsby-source-harperdb

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.

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 logo atapas / js-keyevents-demo

Get to know all about the key events just with a keystroke.

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 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 logo atapas / add-copyright

This is a Script to Automate adding the Copyright text to one or more source files Recursively.

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 logo atapas / html-tips-tricks

My Favorite HTML5 Tips and Tricks

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 logo atapas / html-file-upload

Useful HTML file upload tips for web developers

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 πŸš€.




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

Top comments (15)

Collapse
 
sohang3112 profile image
Sohang Chopra

Thanks for sharing this! I have registered for Hacktoberfest, but wasn't sure where to contribute. This list is a great help!

Collapse
 
atapas profile image
Tapas Adhikary

You are welcome.

Collapse
 
camelcaseguy profile image
Shubhendra Singh Chauhan

Hey πŸ‘‹
ToolJet is also participating in Hacktoberfest and we have some exciting swags for all types of contributions. Know more here: blog.tooljet.com/hacktoberfest-2022/

Collapse
 
abbyfot profile image
Dea❀️

Greetings sir
Thank you so much for the information
I wish to find out if there are projects for no code contributions?
If yes, I'll appreciate some recommendations please

Collapse
 
cag07 profile image
Craig Gehrig

Some of these are no code @Dea . I would recommend going through the entire list and thank you for these @atapas !

Collapse
 
atapas profile image
Tapas Adhikary

Thank you!

Collapse
 
atapas profile image
Tapas Adhikary

Yes some are!

Collapse
 
ruthiel profile image
Ruthiel Trevisan

Thanks for sharing this.

Collapse
 
atapas profile image
Tapas Adhikary

You are most welcome

Collapse
 
ashm10 profile image
Asther Marie Moreno

Amazing content!! Followed on Twitter too! ☺️

Collapse
 
atapas profile image
Tapas Adhikary

Thank you!

Collapse
 
cleveroscar profile image
Oscar Ortiz

Awesome post man!

Would you mind if I share one of my projects for this Hacktoberfest?

It's beginner friendly and great for any first time github users.

Collapse
 
atapas profile image
Tapas Adhikary

No worries, Oscar. Please share the link in the comment too. Mark it for Hacktoberfest.

Collapse
 
rohitmore07 profile image
Rohit More

Thanks For Sharing!

Collapse
 
atapas profile image
Tapas Adhikary

You are most welcome.