Overview

This application was built with the goal of helping users compare product prices based on serving sizes and their consumption needs. It is a PWA that can be installed on your home screen and behaves like a native app. It is also offline capable and will store your product builds in local storage. I built it after trying to figure out how much I spend on ingredients for my meal prep and wanted to be able to easily compare prices of different products like milk, oatmeal, eggs, etc.

Technical Details

Architecture

Describe the technical architecture of your project:

• Frontend: React, TypeScript, Tailwind CSS, DaisyUI
• Backend: Local storage for offline storage of product builds and service worker for PWA functionality
• Deployment: Netlify

Features

Feature 1: Daily and Weekly Consumption Count

• Users can enter their daily and weekly consumption counts for a product
• The app will calculate the price per serving based on the serving size and the consumption counts
• The app will display the total cost for the product based on the consumption counts
• Users will be able to add how often they shop so they know exactly how much they will need to purchase for the period until their next shopping trip

Feature 2: Product Comparison

Users can get a detailed comparison of products by adding them to the comparison list. The app will then display which product is the “most bang for your buck” based on the price per serving and the total cost among other conditions. This will help users make a decision on whether to buy one cheaper product or a more expensive product that is more efficient for their serving sizes and consumption needs. For example, I was using it to compare milk prices for different brands and kinds of milk I use in protein shakes.

Conclusion

It was a fun and quick project that ended up being a fairly useful tool for me and also made me realize how deceptive some product packaging can be in regards to cost per serving.