A Cheerful App to Beer You Up
A React website for the best fictional beer company in the observable universe. It uses PunkAPI to get beers. Made by this humble self-taught programmer in hopes of landing the job he desires.
I believe in open source. As with all my other open-source projects, this one is effectively uncopyrighted. However, in compliance with the subject matter, I've decided to include the Beerware license. It's as permissive as it gets, plus it involves beer.
Always stays on the top of the page, and allows users to navigate between browsing the beer catalogue and inspecting their favorite beers.
The initial page users see, where they can browse the first 100 beers supplied by PunkAPI. Each beer card has a modal with more info that opens when the card is clicked, and an option to add this beer to favorites. There's also a mini-header with two search options: search by food pairing (default, as per spec) or by beer name (not listed in specification, but I thought it would make a useful addition). Upon input to the search field, the results are automatically updated to include only beers that fit the user's search.
This page only shows beers the user marked as favorites. Each beer also has a raiting option, that allows the user to rate a beer from 1 to 5. The option to toggle favorite appears, but upon clicking it, the user is asked to confirm removing this beer from favorites, with an option to see the beer's modal again. There is no mini-header for search.
npm install
npm start
src
|-App
| |-Beer
| | |-AddToFavorites
| | | |-WarningDialog
| | |-Modal
| | |-Rating
| |-Browse
| | |-SearchHeader
| |-Favorites
| |-Header
|-store
|-utils
I chose to manage state with MobX, learning and using it for the first time. Before this project, I've mostly used Redux for state management. However, having used Easy-Peasy (which I love) in my last couple of projects, I got a bit rusty with Redux. Seeing that the specification for the project listed MobX or Redux as a must, I thought, "heck, I should probably give MobX A try sometime anyway". I don't regret it one bit - MobX is awesome! I'll probably use it more in the future.
Routing is done with React Router, and is quite simple. there are two routes:
- the initial
/route, leading to the Browser component - the
/favoritesroute, leading to the Favorites component
The whole app is responsive and ready for usage on phone, laptop, tablet or any other device.
Iv'e used many of Material-UI's components, including AppBar, Card, Dialog and Button. However, no component was left uncustomized :)
As Material-UI does most of the styling heavylifting, my CSS files are pretty basic. Every component in the project has a matching CSS file, although some of them are empty. I like to use this file structure pattern as a default.
Somewhere along the development process, the Browse component became slow. I only discovered it close to submission time, so fixing it wasn't an option, but I believe it's a rather simple optimization fix.