Frontend Developer Technical Test

Introduction

This is the technical test for our frontend developer position. We have created a Figma design file with all design elements for desktop and mobile ready for you to code. Your task is to take these designs and build a Shopify theme for this specific page.

There are two parts to this test - the Shopify component and the VueJS component.


Shopify Buildout: The details

This is where you'll be spending most of your time, so we want to make sure you're strong on the Shopify theme development front.

Mega Menu

When hovering over the first "Category" link, a mega menu should appear with four groups of links and an image with a caption.

Quick View

Clicking on the "Quick View" button (which should appear when hovering over a product) should trigger a modal with product information, and this "Add to Cart" button should add the item to the cart without closing the modal and update the cart state to reflect the new cart count.

(Optional) Featured Product Slider

Create a Shopify section to preview a collection of products in a slider. You can choose which slider script you'd like to use, as long as the website matches the design.


What we'll be looking for

On the UX/UI side...

On the development side...


Get started

To get started, you'll need to create a Shopify development store.

This Shopify theme should be built with Slate v1. Make sure you have all necessary requirements set on your computer by following the instructions in the aforementioned link.

Run yarn create slate-theme taproom-test to begin working on your theme.

Build out the page with the requirements mentioned above. Create a GitHub repo to share with us and send over the myshopify URL so we can request collaborator access.


VueJS Component Creation: The details

In this part of the technical test, you'll be creating a headless store using Nacelle. The only requirement here is to create a component.

Create your Nacelle store 

Sign up for an account at dashboard.nacelle.com. Create a new space and connect your Shopify store. You can follow getting started instructions in the docs here.

Create one homepage component

Once you're up and running, create a component contains the following props:

Don't worry about styling or the images you select here. Feel free to grab random images from the web.

The goal of this task is to make sure you know how to create a component with two child components.

Full documentation for creating new nested homepage components is available here - I encourage you to use this documentation. Please reach out if you run into any issues - I'm more than happy to help.


Questions?

If you have any questions or run into issues, send an email to kelly@thetaproom.com.