Bootcamp
Search…
3.POCE.1: Express Noodle App

Introduction

Create a noodle recipe app using Express and recipe data provided by Rocket.

Setup

  1. 2.
    Express is already listed as a project dependency in package.json. After we fork and clone the repo, run npm i to install Express.
  2. 3.
    Find Rocket's list of recipes in data.json in the repo.

Base

Get Recipe by Index

  1. 1.
    Create the following route in Express.
    1
    /recipe/:index
    Copied!
  2. 2.
    Create a request handler that responds to the above route with a JS object with the relevant recipe data.
    1. 1.
      For example, a request to the following URL...
      1
      http://localhost:3004/recipe/0
      Copied!
    2. 2.
      ... sends back the following data.
      1
      {
      2
      "source": "BBC Good Food",
      3
      "label": "Udon noodle soup",
      4
      "url": "http://www.edamam.com/recipe/udon-noodle-soup-bf283c727cd11fb8ce42b98f09dabbac/noodle",
      5
      "ingredients": "1 vegetable stock cube\n50ml teriyaki sauce\n1 tbsp vegetable oil\n140g chestnut mushroom, sliced\n½ bunch spring onions, thinly sliced\n140g udon noodle\n200g bag spinach",
      6
      "yield": 4,
      7
      "caution": "Sulfites",
      8
      "image": "https://www.edamam.com/web-img/7b2/7b24a14c8756cc1db75eb216fb593e6d.jpg",
      9
      "category": "Vegan"
      10
      }
      Copied!

Server Error Checking

  1. 1.
    According to HTTP protocol, if a page or resource is not found, the server should respond with status code 404.
  2. 2.
    Detect when the index URL param references an invalid index. When it does, respond with the 404 status code and a relevant message.
  3. 3.
    We can set the status code and send the response in 1 line like the following.
    1
    res.status(404).send('Sorry, we cannot find that!');
    Copied!

Comfortable

Get Recipes by Yield

Yield refers to the number of portions a given recipe creates.
  1. 1.
    Create a route that responds with a list of recipes that match the yield number.
  2. 2.
    For example, the following URL would return a list of recipes that yield 1 portion.
    1
    http://localhost:3004/yield/1
    Copied!

More Comfortable

Get Recipe by Label

  1. 1.
    For SEO reasons we may want a route that has the label of the recipe in it. Create such a route that returns the recipe that matches that label.
    1
    http://localhost:3004/recipe-label/udon-noodle-soup
    Copied!
  2. 2.
    Note if the label has multiple words, it is represented in the URL path with lowercase kebab-case.

Reference Solution

Click here to see the reference solution for this post class.