MagiCart: Revolutionizing Grocery Planning and Accessibility

🛒 Our Story: Why We Built MagiCart

All of us are — or recently were — students. So, naturally, we can all agree on three simple facts:

  1. We wish we had more money (especially in this economy).
  2. We all need to eat a little healthier… ramen just isn’t cutting it.
  3. We wish we had more time — whether to study, relax, or if we're being honest... sometimes to play video games.

What if we told you that by using our site, we could help solve all three of those problems?

That’s right — MagiCart saves you time, money, and stress.

Sounds too good to be true, right?
Thanks to MagiCart, it’s more than possible — and that’s exactly why we built it.

What it does

MagiCart is a smart grocery shopping assistant designed for students and budget-conscious shoppers. It enables users to create shopping plans, compare prices across multiple retailers, and find the best deals. Key features include:

  • Smart cart comparison for finding the best value.
  • AI-powered store recommendations based on user preferences and nearby options.
  • Personalized ingredient recommendations for health, diet, and allergy considerations.
  • Affiliate link integration for checkout-ready carts that earn revenue.

We built MagiCart using modern web technologies and powerful APIs — and the entire project was developed inside Loveable, an AI coding platform that helped us move faster and smarter throughout the build process.

Core Technologies & Tools

  • React for a fast, responsive, and dynamic user interface.
  • Tailwind CSS for clean, mobile-first styling with minimal effort.
  • Redux to manage global state, including shopping plans, user data, and retailer information.
  • Supabase for:
    • User authentication
    • Saving and syncing shopping plans in real-time
    • Secure, scalable backend functionality
  • Algolia for lightning-fast product search and smart filtering, making shopping smooth and intuitive.

AI Integration

  • Gemini API for a built-in AI assistant that:
    • Offers personalized health and nutrition advice based on what's in your cart
    • Provides recommendations for store selection based on nearby locations, prices, and deals
    • Helps users plan meals based on dietary needs, allergies, and personal preferences in real-time

By combining geolocation, AI, and thoughtful UI/UX — and leveraging the collaborative speed of Loveable — MagiCart was built to solve real student problems: saving time, money, and stress with every grocery trip.

Smart Location & Route Features

  • Google Maps Platform, including:
    • Geocoding API to convert addresses into map coordinates
    • Directions API to optimize routes between stores and users' locations
    • Distance Matrix API for calculating travel time and helping users make efficient decisions
    • Optimized shopping map: Integration of shopping with daily routines (e.g., going from work to home while picking up groceries along the way).

Challenges we ran into

  • Route optimization: Ensuring the route planner worked smoothly across multiple stores and accurately displayed the best path while considering store hours, availability, and distance was a complex task. (For example, getting produce from H-E-B, beverages from Walmart, and the rest from Kroger for maximum savings — without factoring in all the extra time and gas spent traveling between locations...)
  • Affiliate link management: Ensuring affiliate links were correctly integrated into the user flow without disrupting the shopping experience required some tricky logic, especially when handling multi-retailer carts.

🏆 Accomplishments That We're Proud Of

  • We integrated a powerful AI recommendation system that analyzes users’ shopping lists to provide personalized health and nutrition tips. On top of that, our built-in AI chatbot lets users ask questions about their cart, ingredients, or food choices — making healthy decisions easier and more accessible.

  • Our multi-store route optimization feature works seamlessly, helping users plan the most efficient shopping path across multiple retailers based on location, availability, and price.

  • We’ve implemented affiliate link integration in a way that enhances the user experience while generating sustainable revenue — without compromising transparency or trust.

  • We maintained high-performance standards with algorithms optimized for scalability, consistently achieving time and space complexity between O(1) and O(log n). This ensures that as we expand the platform beyond this hackathon, it remains fast and efficient — no matter how large the dataset gets.

What we learned

Throughout this project, we learned a lot about:

  • User-centric design: Building a product that caters to diverse user needs, from budget-conscious shoppers to those trying to make their shopping trips more efficient.
  • Collaborative filtering: How user feedback and community-driven features can significantly improve a product’s accuracy and reliability.
  • API integration: Managing multiple third-party APIs like Google Maps, Gemini, and affiliate programs while maintaining a seamless experience.

What's next for MagiCart

Looking ahead, we plan to:

  • Introduce advanced cultural and dietary filters to make MagiCart more inclusive (e.g., halal, kosher, vegan).
  • Add community sharing features to allow users to share shopping plans, tips, and recipes with others.
  • Expand the route optimization to consider additional factors like traffic, store availability, and delivery times.
  • Collaborate with as many grocery stores as possible and integrate their own API for real-time price tracking on our platform. We believe any retailer would want to be on the platform as it is a great way to increase the customer base.

We are excited about the future of MagiCart and look forward to continuously improving it to make grocery shopping smarter, easier, and more affordable for everyone.

We truly hope we will get the opportunity to present this project of ours in SF or NY during open days at Loveable, which would allow us to build this faster, larger, and much better — and ensure every single person gets the best deal possible, the fastest, stress-free—forever.

Thank you!
The MagiCart Team.

Share this project:

Updates