Hoppers

Dashboard
Feed
Saved list
AI Cafe Recommender

Inspiration

We built Hoppers because choosing a café is often harder than it should be. Information is scattered across maps, reviews, social media, and friends’ recommendations, and it still does not always answer the practical questions: Is it nearby? Is it within budget? Is it good for studying, dates, or group meetups? Hoppers was inspired by the everyday struggle of café hopping with too many options and not enough personalized guidance.

What It Does

Hoppers helps users discover cafés that match their preferences, location, budget, and purpose. Users can browse nearby cafés on a live map, set preferences such as budget, distance, and occasion, receive AI-assisted café recommendations, view café details, save favorite spots, and read or create community reviews through a feed.

How We Built It

We built Hoppers with a Next.js frontend and an Express backend. The frontend uses React, Tailwind CSS, shadcn-style UI components, Clerk authentication, Google Maps, and Supabase integration. The backend connects to Supabase for café, list, and post data, uses Clerk for protected user routes, pulls live café data from the Google Places API, and uses DeepSeek through the OpenAI SDK to rank and explain the best café matches.

For recommendations, we combined deterministic filtering with AI. Distance filtering and sorting are handled in code, while the AI focuses on selecting the top matches based on budget, purpose, and user notes. If AI matching is unavailable, the app falls back to rating-based recommendations.

Challenges We Ran Into

One major challenge was combining live Google Places data with our own Supabase data model. We had to normalize cafés, handle external place IDs, avoid duplicate saved cafés, and sync useful café information in the background.

Another challenge was making recommendations reliable. We did not want the AI to be responsible for everything, so we separated the system into clear parts: code handles location and distance accuracy, while AI handles subjective matching and summaries.

Authentication and persistence also added complexity, especially around saved cafés and user-specific lists. We had to make sure saved places were tied to verified Clerk users instead of trusting client-provided user IDs.

Accomplishments That We’re Proud Of

We are proud that Hoppers feels like a real, usable café discovery product instead of just a static demo. It includes a live map, real nearby café data, preference-based recommendations, saved lists, authentication, café reviews, and a social feed.

We are also proud of the recommendation flow because it balances AI with practical engineering. The app uses AI where it adds value, but still keeps core logic like distance filtering, fallbacks, and persistence predictable.

What We Learned

We learned how important it is to design AI features around clear boundaries. AI works best when it enhances a structured flow instead of replacing the whole system.

We also learned a lot about integrating multiple services: Google Places for live café data, Supabase for storage, Clerk for authentication, and an AI model for recommendation reasoning. Making these services work together smoothly required careful API design and data normalization.

What’s Next For Hoppers

Next, we want to expand Hoppers with real-time café condition updates, such as crowd level, noise level, and temperature. We also want to add group voting rooms so friends can decide on a café together, plus better tagging, promotions, and café-owner features.

Longer term, Hoppers could become a smarter social discovery platform for café culture, helping users not only find cafés nearby, but choose the right café for the exact moment.