MealWheel

Inspiration

I kept seeing people waste time debating where to eat. Once you have a solid group of decent restaurants nearby, picking any one of them at random removes the debate and makes life so much easier.

What it does

MealWheel detects your location, pulls open food spots using the Google Places API, and loads them onto a spinning wheel. Users can filter for vegetarian spots or cut out fast food, spin the wheel to make a decision, and get instant directions to the winning spot via Google Maps

How we built it

Frontend: React, TypeScript, Vite, Tailwind CSS Wheel & Audio: HTML5 Canvas for the animated wheel; Web Audio API for sound effects Data & Backend: Google Places AP via a Vercel serverless function proxy. Workflow: Spec-driven development using the Devpost Learn skills

Challenges we ran into

• Handling the Google Places API switch (upgrading to the New Places API format with field masks).
• Fixing a tricky browser race condition where a cached 304 response fought against live GPS coordinates.

Accomplishments that we're proud of

• Delivering a true end-to-end proof of concept that solves a real problem.
• Synthesizing all sound effects in code via the Web Audio API with zero external sound assets.

What we learned

• How to use spec-driven AI development to prevent scope creep and stay laser-focused on a core proof of concept.
• The mechanics of HTML5 Canvas rotation and browser geolocation edge cases across mobile and desktop.

What's next for MealWheel

• Additional dietary filters.
• Solo Diner Mode: A community feature allowing solo eaters to connect and share a table with others who want to try the same winning spot.- One-tap menu preview.

Built With

• apis
• cloud-services
• css3
• databases
• frameworks
• geolocation-api
• google-cloud
• google-maps
• google-places
• html5
• javascript
• node.js
• platforms
• react
• serverless
• tailwindcss
• typescript
• vercel
• vite
• web-audio-api