Since beers is one of the most demanded drinks between Ironhackers, we will create an app to display some of the best handcrafted beers. We will have something like the this:

For this project, we will be using an API so that we can retrieve the data of the beers. The root of the API is: https://ironbeer-api.herokuapp.com/beers, and the available endpoints are the following:

On each iteration, we will explain which endpoint you should use!

The IronBeers Project will include the following features:

• A Home Page with three different options.
  • All Beers
  • Random Beer
  • New Beer
• A List Beers Page where you should display all the beers.
• A Single Beer Page to display a unique beer by clicking on the List.
• A Random Beer Page where we display a Random Beer.
• A New Beer Page to show a form where a user can create new beers.

• Fork this repo
• Clone this repo
• A fully working React App
• Mobile first design

• Upon completion, run the following commands

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

• Navigate to your repo and create a Pull Request

Easy peasy! Using create-react-app you should build a new app. Feel free to name it as you want it, but if you need some inspiration, we called Reactive BeersJS.

Create the Home Page. The view should include three views:

• /beers
• /random-beer
• /new-beer

Feel free about the design, but here is how we did it:

On every view (except for the home), we should add a header with a link to the root of the app.

On the /beers route, we should display all the beers from the Database. So, in this case, you need to call the API https://ironbeer-api.herokuapp.com/beers/all. The API will return an array of Beers objects.

You should display the following from each of the beers:

• image
• name
• tagline
• contributed_by
• Also, add the link to check the details of each beer. The link should navigate to /beers/:beerId.

:::info The first time you call the API, it might take a bit to respond. It's hosted on Heroku, and it goes to sleep after 30 minutes, you know! 😉 :::

When a user click on one of the beers, you should display a detailed view of it, including the following fields:

• image
• name
• tagline
• first_brewed
• attenuation_level
• description
• contributed_by

On the /random-beer route, we will render a single beer that will be retrieved from the database. The endpoint will do all the job for us, so we need to call to https://ironbeer-api.herokuapp.com/beers/random. We should receive an object including all the info about a beer. The same way we did with the Single Beer view, we should render the following fields:

• image
• name
• tagline
• first_brewed
• attenuation_level
• description
• contributed_by

Finally, on the /new-beer route, we should render a form where user could create new beers. The form should include the following fields:

• name
• tagline
• description
• first_brewed
• brewers_tips
• attenuation_level
• contributed_by

Then, you should do a POST request to https://ironbeer-api.herokuapp.com/beers/new, passing all the data on the body object. If everything went ok, you would receive a 200 response from the server.

Notice that the fields on the body should have those specific names so the API can create a new beer.

:::info Since we did not cover how to upload images, do not worry about that, the API will assign a random image to the new beer. 🍺 :::

Yes! One endpoint left! But it is for the Bonus. On the /beers route, add an input where users can search for beers. Every time a new letter is typed, you should call to https://ironbeer-api.herokuapp.com/beers/search?q={query} passing the value of the input in the q param.

Awesome! Grab a beer! You deserve it! Now you are a React Warrior, keep training to become a Ninja!