Frontend Technical Challenge

'We've been asked to rebuild the Moonpig website using the latest best practices and you are part of a team working on the proof of concept. We'd like you to build out a simple page which will display a list of cards that a customer can buy using our API.'

User stories:

As a customer I can view a list of available cards on my mobile, tablet and desktop so that I can celebrate my new job

As a customer I can view more details of a card so that I can decide it's the right card for me before purchase

Pages

Card Listings Page

Card Details Page

Prerequisites

This application requires Node.js and NPM. If using a package manager, the latter ships with the former.

Installation and Quick start

To run the application,

1. Clone the repository

2. Navigate to the project directory

3. In terminal, run

   $ cd frontend

   $ npm i

   $ npm start

Tools, libraries and frameworks

This application was bootstraped with Create React App and uses Material UI Component library for an enhanced User Interface.

It is statically hosted with Firebase at (https://moonpig-frontend-test.web.app/) and (https://moonpig-frontend-test.firebaseapp.com/).

Testing

This application uses React Testing Library for testing.

To run tests, within frontend run:

$ npm test

Due to unresolved, local issues with my machine, however, I was not able to configure Jest (or other JS Testing framworks) to work correcty.

Had I been able to, I would have conducted more extensive testing of the CardDetail and CardList components.

Specifically, I would have conducted...

Positive tests

CardDetail

• Tested the fetch request within useEffect() returns Status 200.
• Tested that either the cards state is none null/none empty or that Card components appear on screen.
• Tested that either the length of cards state is equal to the number of Card components that appear on screen.

CardList

• Tested that an error is logged in console when the wrong endpoint is used within useEffect()
• Tested that the error messages is displayed when the wrong endpoint is used within useEffect()
• Tested that no cards are displayed on screen when a wrong endpoint is used within useEffect().

Negative tests

CardDetail

• Tested the fetch request within useEffect() returns Status 200.
• Tested that all of the card detail elements render on screen.
• Tested that the image of the card changes when the cursor hovers over the image.

CardList

• Tested that an error is logged in console when a wrong endpoint (incorrect MoonpigProductId) is used within useEffect().
• Tested that the error messages is displayed when a wrong endpoint is used within useEffect().
• Tested that none of the card detail elements are displayed on screen when a wrong endpoint is used within useEffect().