Inspiration
In creating this app, I thought a lot about what creativity means to me and aimed to create a project that cracks the surface of fun + exciting and also functional. I've recently started learning how to draw and I wanted to try something new by combining it with code!
What it does
There are three main features in MakeMe: the background face, the overlaid eyes, and the overlaid mouth. Users can cycle through using the buttons to go forward and backward in order to settle on each individual feature and build their perfectly customized avatar icon.
How I built it
Using React's Starter App, custom Javascript components, CSS styling sheets, and a lot of trial and error!
Challenges I ran into
The spacing between faces and features were a bit inconsistent and I had trouble stacking images and cycling through the various features, but these were mitigated with some extra time and research!
Accomplishments that I'm proud of
My first solo submission with custom components (drawings and code!) It has long been a personal goal to build something on my own down to the images and I'm glad I got to stretch some new muscles by learning how to draw and I spend a good part of the early afternoon fine tuning some of the drawing details. All in all, I had a great time and I learned some new things (both about code and about myself!)
What I learned
I learned to start early with the code and fix it as mistakes came up, try different approaches, and reach out to mentors! I also made sure to update friends on progress in order to stay motivated and clean up code frequently, but not focus too much on fashion over function and deter from progress.
What's next for MakeMe: Avatar Generator
Iterating on sizing and spacing and creating consistency between the various faces, eyes, and mouths, including a “Save Avatar as Image” button for users to download their avatars, allowing users to upload their own drawings similar to how I did my own, and including an accessories carousel (hats, sunglasses, flowers, scarves) as another layer!
Log in or sign up for Devpost to join the conversation.