Skip to content

elleizar/frankenmoji

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This is the project we created for SheHacksV. Devpost: https://devpost.com/software/frankenmoji

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.

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

Run it locally!

Clone the repository.

npm install

Install the dependencies.

npm start

Run the app in the development mode.
Open http://localhost:3000 to view it in the browser.

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors