CoEff

Inspiration

With the rising cost of groceries, finding the best prices can feel like a full-time job. Shoppers in urban areas like the Loop have access to multiple supermarkets within a short radius, but comparing prices for everyday staples across all of them is tedious. We were inspired to build CoEff to take the guesswork out of budgeting, creating a smart companion that automatically finds the best deals so users can stock up on their favorite items while staying within their budget.

What it does

CoEff is a hyper-local grocery intelligence tool. It allows users to search for everyday essentials and instantly compares prices across major retailers and local shops within the Chicago Loop. Beyond just listing prices, it calculates the "Best Overall Deal" for a full shopping cart, helping users decide if a slightly longer walk is worth the savings.

How we built it

Because we wanted to nail the user experience and the core price-comparison concept within the time limit, we focused entirely on building a robust, interactive frontend prototype using React.js.

State as a "Pseudo-Backend": We didn't want the app to feel like a static mockup, so we built complex mock data arrays and used React Hooks (useState, useEffect) to simulate database interactions. When you add items to the cart or search for a product, the app processes those actions dynamically in the client state.

Routing & Architecture: We used react-router-dom to map out the entire user journey—from OTP login to checking out—creating a seamless, single-page application that feels exactly like a native mobile app.

UI/UX Design: We designed the interface using pure CSS, focusing on a clean, modern aesthetic, intuitive touch targets, and conditional rendering to make the prototype feel alive.

Challenges we ran into

Since we didn't have a backend to do the heavy lifting for data processing, our biggest challenge was managing complex logic directly in the React frontend. Designing the ShoppingList component was particularly tricky. We had to manage nested arrays (items within stores) and handle state updates when a user checked or unchecked individual items, ensuring our "Best Overall Deal" algorithm recalculated accurately on the fly without breaking the pseudo-database we created in our local state.

Accomplishments that we're proud of

The "Best Overall Deal" Engine: We are incredibly proud of the logic in the shopping cart. Even without a backend server, we built a dynamic algorithm purely in React state that evaluates the user's selected items across multiple stores and instantly calculates the cheapest overall checkout option.

A Complete, Native-Feeling Journey: We didn't just build one or two screens; we mapped out and developed over 15 distinct, interconnected routes. From the splash screen and OTP login to the dynamic price comparison and order history, the prototype feels like a fully fleshed-out, production-ready mobile app.

Complex State Management: Managing nested arrays—like toggling specific items inside specific stores within the cart—is notoriously tricky in React. We successfully built a clean, bug-free state architecture to handle these mutations instantly without needing a real database.

What we learned

Building CoEff taught us a lot about the importance of user-centric design in data-heavy apps. We learned that users don't want to see a wall of numbers; they want a clear "Buy Here" recommendation. We also gained deeper experience in managing state within React to keep the shopping cart and search results synced in real-time.

What's next for CoEff

The next step for CoEff is integrating API's from different stores across Loop, real-time inventory tracking and potentially expanding to include a "Route Optimizer" that uses the CTA/L-train map to find the best deals along a user's commute home. We also want to implement user accounts so people can save their "frequent flyers" and get notified when their staple items go on sale.

Built With

• css3
• javascript
• jsx
• react-router-dom
• react.js