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
- 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
- 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
Garrett Levine - Thank you for the great article