Skip to content projects

Pizza App

Interactive way to make a pizza
svelte
svg
figma
gsap
Visual of the project Visual of the project

Overview

Screenshot of pizza drag and drop ordering application

Wanted to make a fun application to learn different things.

What better way than making a pizza (think python make pizza example).

Highlights

Assets

1
confirm modal for pizza toppings

Using SVG sprites to limit the requests to the user. Using smart naming conventions to allow for small code and easy component state to display correct graphics.

Interaction

2
topping being drug to pizza to be added

Drag and drop animations using GreenSock and Svelte components. Allow users to drag a topping onto the pizza to add as well as click if added to remove toppings.

Calculation

3
reactive total change as you add or remove toppings

As the user changes the size and toppings of the pizza cost will be reactively updated keeping precise track of what is ready to be ordered.

Learned

SVG sprites and how to use them in components. Using data-set to help pass naming conventions along to keep every thing in sync. Wanted to try making HTML details and summary modal for oder confermation screen.

Check out the code repo or view the active demo.