Overview

This app has a funny origin story. It started at a conference in Chicago when a group of developers and I were getting pizza. We sat around a table debating what size to order—should we get two mediums or one large? We wanted the most pizza for the best price. With a table full of developers, this conversation naturally evolved into an app idea. We started planning it out right there. I thought, “This would be the perfect alternative to a to-do app when learning a new stack.” And that’s how this app was born.

This app is a simple tool that calculates the price per square inch, slice, and overall cost of pizzas based on their size and quantity. It’s a great way to compare different pizza options and make the best choice for your needs, whether you’re ordering for yourself or for a group every one wants to know how to get the most dough for their hard earned dough.

It is uniqe for me because it was some of my first experiences with not only React, but also TypeScript and Styled Components. I was also learning all about PWA’s and local storage and creating a seamless experience for users both online and offline.

Technical Details

Architecture

Describe the technical architecture of your project:

• Frontend: React, TypeScript, Styled Components
• Backend: Local storage for offline storage of pizza builds and service worker for PWA functionality
• Deployment: Netlify

Features

Feature 1: Pizza Calculator

Users start with a form containing the following fields:

• Pizza size
• Unit price
• Number of pizzas
• Number of slices

Users enter the pizza size, number of slices per pizza, quantity of pizzas, and cost per pizza.

The calculator does all the math, providing the price per square inch for those who want detailed metrics, the price per slice to understand individual serving costs, and the total cost. This helps users compare options—like whether two mediums are better than one large.

Users can save their calculation and create additional builds to compare side by side, making it easy to determine the best value.

Feature 2: Pizza List

Users will see a list of all their pizza builds. Each build displays:

• Price per square inch
• Price per slice
• Total cost
• Unit price
• Quantity
• Pizza size
• Number of slices per pizza

Each build appears in its own card, making it easy to compare options and find the best deal. Users can prioritize what matters most to them, whether that’s the lowest price per slice or the best price per square inch. The list is accessible both online and offline, and users can remove builds they no longer need.

Development Process

Challenges

1. PWA Functionality: PWA’s were pretty new to me at the time so I had to learn how to work with service workers and offline storage options as well as web components I used to enhance the installation experience for the user.
2. iOS and Mobile Styling and Functionality: I wanted this to be a really great example of responsive web app design and functionality so I had to adapt and learn how to not only make it look great on desktop but also on mobile devices. Working with iOS in particular was a challenge because of how their browser behaved and how they handle PWA’s.

Lessons Learned

• I learned that iOS has a very specific way it deals with PWA’s and a lot of styling quirks that will need to be considered when developing for it.
• This was some of my first experiences with React hooks and how to use them to manage state and side effects in a React application.

Future Enhancements

• Do a revamp with some newer approaches in React and Styling, perhaps using TailwindCSS
• Crust size/depth option to get another dimension of pricing and comparison
• Animated pizza sizes and slices
• List shows indicator for which pizza is truly the best value

Conclusion

I’ll probably keep making variations of this app as I learn new things and want to experiment with new approaches and technologies. This will essentially be a sort of “Todo” app for me to experiment with new stacks, so I will likely have versions of this built with Vue, Solid, Svelte, Qwik, etc.

---

Last Updated: January 26, 2021