This is an updated project we created for SheHacksV. (Visit here for the hackathon branch)
Devpost: https://devpost.com/software/frankenmoji
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.
frankenmoji allows users to customize an emoji built from different emoji parts, or create a fully randomized frankenmoji.
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.
frankenmoji allows users to customize an emoji built from different emoji parts, or create a fully randomized frankenmoji.
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 domain has been expired.)
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.
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!
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!
- Added a save button for users to save their frankenmoji forever
- frankenmoji is now deployed using heroku: https://frankenmoji.herokuapp.com/
- Making the design a bit prettier
- Adding more emoji parts for more variety
Clone the repository.
Install the dependencies.
Run the app in the development mode.
Open http://localhost:3000 to view it in the browser.