Feedback

[DanForder]

Site

• Your design and cards are simple but effective, all the info required and images are displayed correctly.
• The site is not super mobile-responsive, I would like to see more attention paid to the card container grid stylings here. However this isn't a big deal as the focus was on React for this project.
• The search input and filter checkboxes work effectively on the first 80 results received from the api which is great to see. Next steps would be to link up the search input with the beer_name parameter on the fetch request.
• Your <input/> needs a <label> associated with it for accessibility purposes, right now we don’t know what the search box is actually for without using it! You’ve done this correctly for most of the filters (although make sure htmlFor matches the correct input id for the last checkbox).

Code

• I like how you’ve set up your filter logic, each a boolean state value that can be easily modified
• I’d like to see you using more meaningful variable and function names, for example you have a variable called filterBeers, but actually it is an array not a function (filteredBeers would be better). Similarly we update the state filters with phFilter but a more suitable function name would be togglePhFilter (a function should be a verb!)
• Remove unused/ commented code (nav.jsx) too much of this makes the project messier to read (potential employers might be looking through your projects soon!). It’s absolutely fine to use that as a guide when you’re developing, either don’t commit it or remove when you’re finished.

Overall most of your React code is looking good, I’d like to see you manipulate the fetch for the API a bit more, so we can search the whole catalogue of beers rather than the first 80 beers. Have a think about how you might change the query parameters of the request (check the punk api docs) to get back high-alcohol beers or specific beer names!

[ahmedhomar]

Thanks for the feedback Dan. Super helpful.