storytime

storytime is an interactive writing prompt tool for the creation of online 'picture books'. It makes use of the publicly available Google Quick, Draw! data.

Upon click of a button, a random image is served as an SVG, allowing vector-based manipulation of scale and aspect. The aim is to add as few or as many of these images as is desired, in order to provide a creative writing prompt. The copy text can be entered at the bottom of the screen.

The app supports stories with multiple pages, and user creation and login to save and retrieve stories from the database.

In order to reduce database load and size, no complete SVG data is stored, instead SVGs are generated client-side from stored coordinates that comprise each 'stroke' of the drawing. This extends to complete stories: images are still not stored, they are fully defined by their own coordinates, the dimensions of each drawing, and their position in the page coordinate space.

My objectives for this project:

• Simple UI and unsuprising functionality - primarily aimed at kids. Though, some of the drawings are so ridiculous that adults can have fun with this tool as well
• Fun design!
• Dynamic SVG generation - I wanted to learn more about how vector graphics can be leveraged in web applications
• Multi-page stories
• Ability to resize and move images in each page's 'scene'
• User sign/up login with Google auth or email/password in order to save and retrieve stories
• Styled with CSS in JS
• React Context API for auth user info, current story data, Firebase integration. Self-taught.