Bootcamp
Search…
3.ICE.1: Bigfoot

Introduction

Create an Express.js app that displays Bigfoot sightings.

Setup

Clone the Rocket Bigfoot Express repo. This repo contains a data.json file with Bigfoot sighting data.

Base

Get Sighting By Index

When the server receives a request to /sightings/<INDEX>, respond with the sighting in data.json that corresponds to the index in the URL.

Sample Request URL

1
http://localhost:3004/sightings/0
Copied!

Respond with HTML

Update the request handler callback to respond with HTML.

Sample Response with HTML

1
app.get('/sightings/:index', (request, response) => {
2
const content = `
3
<html>
4
<body>
5
<h1>hello</h1>
6
</body>
7
</html>
8
`;
9
response.send(content);
10
});
Copied!

Include Bigfoot Sighting Data in Response HTML

  1. 1.
    After successfully responding with HTML, use ${} expressions in template literals to include sighting information such as YEAR, STATE, and OBSERVED attributes in the HTML response.
  2. 2.
    Verify we send the correct HTML response by sending a request with curl.

Discussion Questions

  1. 1.
    What happens if the server does not send a response? What does that look like in the Chrome Network tab?
  2. 2.
    What happens if we send 2 responses from the same request handler, e.g. 2 calls to response.send?
  3. 3.
    What are other attributes in the Express request and response objects? console.log them to see.
  4. 4.
    Add an Express routing method to /apple that responds with "hello". Add another routing method to /apple (the same path) below the 1st that responds with "goodbye". Make a request to /apple. Notice that the request handler from the 1st routing method executes and not the 2nd. Verify this by moving the 2nd routing method above the 1st.
  5. 5.
    What are other methods we can call on the Express response object? Read more in Express docs here.

Comfortable

  1. 1.
    Create a route that lists all reports for a given year.
  2. 2.
    To prevent information overload, only display year and state information for each report in the list.
  3. 3.
    No need to format output in HTML.

Sample Request URL

1
http://localhost:3004/year-sightings/1989
Copied!

More Comfortable

Sort By

  1. 1.
    Use query params to determine how to sort the list of reports.
  2. 2.
    The list should be sorted by state by default. The query param can determine if we should sort results in ascending or descending order.
  3. 3.
    No need to format output in HTML.

Sample Request URL

1
http://localhost:3004/year-sightings?sort=asc
Copied!
We can retrieve the sort query param from the request.query object provided by Express in the request handler middleware function. Read more on Express query params here.