
Weekend Annoying Task Challenge: Smart Grocery Sorter
An AI-powered serverless web app that automatically organizes grocery shopping lists using Amazon Bedrock, AWS Lambda, and API Gateway.
Series: WeekEnd-Challenges (7 articles)
- 2Weekend Annoying Task Challenge: Smart Grocery Sorter This article
Vision & What the App Does
Every week, I end up creating a grocery shopping list. The list usually contains a mix of fruits, vegetables, dairy products, household supplies, grains, and meat. Before going shopping, I often reorganize the list into categories so that I don't have to move back and forth between aisles in the supermarket. Although this only takes a few minutes, it is a repetitive task that I perform almost every week.
To solve this small but recurring problem, I built Smart Grocery Sorter, a simple AI-powered web application that automatically organizes a grocery list into meaningful categories.
The user enters one grocery item per line and clicks Sort List. The application sends the list to Amazon Bedrock using the Amazon Nova Lite model, which intelligently categorizes the items. The organized list is then displayed in the browser within seconds.
Instead of manually sorting every shopping list, the application automates the process, making grocery planning faster and more convenient.
How I Built It
I wanted to build a lightweight serverless application that required minimal infrastructure while still using generative AI.
I first created a simple frontend using HTML, CSS, and JavaScript. The interface includes a text area where users enter grocery items and a button that triggers the sorting process.
When the user clicks Sort List, JavaScript collects the input and sends it as a JSON request using the Fetch API.
To process the request, I created an AWS Lambda function written in Python. The Lambda function receives the grocery list, creates a prompt, and sends it to Amazon Bedrock using the Amazon Nova Lite foundation model.
The model returns a categorized grocery list, which Lambda formats as a JSON response and sends back through Amazon API Gateway to the browser.
During development, I encountered a few challenges.
The first issue was testing the Lambda function. Initially, my function expected API Gateway events only, which caused errors during Lambda console testing because the event structure was different. I updated the code so it supports both Lambda test events and API Gateway requests.
The second challenge was configuring CORS in API Gateway. Since my frontend was running in the browser, requests were blocked by the browser's security policy. After configuring Cross-Origin Resource Sharing (CORS) in API Gateway and redeploying the API, the frontend was able to communicate successfully with the backend.
Another challenge was testing the frontend locally. Opening the HTML file directly from the file system resulted in browser security restrictions. I solved this by using VS Code Live Server, which serves the application through a local web server.
Finally, I deployed the backend using AWS Lambda and API Gateway, verified the API using PowerShell and browser testing, and published the complete source code to a public GitHub repository.
AWS Services Used / Architecture Overview
This project uses fully managed AWS services.
Amazon Bedrock
Amazon Bedrock provides access to the Amazon Nova Lite model, which performs the AI-based categorization of grocery items.
AWS Lambda
AWS Lambda hosts the backend Python code without requiring any server management. It receives requests from API Gateway, sends prompts to Bedrock, and returns the organized grocery list.
Amazon API Gateway
API Gateway exposes the Lambda function through an HTTPS endpoint so the frontend can securely communicate with the backend.
Architecture
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
User
│
▼
HTML / JavaScript Frontend
│
HTTP POST Request
▼
Amazon API Gateway
│
Invokes
▼
AWS Lambda (Python)
│
Prompt
▼
Amazon Bedrock
(Amazon Nova Lite)
│
Categorized Grocery List
▼
AWS Lambda
│
JSON Response
▼
FrontendThe frontend is hosted on Netlify for public access, while all AI processing and business logic are executed using Amazon API Gateway, AWS Lambda, and Amazon Bedrock (Amazon Nova Lite).
How the App is Triggered
The application is triggered when the user clicks the Sort List button.
The frontend collects the grocery list and sends an HTTP POST request to Amazon API Gateway. API Gateway invokes the AWS Lambda function. Lambda creates a prompt using the grocery list and sends it to Amazon Bedrock's Amazon Nova Lite model. After receiving the categorized response, Lambda returns the result through API Gateway, and the frontend displays the organized grocery list to the user.
What I Learned
This project gave me hands-on experience building a complete serverless AI application using AWS.
I learned how to invoke Amazon Bedrock foundation models from AWS Lambda, how API Gateway integrates with Lambda, and how browser applications communicate with serverless backends using HTTP APIs.
I also learned the importance of handling different event formats inside Lambda functions, configuring CORS correctly for browser applications, and testing APIs independently before integrating the frontend.
Although the application is simple, it demonstrates how generative AI can automate small repetitive tasks using fully managed AWS services without provisioning or managing servers.
Link
Live Demo: https://gs-ai-jyog.netlify.app/
Source Code: https://github.com/GunnerJyo/grocery-sorter-ai
Source Code: https://github.com/GunnerJyo/grocery-sorter-ai
To make the application easy to evaluate and use, the frontend is deployed on Netlify as a live demo. The application's core functionality is powered by AWS services, including Amazon API Gateway, AWS Lambda, and Amazon Bedrock (Amazon Nova Lite). The complete source code for both the frontend and backend is available in the public GitHub repository.
Conclusion
Smart Grocery Sorter demonstrates how a simple serverless architecture combined with Amazon Bedrock can automate an everyday task in just a few seconds. Using HTML, JavaScript, Amazon API Gateway, AWS Lambda, and Amazon Bedrock, I built an application that transforms an unorganized grocery list into neatly categorized sections with a single click.
This project shows that even small weekly annoyances can be solved effectively using AWS serverless services and generative AI, making everyday tasks faster, simpler, and more efficient.

lambda-i

IAM-I

API-R

API-S

before-sorting-demo

after-sorting-DEMO
Series: WeekEnd-Challenges (7 articles)
- 2Weekend Annoying Task Challenge: Smart Grocery Sorter This article
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article