Skip to content
No description, website, or topics provided.
JavaScript CSS HTML PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
.editorconfig
.gitignore
.yo-rc.json
Readme.md
gulpfile.js
package.json
results.json

Readme.md

Front End Technical Test

Overview


You'll find attached a simple JSON file. We would like you to use HTML, CSS and JavaScript to read the JSON file and display it in as per the attached design file.

Let us know how long you spend on the challenge and please don't spend more than an evening on it.

Feel free to use any frameworks you would like to achieve the task.

Thanks and good luck!

Additional tasks (maybe pick a couple, but only if you want to or have time!):

  • Sorting - What sorting options could we consider
  • Filtering - Expand/collapse the filters, apply filters, any filters not in the design we could add?
  • UX – add custom selects, checkboxes, fonts, hover states, icons, loaders
  • Product variations – handle the colour swatches, sale tag, was/now pricing
  • Responsive - how could the page look at other resolutions?
  • Performance – optimize the page, let us know what you did
  • Accessibility – how could the page be made more accessible?
  • SEO – include or make some basic SEO recommendations

How to run


  1. Make sure you have Node v6 or higher installed
  2. npm install
  3. Run gulp watch
  4. Go to http://localhost:9000 from your browser

Technology Stack


  1. React JS
  2. Gulp
  3. Browserify
  4. Watchify
  5. Babelify
  6. Sass
  7. Bootstrap - Twitter Bootstrap's official Sass version
You can’t perform that action at this time.