🔍🍺 Punk API Beer App

Link to live deploy

This is a beer finder site which I created by using Punk API. I have recently graduated from the School of Code however this site was created in 2021.

Table of contents

• Running Locally
• Description
• Challenges
• Overview
  • My Goals
  • Screenshot
• My Process
  • Built with
  • What I learned
• Author

Running Locally

Since this site is made with HTML, CSS and JavaScript it doesn't require any setup or installing NPM modules. Simply clone or fork the repo onto your local machine and open the index.html file using your web browser. It looks great in Chrome, Firefox and Safari!

Description

This was my first taste of utilising an external API and really cemented some core principals about RESTful APIs. It was great way to practice with fetch, async/await and promises. I researched how to create card overlays in hover states. The additional information is displayed when users show interest but doesn't clutter the screen by default. I think this really adds to the UI of the site.

Challenges

• The biggest issue was working with the API and testing it to see what information returned
• Creating the pagination manually without any external libraries or NPM modules took time but I'm happy I got the logic working
• Getting the beer overlay to fit perfectly over the card was difficult but using calc sorted it out!

Overview

My goals

Users should be able to:

• Filter Brewdog beers by Alcohol Vol(ABV) and Hoppiness(IBU)
• Go through the filtered results by using the pagination buttons
• Hover over any beer and read further information in the overlay

Screenshot

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• ES6 features like Promises, Async/Await and Fetch

What I learned

The main things I learned were fetching data from RESTful APIs, reading documentation which isn't always clear and practicing using ES6 features in JavaScript.

Author

• LinkedIn - @chiragmehtauk
• Twitter - @chirag_uk