Snowman Stickers

Inspiration

There are many things you can show off as a hacker. Your GitHub, portfolio website, LinkedIn, etc. However, there is one thing that all hackers and hustlers have in common which is having a laptop filled with stickers and #swag. It symbolizes the accomplishments that they have made during their programming journey by participating in hackathons, events and competitions. However, with the COVID situation, the only people appreciating their stickers are themselves and their wall. By moving this concept online, they can proudly share their accomplishments with everyone virtually and even helps recruiters easily identify proactive students.

What it does

Unlock virtual stickers using event codes to add them to your virtual laptop canvas. You can drag them around to rearrange them and save your design with your unique ID. You can use the design on you banners, video call background, or share them around to show off your unique collection.

How we built it

Snowman Stickers is built using HTML5, JavaScript, and jQuery for the frontend with Firebase Hosting and Cloud Firestore as the backend. The main feature uses HTML5's canvas element which can be used to draw images on. This allows us to create an area in the webapp for users to drag their stickers around. When the mouse is held down and moved around, the x and y positions of the sticker is continuously updated and the whole canvas is redrawn to show this change. The sticker data and user data can be saved to and loaded from Cloud Firestore. This includes the source URL for each image and the position on the canvas for each sticker for the user.

Challenges we ran into

There is no z-index property for the canvas element so images are just drawn on top of each other. In order to simulate a z-index so as to allow the current sticker being dragged to be on top of the rest, the sticker is removed from the stickers array and add back onto the end such that it is drawn on top. This also became a problem when loading from Cloud Firestore as we have to draw the stickers back in the same order it was saved but there is no order in the database. Furthermore, the sticker data is loaded asynchronously so we have to use a counter to wait for all of them to be loaded before sorting by the z-index previously saved and then drawing all of the stickers onto the canvas.

We should be able to allow direct downloads of the canvas using toDataUrl however due to CORS issues this function was not completed in the end.

We were also not able to figure out how to rotate each sticker.

Accomplishments that we're proud of

We were able to create a beautiful looking product for an activity (laptop sticker collecting) that we really enjoy.

What we learned

How to create more complex webapps on static hosting.

What's next for Snowman Stickers

We would love to expand the product into real use and be able to partner with events such as hackathons and other competitions to spread the joy of laptop stickers over the internet.