Yelpington: App

In this project, you will pair up and work with other teams to create an online directory of restaurants in Burlington.


  • JSON
  • AJAX
  • Maps


learn how to...

  • structure data in JSON files
  • load JSON files into a JavaScript app
  • display embedded maps on a web page


As specified in the Yelpington Repo project, we will need JSON formatted like this:

  "id": "joes-diner",
  "name": "Joe's Diner",
  "address": "123 King St.",
  "phone number": "555-1221",
  "hours": "7:00 am - 3:00 pm",
  "notes": [
    "Their sriracha breakfast sandwich is quite good.", 
    "Every Thursday is meatloaf day."

Note that we are defining our own id format: all lowercase, no spaces or symbols, kebab-case, same as the base file name. This is not the same as an HTML element id; it's a primary key for our database. (Yes, in this context, the filesystem is a database.)

We will also need a file named all.json which contains a list of all the ids, e.g.:


To launch a file server, first run npm install (once), then run npm start and visit e.g. http://localhost:8080/all.json


Zero Pull Requests

Check and if any open PRs have your name on them, finish them up and get the PRs accepted or closed.

Show Restaurant

Given the id of a single restaurant (e.g. joes-diner)

When the user visits http://localhost:8080/restaurant.html#joes-diner

Then they should see all the restaurant information, formatted and styled nicely

NOTE: Use AJAX or Fetch to load the data.

Note: the Fetch API does not work well with the file:/// URL scheme. We've added a simple node app that serves files from a local server. Install it with npm install and run it with npm start

Hint: To access the current page's path -- to get from http://localhost:8080/restaurant.html#name into name -- use this incantation:

let name = document.location.hash.slice(1)

(slice(1) removes the / from the hash field of the document.location URL object.)

Show Restaurant Map

Given the id of a restaurant (e.g. joes-diner)

When the user sees the restaurant's page (e.g. /joes-diner)

Then they see a Leaflet web map, centered at that restaurant's location

You must decide how and when to look up the restaurant's Latitude/Longitude, and whether to do it automatically or manually.

Nominatim is a good option. Try Main St.,Burlington,VT&format=json

Read more about the Nominatum API here:

Show All Restaurants (list)

When the user visits http://localhost:8080/

Then the user sees all restaurants as a list with links to the respective restaurant pages

Show All Restaurants (map)

When the user visits http://localhost:8080/ with no query string

Then the user sees all restaurants as "pins" on the embedded map

And clicking on a pin visits that restaurant's page

Formatted Notes

Given markdown-formatted text inside a notes item

Then the page should render it into HTML before inserting it into the page


JSON: "notes": ["##Mr Mikes\nThe pizza is **awesome** here!"]


<h2>Mr Mikes</h2>
<p>The pizza is <strong>awesome</strong> here!</p>


Mr Mikes

The pizza is awesome here!