Build a product page for a cosmetics shop using the Makeup API
Users should be able to filter and/or sort the page somehow (e.g. show only products by COVERGIRL, sort items by price...)
This was a solo project undertaken at Codeclan in Glasgow utilising a local version of the Makeup API ((https://makeup-api.herokuapp.com/) . It was used to gain familiarity with the React framework and work on filtering and sorting a dataset.
The application is fronted by a product container which is composed of a HeaderImageSet component and a ProductList component which themselves are made up of subcomponents (Products, FilterBy button and SortBy button).
The HeaderImageSet displays 6 random images from the displayed dataset. If the products are filtered down then the 6 random images will be from that filtered dataset. For example if the products are filtered by the brand Glossier then only Glossier products will be displayed.
- Vanilla JavaScript (http://vanilla-js.com/) :)
- HTML5 (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)
- CSS3 (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3)
- JSON (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)
- React (https://reactjs.org/)
- Makeup API (https://makeup-api.herokuapp.com/)
- Peter McCready