https://github.com/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
https://github.com/martinbryant/beer_engineer

material-ui react react-router redux

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/martinbryant/beer_engineer
• Owner: martinbryant
• Created: 2018-06-10T18:11:39.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-02-28T00:24:12.000Z (over 1 year ago)
• Last Synced: 2023-06-02T11:23:07.557Z (over 1 year ago)
• Topics: material-ui, react, react-router, redux
• Language: JavaScript
• Homepage: http://martinbryant.io/beer-engineer/
• Size: 5.6 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Beer Engineer

[![CircleCI](https://circleci.com/gh/martinbryant/beer_engineer.svg?style=svg)](https://circleci.com/gh/martinbryant/beer_engineer)

Inspired by [5 Projects To Complete When Starting to Learn Front-End Web Development](https://medium.com/@GarrettLevine/5-projects-to-complete-when-starting-to-learn-front-end-web-development-48e8a1ce3178 "medium.com")

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](https://martinbryant.dev/beer-engineer/ "Beer Engineer") 

## 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](https://medium.com/@GarrettLevine "Garrett Levine on Medium") - Thank you for the great article