lab-ironbeers

You can see this web here ———–> https://fermarinsanchez.github.io/lab-ironbeers/.

logo_ironhack_blue 7

LAB | Express IronBeers

Introduction

Sometimes you would just like to have a very descriptive list of all beers so you could see their type, color, each beer’s percentage of alcohol, or which beer is well pared with some food. In this lab, you will create a web app where the user will be able to see a list of beers, get random suggestions, and read a very descriptive explanation of each beer.

“How will we get all of this information?”, you might ask. Well, we will be using an npm package :package: as our data source.

For this exercise, we will work with the PunkAPI npm package. In the background, the package communicates with a remote database that contains all of the beers. The package enables us to use its methods that can help us to retrieve beers. Each beer has some properties, and we can play around with this data to practice working with Handlebars templates, layouts and partials.

In this lab, we can also practice reading external (PunkAPI) docs and learn how to get what we need from the database.

Requirements

Submission

$ git add .
$ git commit -m "done"
$ git push origin master

Instructions

Iteration 0: Initial setup

To run our application, the first thing you have to do is to install all of its dependencies. Run the following command:

$ npm install

To run the app:

$ node app.js

# you can also run: npm start

Iteration 1: Layout barebones

Our starter code includes the basic configuration needed to run our app. The / route is set to render the index.hbs file. Let’s start by creating a layout.

Inside of the views folder, create a layout.hbs file. In the bonus iteration, you can give your app some style, but for now, let’s focus on the logic.

Remember to add the } to the main layout.

Add a navbar that includes links to 3 pages:

Layout done, let’s move to creating these three pages.

Iteration 2 - Home page

image

Iteration 3 - Beers page

The next thing we will be working on is a page where we can present all the beers we will retrieve from the remote database. This page will be rendered every time the user visits the the /beers route.

This leads us to the conclusion that in this step, we have the two main focus areas:

Iteration 3.1 The /beers route

In this step, we will have a couple of micro-steps:

The example of how this method works is shown below:

punkAPI
  .getBeers()
  .then(beersFromApi => console.log('Beers from the database: ', beersFromApi))
  .catch(error => console.log(error));

3.2 The beers.hbs view

Now, when you click on the Beers link on the top navigation or on the Check the beers button, you should be able to see all the beers. Boom! :boom:

Iteration 4 - Random beer page

As in the previous step, we will have to focus on creating a route to display a random beer. When a random beer is retrieved, we have to pass it to the view.

4.1 The /random-beer route

The example of how this method works is shown below:

punkAPI
  .getRandom()
  .then(responseFromAPI => {
    // your magic happens here
  })
  .catch(error => console.log(error));

4.2 The random-beer.hbs view

image

Now, every time the user clicks on the Random beer link in the navbar or on the Check a random beer button on the home page, they should see this page with a new, random beer.

You’ve just finished all the mandatory iterations. Good job!

Let’s proceed to the bonus iterations.

:::info On every iteration, you should render a partial passing the information regarding the corresponding beer. :::

Bonus: Iteration 5 - Beer partial

Partials represent templates that are likely to be reused.

Let’s see what beer properties we display on the /beers (the beers page) and compare them with the properties we displayed on the /random-beer (random beer) page:

properties/ page /beers /random-beer
image :white_check_mark: :white_check_mark:
name :white_check_mark: :white_check_mark:
description :white_check_mark: :white_check_mark:
tagline :white_check_mark: :white_check_mark:
food pairing :x: :white_check_mark:
brewer tips :x: :white_check_mark:

As we can see, we have 4 in common properties, which means our code could be a bit more DRY if we refactor it using partials.

You should create a partial to show each beer.

hbs.registerPartials(path.join(__dirname, 'views/partials'));

After creating the partial, and looping over the array of beers, on our /beers route, we should have the following:

image

Our code shrunk by a lot just because we managed to create a reusable piece of code (the partial), which we can now place wherever we need to use this set of properties.

Bonus: Iteration 6

Make all the beers on the beers page clickable. If users click on a specific beer, they should be able to see a page with the detailed information of that particular beer. You can reuse the same partial you used for iteration 5. As a matter of fact, you should. That’s what partials are for. The trick is to wrap an anchor tag around every beer that has the beer id in the href property. Something like:

<a href="/beers/beer-i3f4d34s34b"><!-- name of the beer --></a>

To understand how you can get the id from the URL, read this section of the Express docs.

To find out how you can get an individual beer from the punkAPI using the beerId, check out the .getBeer(id) method on the punkAPI docs.

Bonus: Iteration 7

The overall layout should look like this:

image

You will find the colors and fonts on the css file. Remember to link the css file to your main layout.

Let your artsy side shine! :sparkles:

Happy Coding! 💙