/candidate-react-dishwasher-app

This was originally a test set which I have since dropped into a fresh instance of Vite to continue building out

Primary LanguageTypeScriptMIT LicenseMIT

Dishwasher App

This was originally a test set for JLP, which I have since dropped into a fresh instance of Vite to continue building out.

✔️ Code in pure React / TypeScript

✔️ No jQuery

Original specs

More can be built out here as per the original specs of the test listed below.

Brief

Your task is to create a website that will allow customers to see the range of dishwashers John Lewis sells. This app will be a simple to use and will make use of existing John Lewis APIs.

We have started the project, but we'd like you to finish it off to a production-ready standard.

Product Grid

When the website is launched, the customer will be presented with a grid of dishwashers that are currently available for customers to buy.

For this exercise we’d be looking at only displaying the first 20 results returned by the API.

Product Page

When a dishwasher is clicked, a new screen is displayed showing the dishwasher’s details.

Designs

In the /designs folder you will find 3 images that show the desired screen layout for the app

  • product-page-portrait.png
  • product-page-landscape.png
  • product-grid.png

Things we're looking for

  • The website should be fully responsive, working across device sizes. We've provided you with some ipad-sized images as a guide.
  • The use of third party code/SDKs is allowed, but you should be able to explain why you have chosen the third party code.
  • We’d like to see a TDD approach to writing the app, we've included a Jest setup or you can use your preferred option.
  • Put all your assumptions, notes and instructions into your GitHub README.md.
  • We’re looking for a solution that's as close to the designs as possible.
  • We'll be assessing your coding style, how you've approached this task and whether you've met quality standards on areas such as accessibility, security and performance.
  • You shouldn't spend more than 3 hours on this task.

Available Scripts

In the root directory you can run:

npm install

Will perform a usual installation of any dependencies.

npm run dev

Will perform a usual launch of the dev environment.

npm run test

Will perform a launch of the test suite; generating a fully 100% covered report.

NOTE1:

I installed start writing Jest unit-tests for this - however the live API has a CORS blocker on it resulting in "Error: Cross origin http://localhost forbidden"... to get over this when hosting I have a switch on live to pull data from local JSON mocks

NOTE2:

As this is a Vite app, I hosted it on GitHub pages using this guide:

https://medium.com/@aishwaryaparab1/deploying-vite-deploying-vite-app-to-github-pages-166fff40ffd3