All Spreads

To facilitate recipe discovery using the client's products, the Daymaker app arranges recipes in a circular manner, resembling a clock. The app retrieves the recipes from an API via the CMS. A slight variation is allowed in the number of recipes per daypart, as their positions on the "clock" are computed upon loading. The clock itself is generated programmatically as an SVG, featuring recipes, markers, and daypart color coding. The mobile version showcases a simple pie chart, enabling users to select their preferred daypart.

Written in Vue.js with a little help from Green Sock to animate the fork/knife pointer.

Screenshot of the application when a recipe is chosen

Website