Digital Six Junior Technical Test

Project Brief

A brand new client named “bright water” has asked you to produce an ecommerce store using commerce.js so customers can view their products online. The client sells water bottles and assorted accessories. Your job is to produce a home page with a top banner/hero banner at the top of the page, and a list of the products they sell underneath. They also want a product page for each product, so when a user clicks on one they can see more details about the product. The styling of the page is completely up to you so feel free to be creative, however they have provided some examples of competitors sites that they really like the look and feel of, so feel free to use these as examples.

Competitor 1: https://www.chillys.com/

Competitor 2: https://www.livelarq.com/

Instructions

Please visit https://gitlab.com/sean.mahoney/digital-six-junior-technical-test and clone the repo to your local machine. Please set up the project and start the local dev server. Ensure that you have the latest version of Node.js installed on your machine. You should find that most of the components, pages and routing you need is already set up. However feel free to edit this as you see fit. The product data should also already be set up and ready to use.

Step 1. Create a homepage for the brand.

Using the existing code and components create a homepage with navigation, a footer, top banner section and a product list that displays all of the products. The product list should feature product cards, with an image, product name, price and a button that reads “view more”. Once clicked this button should navigate the user to that specific product page. Style however you want, be as creative as you like. Bonus points for mobile responsiveness.

Step 2. Create a Product page

Create a full product page that will dynamically change content based on the product chosen from the product list by the user. This page should feature an image section, product name, product description, price and an add to basket button. The add to basket button does not need to function. Again be as creative as you like the styling of the page is completely up to you. Once again, bonus points for a mobile responsive design.

That's it, feel free to add more to the site if you wish to do so.

Step 3. Submit your work.

Once you have finished your work please either place it in a .zip (Without the node modules) and send it back to me at [email protected] or host it on your own public GitHub/Gitlab and send me the link so I can review it. Thanks.