<

Developing "Bochi-Bochi", an App to Easily Find Cheap Ingredients

Artifact

"Is the cabbage at this supermarket a bit expensive? Is there anywhere else cheaper?" From such small daily questions, we have developed a web app "Bochi-Bochi" that allows you to easily compare the prices of ingredients at different supermarkets.

bochi-bochi top page
bochi-bochi top page

https://bochi-bochi.vercel.app

How to Use the App

From the top page, click on Search for Supermarkets.

bochi-bochi search page
bochi-bochi search page

Next, choose how you want to search for supermarkets. For example, click on Search from Current Location. I don't want to disclose my current location, so I'll omit the images from here.

A list of nearby supermarkets will be displayed on Google Map. Also, ingredients are displayed at the bottom of the screen. Clicking on the displayed ingredients will make it clear at a glance where you can buy them cheaply. The ingredients displayed are limited to those registered at the supermarket.

※ The supermarket's ingredients are registered once by AI scraping.

Results of Creation

Since using this app, my wife has been saying things like, "The cabbage is cheaper at this supermarket," and "The ground meat is at that supermarket," and enjoying shopping with satisfaction. The app also has a feature that allows you to easily register price information of ingredients using the receipt after shopping. In addition, we have built a system that automatically collects and registers supermarket ingredient data using AI technology. We use Google Map for supermarket search and display, and by making good use of the free tier, we are able to obtain supermarket information while keeping costs down.

Supermarket with All Cheap Ingredients

However, one day while using this app, a supermarket where "all ingredients are cheap" opened in my neighborhood. As a result, we started doing most of our shopping there. As a result, the frequency of use of the app itself has decreased. (laughs)

Development Memo

OpenAI Talk

When integrating OpenAI into the system, accuracy improved by dividing the process into stages rather than doing the whole process at once. Specifically, in the process of creating structured data from receipt images, it was found to be effective to first extract text from images using OCR, and then analyze the extracted text with OpenAI. Also, by keeping the instructions simple, we were able to achieve more accurate results. For example, by making the question clear as to whether the product name belongs to the product category or not, the accuracy of the analysis improved.

Technology Stack Used

The following technology stack was used for development.

  • Web Framework
    • Next.js
  • API
    • tRPC
  • Database
    • PlanetScale
    • Prisma
  • UI
    • @tremor/react
  • State Management
    • jotai
  • Map Related
    • @vis.gl/react-google-maps
    • Google Places API
  • Receipt Data Extraction
    • Google Cloud Vision
    • OpenAI
  • Scraping
    • Crawlee
    • Cloud Run Jobs
    • OpenAI

During development, I was able to proceed while confirming the direction of the app through direct feedback from my wife, which was a very enjoyable experience. There is still room for improvement in UI/UX design, but at this point, I plan to continue using it as it is for personal use.

In conclusion

Finally, I recently registered with Bluesky. If you're interested, please follow me.

https://bsky.app/profile/silverbirder.bsky.social

If it was helpful, support me with a ☕!

Share

Related tags

Artifact