Planning for an Open Source Contribution
Tags: cloud, opensource, javascript, research
Published: 2023-12-12 23:39:15



As I approach the end of the semester, where I started out on my **open source journey**, I started looking for an **interesting** issue for one last contribution before the term concludes.

In this blog, I'll be discussing what issue I chose, why I chose it, and how I **plan** to start working on it.

## Table of Contents
&nbsp;1. [The Notification 🔔](#the-notification)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.1. [The Project](#the-project)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 1.2. [The Issue 🗎](#the-issue-%F0%9F%97%8E)
&nbsp;2. [Motivation 💪](#motivation)
&nbsp;3. [The Plan 🗺️](#the-plan)
&nbsp;4. [Conclusion 📍](#conclusion)

## The Notification 🔔

As I was starting to look for something to work on, I got a **notification** from one of the projects I [worked on](https://github.com/danielmarv/ChatRoom/pull/5) a few weeks ago called [Chatroom](https://github.com/danielmarv/ChatRoom).

I opened the notification and it was the project maintainer asking my help for another [issue](https://github.com/danielmarv/ChatRoom/issues/2) that was open on his repository for a long time. Now even though the project is fairly **young**, and isn't something I am actually looking for my last contribution, I find the issue **really interesting** and don't want to deny the request of maintainer.

### The Project

But before I talk about what the issue actually is, I would like to give a brief overview of what the project is about.
[Chatroom](https://chat-room-dqry.vercel.app/) is an open-source social media application with a **React** frontend and an **Express** backend.

![Chatroom Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkbwrf2sxakcd668zo3k.png)

It looks and feels like many of any other social media application out there, but when you start using it you realize there's a lot of functionalities that have not been implemented and have placeholder UI controls. This makes it a great project for making contributions that have a huge impact on the project, but at the same time your learning is limited compared to working on a large project with a thriving community.

### The Issue 🗎

Now that we know what the project is about, I'll explain what [the issue](https://github.com/danielmarv/ChatRoom/issues/2) is.

Currently, the application stores all its data in [MongoDB](https://www.mongodb.com/cloud/atlas/lp/try4?utm_source=google&utm_campaign=search_pmax_pl_evergreen_atlas_general_prosp_gic-null_amers-ca_ps-all_dv-all_eng_lead&utm_term=&utm_medium=cpc_paid_search&utm_ad=&utm_ad_campaign_id=19979265574&adgroup=&cq_cmp=19979265574&gad_source=1&gclid=CjwKCAiApuCrBhAuEiwA8VJ6JkZLrdrFESkgIq4_Y6WOk58VRENBptimmWtUnPGWv0VV29WbQ3LhPxoCnygQAvD_BwE), which is a good choice for an application like this that demands flexibility.
However the problem is there is no **proper storage** set up to store and manage **image** data. Any images that are uploaded, from **user registration** to **posts** with media are stored in the server's filesystem.

![Sample Images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkztn9rumixsskb2y9wj.png)

This is fine when you're testing your project in a very early stage, but saving images which are basically [blobs]() is not a good idea due to **performance** and **security** reasons.

Which is why the maintainer proposed using [Cloudinary](https://cloudinary.com/ip/gr-sea-gg-brand-home-base?utm_source=google&utm_medium=search&utm_campaign=goog_selfserve_brand_wk22_replicate_core_branded_keyword&utm_term=1329&campaignid=18164753405&adgroupid=144188713167&keyword=cloudinary&device=c&matchtype=e&adposition=&gad_source=1&gclid=CjwKCAiApuCrBhAuEiwA8VJ6Jr9u78wPZJ9DbzCjel0-0ZdtKO0ZzAMIorjATc-ImUwOgAC6SHkamhoC4GsQAvD_BwE), a cloud based image management platform for optimizing, editing, and managing media for applications.

![Cloudinary Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr8x8g7mvpp57t43b8fp.png)

Used by major tech companies and trusted by more than 1 million developers, **Cloudinary** stands out as a really tempting option to use.

![Cloudinary Details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9heeevoeybaqeiuonny0.png)

## Motivation 💪

You might be wondering why I am so interested in working on this issue when there are thousands of more available to work on.
My **motivation** to work on this stems from the fact that I am currently taking a [Cloud](https://www.senecapolytechnic.ca/ce/classes/CCP555.html) class as well, and we recently integrated a very popular cloud storage called [Amazon S3](https://aws.amazon.com/pm/serv-s3/?gclid=CjwKCAiApuCrBhAuEiwA8VJ6Jlqm7GAcPFhePwdaW78Fudtvc7JYEVZBBh8qt5XUp2xoFNJ8VV3tXhoCXcUQAvD_BwE&trk=936e5692-d2c9-4e52-a837-088366a7ac3f&sc_channel=ps&ef_id=CjwKCAiApuCrBhAuEiwA8VJ6Jlqm7GAcPFhePwdaW78Fudtvc7JYEVZBBh8qt5XUp2xoFNJ8VV3tXhoCXcUQAvD_BwE:G:s&s_kwcid=AL!4422!3!536324434071!e!!g!!s3!11346198420!112250793838) with our [microservice](https://aws.amazon.com/microservices/) for [blob](https://cloudsecurityalliance.org/blog/2022/05/04/what-is-a-blob-binary-large-object-can-it-be-tokenized/) **(Binary Large Objects)** data storage.

{% embed https://youtu.be/_I14_sXHO8U %}

Currently we only support storing **text based** data, but in the next couple of weeks, we are expected to support storage of **image data** as well. Since this issue is pretty similar to what I have to do anyway, I would love to explore this area before I have to do something similar for my assignment 😉.

## The Plan 🗺️

Instead of jumping straight into the issue, I have come up with a plan to tackle this one as this one doesn't seem as straight-forward as the other ones.

**1.** I'll start by researching more about how to use [Cloudinary](https://cloudinary.com/ip/gr-sea-gg-brand-home-base?utm_source=google&utm_medium=search&utm_campaign=goog_selfserve_brand_wk22_replicate_core_branded_keyword&utm_term=1329&campaignid=18164753405&adgroupid=144188713167&keyword=cloudinary&device=c&matchtype=e&adposition=&gad_source=1&gclid=CjwKCAiApuCrBhAuEiwA8VJ6Jtk3Hm-ckGUgTEFlvlpuIHXEoz-N-0NTwcJK1kpxBsnm4UqsIWNs9hoC5n0QAvD_BwE) by exploring some examples.
**2.** Next, I'll have to examine the **existing code** in the project to get an idea of how the **image uploads** are being handled in the client application, and what [middlewares](https://expressjs.com/en/guide/writing-middleware.html) are being used in the server to store the uploads.
**3.** Lastly, I'll come up with the easiest way to **Integrate Cloudinary** with the application based on the observations I make in step 2.

## Conclusion 📍

And that is **the plan** I have come up with for my final open source contribution this term.
I'll be following up with **another post** to share my progress and everything goes smoothly as planned.

In the meantime, I'd love to hear about your experiences with open source contributions or any suggestions you might have! Feel free to drop your thoughts in the comments below.

**Stay Tuned** 👀.