Commit, Push, Merge: GSoC Coding Phase 1
Tags: opensource, career, webdev, typescript
Published: 2021-07-04 08:31:03

> What if I told you that the GSoC Coding Period is not all about coding? Surprised?

[Google Summer of Code](https://summerofcode.withgoogle.com/) is a global student-focused open-source program. I recommend checking out my first blog in this series, if you’re new.

[How I Got Selected into Google Summer of Code](https://dev.to/rohanlekhwani/how-i-got-selected-into-google-summer-of-code-27)

I’m a Google Summer of Code 2021 Student working with [Rocket.Chat](http://rocket.chat/). We’re in the middle of the Phase 1 of the Coding Period.

![GSoC 2021 Timeline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f28ls4q919wev2n2pgv.png)

The Coding Period, and coding in general, does not involve only code. There’s another factor that is super-important. I’ve touched upon this towards the end.

I’ve been making steady progress on my GSoC project - [Poll App Mega Extensions](https://summerofcode.withgoogle.com/projects/#6521788818784256) and am additionally also contributing to [RC4Community](https://github.com/RonLek/RC4Community) — Rocket.Chat’s portal to its community.

### What Features Have I Built into the Poll App?

**Improved Response Visualizations**

The current Poll App has really bland and grayscale response visualizations. There’s no way to know which response is the winner.

The only way to know the total number of votes casted is to manually count them.

![The sad state of the Poll makes me Sad : (](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flm6if06wmnry0xmqayh.png)

The winner response needed to stand-out from the “non-winner” responses. This required rendering the winner response in a different color perhaps.

There’s a tricky use-case here. What if there are multiple winning reponses?
In that case all of them should be rendered with the same color.

Since apps within Rocket.Chat make use of [UIKit](https://developer.rocket.chat/apps-development/uikit) for rendering the frontend. I added a block for dynamically updating the number of total votes casted.

Here’s the Poll App after a facelift (: P)

![The happy state of the Poll makes me Happy : )](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmlbecfpyrnlza0w589l.png)
 
The PR for this feature can be found [here](https://github.com/RocketChat/rocket.chat.app-poll/pull/2).

**Word Cloud Generation**

Texts are okay. Bar graphs are good. Wordclouds are awesome!

What if the Poll App could show a cool word-cloud of all the responses?

Rocket.Chat’s use of UIKit for Apps is a major limitation towards this. **RC-Apps don’t allow you to add an external npm package.** This means we needed to bid adieu to out-of-the-box packages like [d3-cloud](https://github.com/jasondavies/d3-cloud).

Since the only way to attach images to the message posted by a Rocket.Chat App is through an image URL. We needed an API. That’s when I stumbled across [Quickchart](https://quickchart.io/) — an open-source Chart API that can also do word-clouds.

![Wordcloud generated through QuickChart WordCloud API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmrohvtatwwf7u6npwmv.png)

And then there was another problem!

Some organizations host an isolated server of Rocket.Chat. That means no access to public Internet. That means no Quickchart!

Thankfully, my mentor and I had an idea to provide a setting for the Poll App where server administrators could let the Poll App know beforehand whether it could access the Internet. If it could — use Quickhart, if not — generate a poll summary.
 
<img alt="Poll App word cloud feature in action" src="https://miro.medium.com/max/600/1*p-t1oqAFDkTD9W7hVSsHlQ.gif" style="width: 100%"/>

For those who speak code, here are the [issue](https://github.com/RocketChat/rocket.chat.app-poll/issues/3) and [PR](https://github.com/RocketChat/rocket.chat.app-poll/pull/6) corresponding to the word-cloud feature.
 
**Mixed Visibility of Responses**

The Poll App offered only 2 types of poll visibilities — Open and Confidential. Everyone could see who voted what on an open poll. No one could see who voted what on a confidential poll.

There was no middle way where members could see voter identities on some responses and on others they appeared as “Anonymous”.

I built a modal that would open-up only when the poll creator chose mixed visibility.

![The poll creator can choose which options they want to be anonymous.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbgq4hbzj3vyduektlfj.png)

The challenge was remembering which options the user wanted to remain anonymized after submitting this modal.

This was tackled by defining an `anonymousOptions` property within the Poll interface. In cases where open or confidential visibilities polls were created, this would be an empty array. Doing this keeps the anonymous marked options along with the rest of the Poll properties.

![Mixed Visibility feature in Action. English and Spanish were selected as Anonymous.
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfk9eqw8zdiq514u9hbo.png)
 
Here are the [issue](https://github.com/RocketChat/rocket.chat.app-poll/issues/4) and [PR](https://github.com/RocketChat/rocket.chat.app-poll/pull/5) for the Mixed Visibility feature.

### What’s the Super-Important Factor I Talked About?

<img alt="Communication" width="100%" style="width:100%" src="https://media.giphy.com/media/jV4wbvtJxdjnMriYmY/giphy.gif">

Communicating thoroughly with not only your mentor but anyone who can help you! When I was coding the word-cloud feature I even reached out to [Ian Webster](https://twitter.com/iwebst) the creator of Quickchart which saved us from an incorrect architectural move.

This was the third article of my GSoC journey at Rocket.Chat. I’m writing biweekly blogs. Follow my voyage on [DEV](https://dev.to/rohanlekhwani) and [Medium](https://rohanlekhwani.medium.com/about). ⭐

In case you haven’t checked out the previous blog about **How to Ensure a Successful Community Bonding Period**, hit the link below:

[How to Ensure a Successful Community Bonding Period](https://dev.to/rohanlekhwani/google-summer-of-code-how-to-ensure-a-successful-community-bonding-period-2l42)

---

Like what I do? Help me pull my next all-nighter. Consider [buying me a coffee](https://www.buymeacoffee.com/rohanlekhwani).🥤

Rohan Lekhwani is an open source contributor and enthusiast. You can connect with him on [LinkedIn](https://www.linkedin.com/in/rohanlekhwani/), [GitHub](http://github.com/RonLek), [Twitter](https://twitter.com/Rohanlekhwani), and his [website](https://ronlek.github.io/).