BrewdogReact-based app

This React-based app lets you explore the beers brewed by Brewdog by accessing the free-to-use Punk API. by using the filters, you can explore all beers, by alcohol volume or by bitterness.

Upon mounting, the app calls Brewdog's API and displays the first page of results (25 beers). This API call is made using fetch() and is asyncronously called using react's useEffect(), which makes the fetch call after the App is mounted for the first time. The filters in the top of the page are wired with eventListeners, which in turn change the search parameter using React's built in function to update State. State is stored in Context and is updated accordingly by the filter buttons. UseEffect runs the fetch call again when these states are updated by the filters. The new incoming data is rendered in the page and replaces the old one.

The information provided by the API is displayed in cards using CSS grid and flexbox. Each card can be hovered to display further information about each individual beer.