rafalploszka / beerfinder

React app to help you find a perfect beer for the day! 🍻🍻🍻

BeerFinder

Brief Description

An app for browsing BrewDog's Punk API with some handy features.

Features

General

• User knows at all times, that something is being loaded (e.g. spinner/fake content)
• Application is responsive and works both on desktop and mobile devices

Listing view

• User can see 20 beers on the first page
• Each beer on the list displays: name, image, tagline
• On bigger devices items appear in a grid and on smaller resolutions they wrap in a column
• User is able to see more beers as she/he scrolls down (infinite scroll)
• If there are no more items to load user sees that’s the end of the list and no more requests are triggered

Details view

• Details view is a modal, accessible by clicking on any item on the listing view or by manually entering the page using it’s URL address (e.g. /details/:id)
• The modal contains the following informations: name, tagline, description, image, brewer_tips, ibu, abv
• Additionally, modal also lists up to 3 similar beers (e.g. beers with similar IBU/ABV/EBC)

Some more features

• Custom beer finder, that builds search query from user's preferences
• Ability to add beers to 'favorites' via localStorage
• Ability to search for a certain beer
• Further utilized API in detailed view route (more recommendations, ingredients list)
• Error handling (wrong input, no search results)
• Pretty D.R.Y and formatted for readabilty code with comments where necessary
• More routes and improved layout over the requirements and mocks
• Made from scratch in under 72h ;)
• And waaaaay more good stuff!

Further development

• Some jest/enzyme snapshot tests and even better error handling
• Further reduction of components' size and reusability improvements
• Theme toggle from light to dark/high contrast

Prerequisites

If you want to make some changes, first you have to have Node with npm installed.

Installation

After cloning this repository, in the project directory, you have to install dependencies:

npm i

Then you should run:

npm start

App should be running in your browser. Give it a try!

Built With

• React - king of all JS frameworks (well, for me at least)
• React Router - for routing purposes
• React Burger Menu and React Responsive - for better mobile experience
• Semantic UI React - legendary UI framework wrapped with React
• CRA for Webpack, Babel and all the good stuff
• Express - Web framework for Node.js which needs no introduction