Skip to content

Feedback #1

@DanForder

Description

@DanForder

Site

  • Site is really responsive, cards are all uniform and the filter container changing from top to left is great. I would like to see the mobile version including the same checkbox functionality; we don’t want to make a worse experience for mobile users unnecessarily!
  • Your style comes through really well in this project, the site looks really fun but it’s not overdone.
  • You're doing extra requests for the checkboxes which is great, I would like to see you add logic to call the API when the search input is changed too. If you search for 'Tactical Nuclear Penguin' (id: 185) nothing shows up until you check 'Classic Range' which triggers another search.

Code

  • I want to see you refactor your three ‘check’ functions in App.jsx. The first two in particular or so similar... this could all become one check function! How could you find the checkbox label from the event argument to help you differentiate which one has been pressed?
  • In your Navbar.jsx, you’re wrapping the whole component in a div but it has no stylings associated with it. Just return that nav, keep it as simple as possible. Similarly with SearchBox.jsx, you have a div and label that aren’t used. Remove the div and use the label to add meaning to your input.
  • Your SearchBox component is being passed a name prop in Navbar.jsx, but this prop isn’t used/ doesn’t exist there. Remember to remove these unused props, if you come back to this project in a couple weeks/ months it’s going to be confusing.
  • CardList.scss: you don’t need to specify display: grid three times, just once will do! Only overwrite styles you want to change within media queries
  • Overally I’m really happy with your project, there’s just a few things for you to look at in regards to tidying up your project, then tackling the bugs you’ve noted + allow user to search all the beers in the API.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions