Weekender AI

Discover the best local spots with AI-powered itineraries.

Comment

Inspiration

Planning a day out in a new city can be overwhelming. There are countless review sites, blogs, and recommendations to sift through—and even then, it's hard to know if the timing works or if the places match your vibe. I wanted to create something that takes the friction out of travel planning by combining the power of AI with Yelp's trusted local business data.

Weekender AI was born from a simple question: What if you could just describe your ideal day and have an itinerary built for you?

What I Learned

  • Yelp AI API capabilities: The conversational AI endpoint can understand nuanced requests and return structured business recommendations with coordinates, ratings, and contextual descriptions.
  • Prompt engineering for itineraries: Crafting prompts that produce well-timed, geographically sensible routes required iteration—balancing specificity with flexibility.
  • Mobile-first design matters: Building a responsive interface with tab-based navigation for mobile users significantly improved usability.
  • Map library trade-offs: Switched from Mapbox to Leaflet/OpenStreetMap for better cross-device compatibility (no WebGL dependency).

How I Built It

  1. Frontend: React with TypeScript, using Vite for fast development. Styled with Tailwind CSS and shadcn/ui components for a clean, modern interface.
  2. Backend: Express.js server that receives user preferences, constructs conversational prompts, and communicates with Yelp's AI API.
  3. Mapping: Leaflet with OpenStreetMap tiles displays the itinerary stops with numbered markers and interactive popups.
  4. City autocomplete: Integrated Mapbox Geocoding API for worldwide city search with caching.
  5. AI integration: The backend sends structured prompts to Yelp's /v2/ai/chat endpoint and parses the response into a timeline of stops with business details.

Challenges

  • Parsing AI responses: The Yelp AI API returns rich conversational text alongside structured entities. Extracting and reconciling both required careful parsing logic.
  • Geographic coverage: The AI API works best for US/Canada cities. I added friendly error handling for unsupported regions.
  • Map stability: Initial use of Leaflet's flyTo animation caused crashes on some devices. Switching to panTo resolved the issue.
  • Display compliance: Ensuring proper Yelp branding (logo, star ratings, "Read on Yelp" links) throughout the app per API requirements.

Technologies Used Languages & Frameworks: -TypeScript, React, Node.js, Express.js

Frontend: -Vite, Tailwind CSS, shadcn/ui, React Query, React Hook Form, Wouter (routing), Framer Motion Mapping: Leaflet, OpenStreetMap

APIs: -Yelp AI API (/v2/ai/chat) -Mapbox Geocoding API (city autocomplete)

Database/ORM: -PostgreSQL, Drizzle ORM

Share this project:

Updates