frankenmoji

• 

  Main page of frankenmoji

• 

  Generator page to create your frankenmoji

• 

  "When you make a clumsy mistake and you go: oop!"

• 

  "When you're so uwu flustered that you need to blow your nose"

• 

  "When you're about to play a prank on somebody but don't want others to tell anybody"

• 

  "When you do something that you weren't supposed to but don't want to let others know"

Inspiration

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 domain.com, with help using surge.sh. This could be found on http://frankenmoji.online/

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 domain.com.

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

• css3
• html5
• javascript
• npm
• paint.net
• react
• surge.sh