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:
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:
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:
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:
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:
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.
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:
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:
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:
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:
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)
Thanks for sharing this! I have registered for Hacktoberfest, but wasn't sure where to contribute. This list is a great help!
You are welcome.
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/
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
Some of these are no code @Dea . I would recommend going through the entire list and thank you for these @atapas !
Thank you!
Yes some are!
Thanks for sharing this.
You are most welcome
Amazing content!! Followed on Twitter too! ☺️
Thank you!
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.
No worries, Oscar. Please share the link in the comment too. Mark it for Hacktoberfest.
Thanks For Sharing!
You are most welcome.