willsono

A submission to a William Sonoma coding challenge.

Given a JSON file with an input of products designed a page that meets these criteria:

• Consumes the JSON of products
• Builds the product details page with all products
• Displays the product details, including price, product name and the main hero image
• Interacts intuitivley; if you click on the image, you should see an overlay with a carousal of all thumbnail images

Additionally, I built a responsive experience where it is 1 column for mobile and 3 for desktop. Also took extra care to make the page completely accessible by keyboard and eliminated all tab traps. Added a sorting options at the top that sorts by alphabet, highest price and lowest price. Built this all in pure vanilla javascript with no frameworks.

View Live Demo

• https://agile-river-35869.herokuapp.com/

Getting started

1. Install (if you don't have them):
   • Node.js: brew install node on OS X
   • Brunch: npm install -g brunch
   • Brunch plugins and app dependencies: npm install
2. Run:
   • npm start — watches the project with continuous rebuild. This will also launch HTTP server with After running npm start open a browser and go to localhost:3333 to view project.