StoryBook

next.js logo Typescript

a picture of project landing page

Interactive illustrated storybook app built for the Mintbean.io November 2021 Hiring Hackathon

This app was inspire by mad-libs but instead of filling in words you create your own illustrations for the story and then see the final result at the end. My goal for this hackathon was to work with a UI/UX designer for the first time and improve my React fundamentals both of which I accomplished.


an image of the storybook drawing application use.

One feature I tried to implement but failed to was similar to the fill function from MS paint where you are able to fill in a drawn object with a selected color. My first attempt at this feature used the canvas API .fill() method to add this in. This worked to an extent but only on the current path object and not on any other previously drawn path. One method I used to attempt to solve this was to store drawn paths in an array of an array(tuples) of coordinates and then select them to fill in.

However, I got stuck trying to figure out how to pass those to the .region method as well as how to add id's to the drawn canvas objects. This was 4 days into the hackathon and held me up from making progress on the other parts. I reviewed the requirements again and realized I could fullfill them by only allowing drawing so I made the decision to drop the feature and focus on finishing the app to satisfy the requirements.

My teammate Chris Toribio and I managed to complete the app and received the Mintbean Star Award for our work.

github repo