Yelpington: App

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

Tech

  • JSON
  • AJAX
  • Maps

Goals

learn how to...

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

Design

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.:

[
    "joes-diner",
    "burger-queen",
    "pizza-shack"
]

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

Backlog

Zero Pull Requests

Check https://github.com/BurlingtonCodeAcademy/yelpington/pulls 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 https://nominatim.openstreetmap.org/search/?q=182 Main St.,Burlington,VT&format=json

Read more about the Nominatum API here: https://nominatim.openstreetmap.org/ https://wiki.openstreetmap.org/wiki/Nominatim

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

Example:

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

HTML:

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

Result:

Mr Mikes

The pizza is awesome here!