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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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.

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:

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:

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:

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:

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,

• Follow on Twitter
• Subscribe to YouTube Channel
• Projects on GitHub
• Profile on Showwcase
• Connect on LinkedIn