martinbryant / beer_engineer

Beer Engineer - Enable search of the Punk Beer api and display the search results whilst allowing the user to favourite beers. These favourites will be saved for any later sessions using local storage

Beer Engineer

Inspired by 5 Projects To Complete When Starting to Learn Front-End Web Development

I would recommend creating a similar app to giphy in layout, but one which allows you to have a ‘shopping cart’ or ‘favourite’ functionality. You should then be able to see a separate list of the items you favourited. This will of course not be saved to any database, but will bring a new set of challenges with managing application state.

I would recommend diving into a front-end framework to expand your ability and general understanding over modern web development. Because I work heavily with Facebook’s React I would recommend starting that, and using react create app to get started.

This might seem like a giant leap at first, but focus on building this web app piece by piece. Create the app in the following order;

• Template data on the page from a generic API request
• Add a search bar, which makes a separate query to a database on request
• Add favourite functionality which allows you to favourite a card
• Create a separate route (using react router) which allows you to see all the beers you’ve favourited in the session.

Beer Engineer using React/Redux/Material UI

Challenges

• Using and customising React Material UI for the layout
• Incorporating React Router and Material UI tabs for page navigation
• Design decisions on storing data to be retreived from local storage

Takeaways

• I have learnt an alternative way to apply styles to components
• I feel confident to use React Router in the future
• Spent some time researching Redux messaging patterns for project scaling

Acknowledgments

Garrett Levine - Thank you for the great article

beer_engineer's Issues

Grid items not centre aligned in results

fix page title

search button allows blank search on page load

Update dependency alerts

Fix dependencies in package.json

Fix layout of random beer search

Fix direct navigation to /search & /favourite pages

Shows 404 at the moment unless navigated to / first

API failure notifications are not accurate

Because of the try catch in the api request beers, the notification messages are displaying incorrect request failure reasons to the user. eg. cannot read property length of undefined.

Fix would be

• Dont use try catch
• Dont use several calls to the random api endpoint
• Use ids endpoint and generate single request to multiple ids, using Math.Random to generate random ids