DEV Community

Cover image for 16 side project GitHub repositories you may find useful
Tapas Adhikary
Tapas Adhikary

Posted on • Updated on • Originally published at blog.greenroots.info

16 side project GitHub repositories you may find useful

A Side Project is something you do aside from your main job to fuel your passion while learning something new. This quote is very close to my heart,

In vain have you acquired knowledge if you have not imparted it to others.

With this in mind, let me share my learning from the side projects accomplished in the year 2020. The primary purpose of this article is to share the GitHub repositories with relevant details. Each of the repositories has a well-explained readme.md file to guide how to use the project.

All these projects are open-source. Feel free to try, fork, contribute, and I hope you find them useful.

1. theme-builder

This project helps you to create a theming system. Build a theme of your choice. You can also switch/test/apply the themes. You can extend the project easily for your need.

🚀 GitHub Repo

GitHub logo atapas / theme-builder

The theming system helps you in building a theme of your choice and apply it to test live. Why wait? Just give it a try.

🥡 What's inside?

2. notifyme

It is a reactjs based component available as a public npm to use. You can manage time-based notifications using it. It is capable of tracking incoming notifications, read/un-read them with many other customizations.

🚀 GitHub Repo

GitHub logo atapas / notifyme

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

🥡 What's inside?

3. demolab

This is a Jamstack application to host all the demos in one place. Just supply the description of it in a .md file and your demo goes live on the site. Please Feel free to contribute ✋ to this project.

🚀 GitHub Repo

GitHub logo atapas / demolab

Demolab is my fantasy project created to understand the power of JAMstack using JavaScript(Reactjs), API(Netlify and Aws) and pre-built Markup(Gatsby).

🥡 What's inside?

4. princess-finder

It is a fun project created for Hashnode's #christmashackathon. A simple web app to recognize the Disney princess with confidence.

🚀 GitHub Repo

GitHub logo atapas / princess-finder

The `princess-finder` is a fun app to use a bit of machine learning in the browser. This app was built as part of the Hashnode's #christmashackathon.

🥡 What's inside?

5. imaginary

It's a project to build a Jamstack image gallery. We learn to handle the media files at the build time.

🚀 GitHub Repo

GitHub logo atapas / imaginary

imaginary is an image gallery built using Gatsby and Cloudinary. Follow this project to know more.

🥡 What's inside?

6. html-tips-tricks

It is a repo to listing down HTML5 features that I haven't used much in the past but find useful now.

🚀 GitHub Repo

GitHub logo atapas / html-tips-tricks

My Favorite HTML5 Tips and Tricks

🥡 What's inside?

  • HTML5.

7. JS-Tips-Tricks

This repo lists the JavaScript tips and tricks I am learning every day!

🚀 GitHub Repo

GitHub logo atapas / js-tips-tricks

List of JavaScript tips and tricks I am learning everyday!

🥡 What's inside?

  • JavaScript.

8. react-add-table-dynamic-row

Adding a row dynamically to a table seems to be a very normal requirement. This repo shows how to do it using Reactjs Hooks.

🚀 GitHub Repo

GitHub logo atapas / react-add-table-dynamic-row

Adding a Table row dynamically using React Hook

🥡 What's inside?

9. shopnote

A Jamstack application helps to create and manage your shopping notes. This project helps you to learn the power of serverless function and graphql.

🚀 GitHub Repo

GitHub logo atapas / shopnote

shopnote is a JAMstack application that helps in creating notes with shopping items. This application is built to showcase the JAMstack concept using Fauna, Netlify Serverless Functions and GatsbyJS.

🥡 What's inside?

10. add-copyright

Have you ever felt a need to automate adding a bunch of text at the top of your source files recursively? This repo contains an automation script to do that.

🚀 GitHub Repo

GitHub logo atapas / add-copyright

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

🥡 What's inside?

  • Shell Script.
  • Automation

11. covid-19

In 2020 we hardly spoke of anything without mentioning COVID. Publicly available COVID data helped to learn about how things are going on around the world. This repo contains code for an app with lots of visualization and details about the pandemic. This app is being used by many in India today.

🚀 GitHub Repo

GitHub logo atapas / covid-19

COVID-19 World is yet another Project to build a Dashboard like app to showcase the data related to the COVID-19(Corona Virus).

🥡 What's inside?

12. i18n-js-npm

This project is to help with externalizing and internationalizing strings of your web app. It is available as a public npm to download and use.

🚀 GitHub Repo

GitHub logo atapas / i18n-js-npm

i18n-web is a simple tool helps in externalizing the strings in a JavaScript based Application such that, Internationalization(i18n) can be achieved easily. It has the additional capability of parameterizing the strings to get the dynamic content Internationalized.

🥡 What's inside?

  • JavaScript.
  • NPM

13. html-file-upload

This repository contains the source code examples of useful HTML File Upload tips for Web Developers.

🚀 GitHub Repo

GitHub logo atapas / html-file-upload

Useful HTML file upload tips for web developers

🥡 What's inside?

  • JavaScript.
  • HTML

14. catstore

A project to show-case how to build a Jamstack e-commerce application.

🚀 GitHub Repo

GitHub logo atapas / catstore

Happy Paws Cat store is a Jamstack application to showcase the integration between Netlify Functions, Stripe, and Gatsby. It does a test checkout and the app is only for learning/demo purposes.

🥡 What's inside?

15. testimonial

A project to build a serverless app with authentication.

🚀 GitHub Repo

GitHub logo atapas / testimonial

Jamstack app using Gatsby, Netlify, and FaunaDB.

🥡 What's inside?

16. learn-css-animation

A repo to document my learning on the CSS animation with plenty of examples.

🚀 GitHub Repo

GitHub logo atapas / learn-css-animation

Learn CSS animation with fun. It is simple, easy to use, and fun to learn.

🥡 What's inside?

  • HTML.
  • CSS


That's all for now. It was a fulfilling 2020 and looking forward to doing more this year. Please let me know if you find this post helpful. If you have any queries, please DM me on Twitter(@tapasadhikary). Also, feel free to follow me on GitHub(atapas) for project updates.

Before we end, I would like to leave you with a few reads on side projects. You may find these motivating. All the best with your upcoming side projects.

Top comments (13)

Collapse
 
michaelcurrin profile image
Michael Currin

I don't if this uses the same tech as your princess project, but it reminds me of this YouTube video
youtu.be/dDIk1Tmnj9A

It covers how to train a ML model in your browser using a webcam and then you can download the model for offline predictions on the frontend.

It uses Tensorflow.js

Collapse
 
atapas profile image
Tapas Adhikary • Edited

Your project looks awesome Mike! You have explained it well in the video.

My Princess project uses the Teachable Machine to train and create the model. Then I use ml5.js to classify and the HTML5 video API to get the stream.

Collapse
 
michaelcurrin profile image
Michael Currin

I'm glad you like it. I just found it looking for tech YouTube videos. I haven't made my own.

Oh right I see ml5 in dependencies.
I want to look into using their flow and your project. I have a project around Thomas the Tank Engine where playing a sound on recognizing an object on cam would be useful.

Thread Thread
 
atapas profile image
Tapas Adhikary

Sure! Thanks.

Collapse
 
razbakov profile image
Aleksey Razbakov

Great initiative!

I invite to join a non-profit organisation to help dancers around the world with github.com/we-dance/foundation

We are bringing experts from different fields to create and support dance infrastructure

Currently I am working on community platform which is similar to dev.to, but with different stack: Firebase, Vuejs (Nuxtjs), Tailwind. I love to code when I have some time after work and my motivation to start was to learn new technologies, but I just didn't want to create another hello-world and to-do list application 😅

During work on that project I tried to write a vue3 library to integrate Firebase to Nuxt, but still struggling with meta tags and some await mechanism - would be glad to dig deeper if someone is interested.

Another artefact of work is command line utility to synchronise google spreadsheet to yml files which I use to collaborate with non-dev translators and editors.

Collapse
 
atapas profile image
Tapas Adhikary

Thanks for sharing. Shall check it out.

Collapse
 
commentme profile image
Unnati Bamania

Amazing list!

Collapse
 
atapas profile image
Tapas Adhikary

Thank you very much, Unnati.

Collapse
 
liyasthomas profile image
Liyas Thomas

If you'd like to contribute to an open source SaaS dev tool, try Hoppscotch - API request builder for web : hoppscotch.io

GitHub logo hoppscotch / hoppscotch

👽 Open source API development ecosystem https://hoppscotch.io

Collapse
 
atapas profile image
Tapas Adhikary

Surely I will. Recently finished writing about it. Shall contribute to code too. 👍

Collapse
 
mwangikibui profile image
mwangiKibui

Thanks for sharing.

Collapse
 
realtoughcandy profile image
RealToughCandy.io

Nice list. The princess-finder was my favorite.

Collapse
 
atapas profile image
Tapas Adhikary

Mine too.. My daughter likes that too 🙂