As we were brainstorming for our project, we stumbled upon an emoji that that was put together from other emojis. From there, we thought it would be fun to be able to customize your own frankenmoji, or create a randomized frankenmoji to share to others.

What it does

frankenmoji allows users to customize an emoji built from different emoji parts, or create a fully randomized frankenmoji.

How we built it

We built frankenmoji by starting out with the Create React App. From there, we separated the different parts of an emoji (eyes, mouth, face, accessories) using photo editors. We built it so that it loads a canvas when the user clicks on the generate button on the main page, and provided buttons for users to click to customize their frankenmoji. While buttons for changing specific emoji components go through different parts one by one, the 'randomize' button will select a random combination of parts, creating the ultimate frankenmoji.

We hosted our website using, with help using This could be found on

Challenges we ran into

This is the first React App that we have all collectively made together. With our limited React knowledge (and web dev abilities) we ran into troubles with calling functions across files. We also had never deployed a website before, so we had some trouble hosting our site using

Accomplishments that we're proud of

We have created a frankenmonster that we never knew we needed. To quote: It's alive, it's moving, it's alive, it's alive, it's alive, it's alive, IT'S ALIVE!

What we learned

When working on a project, it's important to have an idea that everybody is on board with. We really had fun working together to make this idea come to life. We also all learned more about React, and also how to deploy a website!

What's next for frankenmoji

  • Adding a save button for users to save their frankenmoji forever
  • Making the design a bit prettier
  • Adding more emoji parts for more variety

Built With

Share this project: