Given client specifications for functionality and the mock up pictured below, my team was tasked with standing up the front for a clothing E-tailer. I was specifically responsible for the Product Overview (top section), which is demo'd below. Using a list of provided API routes to retrieve information about any given product, I built and deployed (on an AWS c2) this fully functional user interface in about a weeks time.
This is what I was attempting to recreate, with a hint of my own flavor!
Here is a look at some of my planning and visualization before diving into the build, including wire frames and what became a very helpful react component/state tree.
A challenge here was formatting in a uniform fashion with a set of images that varied greatly in size!
This was the most technically challenging functionality to build. The zoom on mouse over required superimposing a much larger version of the given image, and calculating it's ideal position relative to the mouses location in the standard image. It was fun to needle away at an algorithm which would account for the variety of image sizes that accompanied each product and style!
I opted to create my own dropdowns using vanilla CSS and React to accomplish what felt like a more cohesive UI in place of standard HTML. This gif also displays a different product (one of thousands) that could be selected for viewing!
