ETH Pizza [9]: Finishing UI

3 min readMay 3, 2023

Next up I’m going to add order customization, searching and group menu items. All frontend work this time around besides updating the schemas. Let’s get started!

Customizing Orders

To make orders customizable I’ll need to create a new object to add to MenuItems. Something that can hold all the values for customization. This is what I have in mind:

Now I have to add a pop-up on menu item add to order that can hold some buttons.

Chat GPT got me started here pretty well but I needed to clean it up quite a lot still. Looks great but there’s a key issue. Mainly that the customization page doesn’t know if an item is a drink or not, so it will offer drink sizes like 16oz for pizzas.

But before I fix that, I want to work on grouping menu items as that will help differentiate which items are available for certain customization.

Grouping Items

In order to do this I need to build out a more comprehensive menu than just Pizza and Coke. I’ll add a few more items to total 3 pizzas, 3 sides, and 3 drinks:

Looking beautiful. Now to give each an enum: Type to define if it’s a Pizza, Side or Drink. Then include tabs for each to sort them.

The classic falsy values almost got me on this one. As I got a bit stuck wondering why the tabs worked for sides and drinks but not for pizzas. It all had to do with “All” being a tab value set to null, and the pizza enum being 0 which typescript considered equally false. But it works now after explicitly describing not-filtering as null.

Before moving on to searching I’d like to go back to customization and make customization different for different types. To make this as smooth as possible I’ll move the customization component to a folder and split it up to a few different components (sides won’t get one at all)