An app for browsing BrewDog's Punk API with some handy features.
- 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
- 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 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)
- 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!
- 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
If you want to make some changes, first you have to have Node with npm installed.
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!
- 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