Challo

You bring the mood, and your friends bring the vibe. AI orchestrates the plan.

Comment

Inspiration

Every friend group knows the struggle : the endless “what should we do?” texts that lead nowhere. We wanted to fix that by making planning feel as natural as chatting. Inspired by group dynamics, collective decision-making with everyone in mind, and modern AI LLMs, Challo was born — a social crew planner that transforms mood prompts and friend interests into curated, real-world plans.

Overview

Challo is a single-page “crew planner” that lets a group describe the vibe they’re chasing, list each friend’s interests, and instantly get venues and experiences that fit everyone. A FastAPI backend pulls live Google Places data, a Gemini call summarizes the plan, and the frontend presents the results with match scores and a radar chart so you can see how the picks line up with both the prompt and each friend.

Frontend (React + TypeScript + Vite)

  • State & Form: The main App.tsx holds the search form (prompt, location, optional budget) and a dynamic list of friends (name + likes/hobbies). Users can add or remove friends; only people with actual interests impact the scoring.
  • Hero section:
    • Displays Gemini’s natural-language summary and keyword chips after a search.
    • Includes friend editors and quick suggestion chips.
  • Results panel: Shows 40 activities max with:
    • Image, address, price, summary
    • Overall match bar (% fit based on prompt + friend interests)
    • “Details” and “Map” links (Google Places URLs)
  • Match panel: Custom radar chart (SVG) that plots prompt fit plus per-friend alignment; a legend lists each axis with percentages.
  • Map panel: Sticky card embedding Google Maps for the selected activity and showing tag chips.
  • Styling: CSS-only (no Tailwind), Poppins-inspired typography, glassmorphism treatment, responsive down to mobile.

Backend (Python 3.11 + FastAPI)

  • Endpoints:
    • POST /api/v1/agent/discover – primary entry point.
    • POST /api/v1/activities – fallback direct Google Places search (kept for low-level calls).
  • Gemini integration: backend/agent_workflow.py uses google-generativeai (Gemini Flash by default) to parse the user prompt and produce a short summary plus suggested keywords. If Gemini isn’t available, it gracefully falls back to deterministic keyword extraction.
  • Google Places: backend/tools.py hits the Places API using the prompt/keywords, builds booking URLs, maps URLs, and enriches each result with location and metadata (address, price, etc.). Mock Cambridge data is used only when APIs fail.
  • Match scoring:
    • After data returns, the backend doesn’t do heavy scoring; instead, the frontend combines Gemini keywords with the activity description and calculates similarity scores for the prompt and each friend, including basic stemming.

Data Flow (Start to Finish)

  1. User input: Prompt + optional location/budget + any number of friend profiles.
  2. Frontend request: invokeAgent sends those details to /api/v1/agent/discover.
  3. Gemini summary: FastAPI calls Gemini for a summary and keyword list; if the call fails, we still derive keywords heuristically.
  4. Places lookup: Backend queries Google Places with the prompt/keywords (and location/budget hints).
  5. Response: Up to 25 activities are normalized (ID, title, summary, lat/lng, booking and map URLs, tags).
  6. Match computation (frontend):
    • Builds a text “haystack” from the activity description, tags, and Gemini keywords.
    • Scores the prompt and each friend against this haystack → normalized 0‑1 scores (never all zero thanks to fallback).
  7. UI update:
    • Activity list populates with match bars.
    • MatchPanel renders the radar chart.
    • Map panel highlights the selected activity.
    • Gemini summary and keyword chips show in the hero.

Tech Stack / Tooling

  • Frontend: React 18, TypeScript, Vite, plain CSS modules, ESLint, npm scripts (npm run dev/build).
  • Backend: FastAPI, Pydantic 2.x, google-generativeai, httpx, uvicorn, Python standard logging.
  • APIs: Gemini (language understanding and summary) and Google Places (live venue data).
  • Build/Deploy:
    • Backend typically runs via uvicorn backend.api:app.
    • Frontend builds with Vite and can be deployed to Netlify or similar static host.
  • Testing / sanity: npm run build, python3 -m compileall backend (lightweight compile check).

Challenges

Crafting an intuitive UI that visualizes group compatibility : radar charts, match bars, and vibe summaries without overwhelming users. Ensuring efficient coordination between Gemini’s language output and real-time Google Places data through FastAPI, while keeping response times low.

Key Features and Accomplishments to Highlight

  • Dynamic crew profiles—users can add/delete friends and define hobbies in free text.
  • Gemini summarization + keyword extraction to guide the search and description.
  • Live Google Places results with direct “Details” and “Directions” links.
  • Custom matchmaking logic, visualized via radar chart and match bars.
  • Fully responsive glassmorphism UI matching the Challo brand palette.

This architecture keeps the artificial intelligence simple yet effective—Gemini and Places do the heavy lifting, while the frontend provides an interactive lens tuned to group dynamics.

We’re Proud Of building an AI-integrated pipeline where Gemini and Google Places work together : turning natural-language into real, bookable experiences. Designing a clean, interactive UI that makes complex AI reasoning (match scores, radar charts, and summaries) feel simple and social.

Built With

Share this project:

Updates