Price Munch

Inspiration

Food prices go up all the time and catch everyone off guard. It is the people with the least income who are the most affected. There should be more transparency from food retailers about their prices so people do not have to spend more than they can afford. Current price comparison sites have a sometimes overwhelming amount of information. We wanted to make a site to keep it simple, readable and easily understandable for all so people with busy schedules can quickly get the key information they need.

What it does

The app stores prices of particular goods like a loaf of bread, a kilogram of rice, a dozen eggs, etc at different UK supermarkets inside a SQL database within Supabase. When the web app is loaded, the data is fetched from the database and passed into React components which show the products, supermarket names and prices you see on the screen.

How I built it

I started by setting out my objectives and deciding on the non-negotiables: the prototype had to use web scraping in some way to present up-to-date food prices to users. I created a basic user interface design that had each food product on a card.

Challenges I ran into

I had never used Lovable before, so at the start I was not sure how much detail to give it in the prompt. I found it difficult to describe exactly what I wanted the app to be. Some problems arose from not being specific enough. I wanted UK supermarket data but it was getting US supermarkets - this issue I could fix by prompting. Another one was that there was some repeated text on the product cards that made the site look a bit cluttered. That one I fixed by editing the React component code myself.

Accomplishments that I'm proud of

I managed to take a project from a paper design to a fully-functional published web app very quickly.

I worked in a small team to identify a problem people in our community face and then build something that takes a step towards solving it. Price Munch is a web app with real value that anyone can use to spend less while still eating well.

What I learned

This experienced helped me learn how to identify some real-world issues that can be solved with my skills and using technology. I learned how to make use of generative AI to speed up the development process while still being creative myself. I improved my front end development skills working in React and documenting areas for improvement on GitHub.

What's next for Price Munch

I made a list of issues on the GitHub repository of bug fixes and features I would like to implement. I would like to introduce a greater range of supermarkets for it and use more colour across the site to catch attention. A great feature would be a rating system so users could get a sense of the quality of the food they are buying, according to other users.

I need to implement web scraping for accurate, up-to-date price data. also want to prove the concept can generalise outside the domain of supermarkets, as the same idea should work for any shop or business with a website that contains prices and allows web scraping. This means that people with access to different food retailers can still make use of the Price Munch tool if we can expand to cover different regions.

Built With

• lovable
• react
• sql
• supabase
• typescript