front-end-test

Sainsbury’s Tech Front End Exercise

In this exercise you will develop a product listing page and shopping basket. Your solution should:

• Be a website, using React
• Consume a JSON feed of products (see below) and display them on a page
• Allow users to add a product to their basket
• Allow users to view the products in their basket

Wireframes

The following wireframes show a high-level example of the application. You’re free to change this as you like.

Product API

Please fetch the products to be displayed as JSON from this URL: https://jsainsburyplc.github.io/front-end-test/products.json.

Tools, libraries and frameworks

Please build your solution as a website with React, as this is the library we use in most of our front end products.

Other than React, the choice of libraries, frameworks or tools used to develop the application is left open to you. We encourage you to use options you’re familiar with, and that you’d feel comfortable explaining the choices you make with them.

Your application will be reviewed on an up-to-date version of Chrome, but you’re free to include compatability for other browsers to enhance your application.

As part of the interview process, our engineers will review your code as well as your application. Please ensure the code you write can be shared with our team, for example through a GitHub or Bitbucket repository, or as a compressed folder.

Assessment

We will assess your application based on the following criteria:

• How clean, modular and extensible the code is.
• Suitability of tools, libraries and frameworks used (for both the app itself and any build processes involved).
• How it looks visually and the techniques used to style the application.
• Responsive web design techniques used and the approach used for layout.
• Testing.
• Accessibility.
• Anything above and beyond e.g. animation, routing.

We appreciate your time is important. Therefore, if you feel your unfinished code demonstrates enough for us to assess the application please leave some notes in your README.md explaining what you would do next given more time. We would be happy to review this.