Awesome Open Source
Awesome Open Source


Welcome to one of THE HEAP's open projects! For the month of May We're building an embeddeable emoji bar. This project aims to be as accessible as possible to people who want to contribute to open source code! We've got a few things to go over, so if you're new to Github, or contributing to open source software, take a breather and then read on! You got this. 👌

Before we get into the project itself, let's get to know our collaborative environment:

  • Most of the activity regarding the project's status happens right here on github, especially on the issues page. Here you can see a roadmap for our project, pick out issues, and keep an eye on conversations.
  • The Heap will also be making videos to document the process (live coding, demonstrations, "office hours" and so on). Subscribe to the Youtube Channel.
  • The Heap has a Twitter account to tweet both about projects and programming (and life, the universe...). Follow us to stay in the loop

For this project, our goal is to create an embeddable emoji bar that users on any website can interact with. This was blatantly inspired by Github issues, and Slack. This is an example image from a Github issue page:

inspriation image

The above is an example of what I call a "reaction bar" — an interactive page element in which users can click on an emoji and increment it's respective counter.

Getting Started

To contribute successfully to this project it might take a bit of time to setup and become aquainted with both the project itself and how you can best add your contributions. The following steps will inform the code you write and help you make good pull requests.

  1. Understanding the project / product
  2. Understanding how to contribute
  3. Read Project Components below, for getting setup.

Project Setup

Snippet :

cd snippet
npm install

To run the snippet and see it working, you'll need to open the example.html page in the build folder to test.


// Todo


// Todo


If you are a bit lost, the following terminology might help to clarify some aspects of the project.

Emoji-bar: A container with emojis (👋) in it, and the corresponding number of time they have been clicked (think, facebook, slack, github isues etc).

Snippet: The embeddable script that allows an end user to add an "emoji bar" to their website

Client : Where a user can go to customize their snippet (the emoji's that show up.)

Api : A wrapper for the database — it allows a user of the emoji bar to store the click count ... somewhere, and then retrieve that amount when desired


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,555,917
Snippets (1,435
Emoji (1,344
Oss (599
Emojis (253
Related Projects