October 11, 2024
Data driven weekly shopping driver
Developing a web app to help manage, inform and improve efficience with grocery data



In this personal project I majorly focused on automating the process of me deciding where to shop. Involving the API's which are hidden under the front end of major shopping websites I am able to scrape results and use them to determine what the best price is.
Key Features
- API's: Developed a modern restful API schema with authenitcation/ access linked to the logged in user. This made it easy to establish data which had already been scraped as well as scrape more when required.
- Data normlaization: Getting data from several different providers meant several different formats. I built converters between all the major metric systems to allow price comparison on a similar level,
- AI Integration: Used API access to google gemini, to assist in the process of categorizing items when added to shopping list. This all fits underneath the free tier (1500 requests per day) for my personal use.
Technologies Used
- React and Next.js: For building the front-end codebase with clean, reusable components.
- Styled-Components: For managing styles dynamically using design tokens.
- GitHub Actions: For automating the pipeline and syncing design changes to the repository.
Challenges and Learnings
- Using dev ops practises for the first time using a compute instance (Oracle Cloud Instance) for deploying on main pushes (Github actions)
- Design, using bootstrap-react for most of the pre-styled components
Updates
2026-02: Updated to nextjs 16 and had antigravity fix up alot of linting errors. Updated the UI with new css.
Sample Page
Here is an example page for playing around with, it isn't logged in so cannot extract new data. If it doesnt work, try opening this link
---Project Team
Interested in this project?
Feel free to reach out to discuss the methodologies or technologies used in this project.
Inquire