Aan Patel: I was watching this YouTube video one day. Try opening it. Notice something peculiar? Yes, the comments are disabled. Being a frequent visitor of YouTube, I find comments to be one of the top places to entertain myself. On any video with more than a certain views, we are bound to find carefully crafted jokes that enhance the comic experience and make us roll on the floor laughing. I also found that news channels on YouTube are very polarized, and also often delete comments or disable them, not allowing for complete expression of free speech and discussion.

So I thought, let's do something about this!

What it does

Commently is a chrome extension that provides you a comment section for any webpage you visit in the world, allowing you to engage with like-minded people and have fun like never before.

How we built it

We used an already-existing starter project on GitHub that gave us a boilerplate React-based Chrome extension.

We added Firebase for Web to the project, utilizing Firestore, Firebase Storage, and Firebase Authentication.

For quickly prototyping the UI, we used Semantic-UI for React, which also had a very flexible component ready to go for comments that came in really handy.

Challenges we ran into

Finding how best we can quickly build a Chrome extension without taking a deep dive into the Chrome extension docs - we finally ended up finding the repo for the React-based chrome extension.

Dealing with file uploads with Firebase Storage - I spent the entire night trying to figure out how to make image files upload from an HTML File Input element in React to Firebase Storage. I followed Firebase docs and wrote what was recommended - it didn't work. The files were uploading only the first 9 Bytes and Firebase Storage was considering it an Octet-Stream. Changing the MIME Type did nothing, too. Finally, Nick B Day (midnight volunteer) to the rescue, I got it to work by converting the image to a ArrayBuffer.

Accomplishments that we're proud of

We have built a working Chrome extension ready to go on the Chrome Web Store, with all the features functioning - Sign Up, Login, Edit Profile (change avatar, username), Comment and Logout.

What we learned

There is much that goes into building a simple comments feature!

What's next for Commently

  1. Add 'reply' functionality.
  2. Get a canonical URL to find the page's comment (doable by way of writing a Firebase Cloud Function that parses the webpage the user is on to look for metadata - most news sites and YouTube have metadata that includes a canonical URL).
  3. Add 'report' functionality for reporting any inappropriate comments.
  4. A way to filter and sort the comments (right now we sort by likes, and break ties using timestamp - latest comments appear on top of older ones if they have the same ‘net likes’ (likes - dislikes) count.
  5. Connect with Analytics, and perhaps Monetize - something like Discord Nitro where people can pay for extra additions to make their 'Commently World' even fancier.

Built With

Share this project: