Inspiration for YelpStreet

I wanted to create a trendy street view like interface so that my friends and I could check out local places to go to while roaming around my college town. I wanted something quick and easy, where I could just pull out my phone and scan for a nearby place that suited our needs, while also being able to get in-depth answers quicker than just using Google Maps.

What it does

-Shows nearby businesses in AR with distance, ratings, and status overlays.

-Voice search and filters (open, rating, price, category) tuned for quick changes.

-One-tap navigation mode with live bearing/distance, plus an off-screen arrow to guide you.

-Favorites, list view, and chat/booking for a chosen place.

-Allows you to easily chat with the Yelp AI agent while on the go!

How we built it

-Next.js + React for the app shell; Tailwind for rapid UI iteration.

-WebXR/Web APIs for camera/compass and GPS to place AR cards in the viewport.

-Yelp API integration for nearby search, details, and ratings; custom utilities for bearings/distance.

-Framer Motion for UI transitions; service worker for PWA installability.

Challenges we ran into

-Mobile Safari quirks: permissions for camera/location and keeping sensors active.

-Compass smoothing and jitter reduction to keep AR cards stable.

-Balancing UI density on small screens: fitting nav, filters, and voice while keeping tap targets usable.

-Handling missing/rough location data and fallbacks without breaking the AR layout.

Accomplishments that we're proud of

-Smooth AR overlays that stay aligned with heading and distance in real time.

-Quick voice driven filters that actually apply meaningful Yelp parameters.

-Navigation mode with live bearing/distance updates and a compact status pill.

What we learned

-Safari/iOS permission flows require explicit user gestures and HTTPS to be reliable.

-Keeping UI minimal on mobile while exposing core actions (filter, list, mic, nav) is a constant tradeoff.

What's next for YelpStreet

-Better offline caching for recently viewed areas and favorites.

-Richer booking/chat flows (hours, menus, offers) inside the AR cards.

-Multi-modal search improvements (natural language + quick presets) and more robust POI refresh.

For best Experience:

-Turn on all permissions in your mobile browser

-Select "Hide Tool Bar" in the browser for the UI to be viewable

Built With

Share this project:

Updates