Formulate

Pick a Spot for Lunch

For Teams

Use the Yelp API to find nearby open restaurants and help teams pick a spot for lunch

This form uses the Yelp Business Search API to find restaurants that:

Are open right now
Have a $ or $$ price rating
Are within a half-mile of your location

The actual API call to Yelp is hidden behind a Cloudflare workers script that simply makes the request and attaches CORS headers to the response. Here's the code for the worker: https://gist.github.com/timothyandrew/56eea2c0639c04085f346f8a4988efef

Build Your Own

Build on this example by creating an editable copy of this form.

/**
 * The endpoint at this URL is a simple gateway to the Yelp API, and is required because:
 * 
 *   - Yelp doesn't send back CORS headers, so the API is inaccessible from a browser
 *   - It's safer to not put API keys in this script
 *   - Likewise for your location
 * 
 * This endpoint is implemented as a simple Cloudflare worker, and uses this code:
 * https://gist.github.com/timothyandrew/56eea2c0639c04085f346f8a4988efef
 */
const ENDPOINT = 'https://formulate-gallery-lunch.0xfff.workers.dev';

export default async function () {
  let response = await form.fetch(ENDPOINT);
  let {businesses} = JSON.parse(response.text);

  let {index} = await form.multi(
    'Ok, I found these nearby restaurants that are currently open. Where do you want to go?',
    businesses.map(b => ({
      label: b.name,
      value: b.id,
      image: b.image_url,
    })),
  );

  let selected = businesses[index];
  await form.statement("Thanks, hit **Submit** below to record your response. 💪", {
    buttonText: 'Submit',
    description:`
You picked ${selected.name} at ${selected.location.address1}.  
[Yelp URL](${selected.url}) and [Phone](tel:${selected.phone}).
    `
  });
}