My work can be found at: https://albertadevor.github.io/archindex_engn1010/
You can also run it through $ npm install $ npm start
and navigate to localhost:3000
I used React-Bootstrap for styling and built the app using create-react-app.
I decided to use a clean looking white card look for the products. I thought this would make it easy to understand the differences in products.
I decided to put the filter bar on the left, and the sorting on the top. I decided to separate these two components (instead of putting all controls in one place) so that the user's mental model of these things would be that they are different and do not control the same thing. If they were placed together there was a risk that the user would be confused why the filter options weren't sorting and the sort options weren't filtering.