OSC Technical Assessment for a Frontend Engineer

Instructions:

1. You will be expected to write clean, modular, efficient code that meets the requirements of each aspect of this assessment.

2. You may use any third-party libraries or tools you deem necessary to complete the assessment.

3. You will be evaluated based on the quality, readability, and maintainability of your code with extra marks for good prioritisation.

The Brief

Using https://mock.shop/ build a product page where a customer can view the details of a product and add to basket/purchase.

You should display an image, product title, description, and an add to basket button.

The basket should be in the form of a mini basket and will require the following user stories to be actioned:

• As an online customer, I need to add a product to a mini basket, so that I can proceed to purchase.
• As an online customer, I want to view my mini basket, so that I can see all my products I have added to purchase.
• As an online customer, I want to update the quantity of an item in my mini basket, so that I can purchase more than one of the same item.
• As an online customer, I want to update my mini basket, so that I can add and/or remove an item.
• As an online customer, I want to view my mini basket, so that I can see the total value of my basket.
• As an online customer, I want my mini basket to always display the exact items I added no matter what page I am on, so that I am free to navigate throughout the store and never lose what's in my basket.

Assessment Criteria:

• Your ability to develop a functioning ecommerce application using HTML/(S)CSS, React, Node.js and any other related technologies
• Your understanding of web semantics and best practices for writing clean, maintainable, and efficient code
• Your understanding of building with accessibility in mind
• Your ability to demonstrate a flair for the finer details such as micro-interactions.

Submission

While we acknowledge that time constraints may lead to potential sacrifices in visual aspects, we emphasise that prioritising markup, class naming, and code structure is essential for this assessment. However, we also encourage a considerate approach towards the visual elements, ensuring they are given appropriate attention. If you could present your work in a Git version control repository hosting service such as Github, Bitbucket, GitLab, Codepen, Codesandbox etc and provide some form of a demo of your submission working.

Time Limit:

In order to ensure that your time is respected, we recommend that you dedicate as much time as you deem necessary to complete the task assessment. However, please keep in mind that we anticipate it should take no less than 4 hours. In the event that you are unable to complete the assessment within this timeframe, kindly provide documentation in a README outlining your proposed approach to finish the assessment.

Best of luck!