BallinOnABudget

This app helps users save time and money by optimizing grocery shopping. A user builds a grocery list, the app generates an optimized route of which stores to visit and what to buy at each location.

Comment

Inspiration

The inspiration for this app came from my mom, who meticulously scans weekly ads from local grocery stores, comparing prices and planning what to buy at each store. While this process helps her save thousands of dollars a year, it’s time-consuming and often inefficient in terms of travel. My girlfriend, who relies on government assistance and balances two jobs while attending school, faces a different challenge—she has a limited grocery budget and very little time to spare. I built this app to automate and optimize the grocery shopping process, helping users prioritize either time, money, or both. It’s designed to make smart shopping accessible and practical—especially for low-income individuals and families who need it most.

What it does

BallinOnABudget is an intelligent grocery-planning app that helps users save time and money by optimizing where and how they shop. Users can build grocery lists, and the app scans nearby stores for item availability and compares prices. It recommends what to buy at each store based on personalized priorities—like minimizing cost, time, or both—and generates an optimized route. It even maps out the ideal order of store visits to minimize travel distance and time from the user’s starting point to their desired destination, making every grocery trip smarter and more efficient.

How we built it

We built the "BallinOnABudget" grocery shopping optimization platform as a full-stack application that helps users save money and time on grocery shopping. The application uses MongoDB Atlas as its main database, storing user data, grocery lists, store information, and product pricing. We integrated the Google Maps API for all location-based features, including geocoding addresses, calculating distances between users and stores, visualizing store locations on interactive maps, and providing travel directions. The Gemini API powers our intelligent scraping capabilities, automatically extracting real-time grocery pricing and deals from store websites to provide users with accurate product information. This data powers our three shopping strategies (Money Saver, Balanced Saver, and Time Saver) that help users optimize their shopping trips based on their preferences. The application features a responsive user interface built with React and Tailwind CSS, secure authentication with password hashing using scrypt, and personalized user preferences for location settings and distance filters.

Challenges we ran into

During the development of BallinOnABudget, we encountered several significant challenges:

Google Maps Integration Issues: We faced persistent problems with map markers not displaying accurately, particularly store locations that would appear incorrectly positioned or entirely missing.

Geolocation Accuracy: Obtaining accurate user location data proved challenging, especially with browser permissions and varying mobile device behaviors. We decided to use real-time geolocation.

Data Scraping Limitations: Using Gemini API for grocery pricing required extensive prompt engineering to extract structured data consistently across different store websites with varying layouts. Some stores implemented anti-scraping measures that required additional workarounds. We opted to use Puppeteer for data scraping.

MongoDB Schema Evolution: As the application grew, we had to manage MongoDB schema changes without breaking existing data.

Session Management Complexity: Authentication presented challenges, particularly with session persistence across server restarts and handling expired JWT tokens. We improved security by implementing SESSION_SECRET environment variables and proper session store configuration.

Memory Leaks in React Components: The map component caused memory leaks when unmounting, requiring careful implementation of cleanup functions for Google Maps objects to prevent performance degradation and browser crashes.

API Rate Limiting: Google Maps API quotas and rate limiting required implementation of caching strategies to reduce API calls and avoid exceeding free-tier limits.

Accomplishments that we're proud of

Responsive UI/UX Design: Built a clean, intuitive interface with careful attention to accessibility features and user-friendly interactions.

Security Implementation: Implemented robust authentication using secure password hashing with scrypt, proper session management, and environment variable protection for sensitive API keys.

Cross-API Orchestration: Successfully coordinated multiple external APIs (Google Maps, Gemini, MongoDB Atlas) into a cohesive system.

Kept pushing, not touching grass, and working on this project well into the night.

Participated in our first hackathon.

What we learned

This takes way more work than we thought!

What's next for BallinOnABudget

We want to complete the application and provide a free, mobile-friendly application and start saving people their time and money!

Further, we'd like to monetize our application by selling relative and appropriate data- purchases, chosen grocery stores, chosen items- collected from the app to grocery stores to fund a free application for users. We'd also like to tally how much the average user of our app saves per month/year. This could serve to potentially create a subscription-based model for our app that costs $5/month but saves the user hundreds of dollars in a year.

We want to implement: Intelligent Shopping Strategies: We plan to develop and integrate three distinct optimization algorithms—Money Saver, Balanced Saver, and Time Saver—that will analyze pricing, distance, and time factors to generate personalized shopping plans tailored to user priorities.

Seamless Geospatial Integration: Our goal is to create a dynamic, location-aware experience that updates store recommendations based on user proximity and preferences. We’ll include a travel radius visualization to help users easily understand their options at a glance.

Automated Price Scraping: We aim to build a robust integration with the Gemini API to extract and organize real-time grocery pricing data from multiple store websites, giving users immediate and accurate information for smarter decision-making.

Responsive UI/UX Design: We're planning a clean, intuitive interface optimized for mobile and desktop experiences. The design will emphasize accessibility and include user-friendly features like interactive store cards and simplified map navigation.

Built With

  • and
  • crypto
  • css3
  • eslint
  • express-session
  • express.js
  • framer-motion
  • git
  • google-gemini-api
  • google-maps-distance-matrix-api
  • google-maps-geocoding-api
  • google-maps-javascript-api
  • html5
  • lucide-react
  • mongodb-atlas
  • mongoose
  • node.js
  • npm
  • passport.js
  • react-hook-form
  • react.js
  • replit
  • shadcn-ui
  • tailwind-css
  • tanstack-react-query
  • typescript/javascript
  • vite
  • zod
Share this project:

Updates