Beer Engineer in React/Redux/Material UI

Description

Project Brief

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.

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

Technology