Bringing back the pizza calculator

Bringing new life to an old project is always good fun. In this post, I talk about How Many Pizzas and how I brought it into 2024 with a modern technology stack.

Bringing back the pizza calculator
Photo by Alan Hardman / Unsplash

Years ago, back in 2013, I made the original version of "How Many Pizzas", a simple tool to help people calculate how many pizzas they need to order for a party.

It was kind of borne out of necessity at the time. I was at a work event that had pizza catered and they committed the cardinal sin of ordering too few.

The old version had a typical technical stack for the time:

  • Bootstrap for CSS
  • jQuery to help with Javascript
  • Font Awesome for icons

It was quite popular at the time, and even attracted a small, but important contribution from the community.

Things are a lot different now, both for myself, and the world of frontend web development. It was time for a refresh.

Building the 2024 version

The most important things I wanted to improve for the 2024 version of How Many Pizzas were as follows:

  • Reduce the inputs required, and improve data entry to make the process as easy as possible
  • Improve the accuracy of suggestions, based on any pizza-related facts / statistics I could find
  • Support Japanese pizza brands since I live here now, and they have different sizes
  • Use modern frontend tooling like Vue.js, Vite, and Tailwind

Reduce the inputs

The original version asked the user to input the number of people who were going in total, and how many different "types" of attendees would be there.

Instead, I researched how many folks would be likely to fall into each category in a group of people and automatically factor that into the calculations.

The original version also asked the user to specify the size of pizzas they will be buying. This option is still present in the 2024 version - but there is a default "choose for me" option which will fit the number of slices needed with the different sizes of pizzas at each brand.

I also added toggle buttons to make entering the number of people much more straightforward on mobile devices.

Support Japanese pizza brands

Luckily this one was pretty easy - the main players from the rest of the world are also present in Japan.

The only extra entry that needed to be added was "Pizza-La", who make truly delicious (if expensive) pizzas.

Updated 2024-07-30: i18n is fully implemented. The interface for the calculator is available in both English and Japanese.

Use modern tooling

As mentioned earlier, the new version of the How Many Pizzas tool uses Vue.js, Vite, and TailwindCSS.

It was fun to do even a little of frontend development again, since most of my experience lies in the sever-side / backend realm of things. I'm sure there are many things to improve but I am happy with how it turned out.

Want to learn more?

You can see the source code for the modern version on GitHub. Feel free to fork it and improve it!

You can also just use the tool over at https://howmanypizzas.net .