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...
- Your theme should be as close to the design as possible. We're looking for you to use the same fonts (from Google Fonts), sizes, letter spacing, element spacing, etc.
- We'll be testing your theme at all browser widths, so the design should flow regardless of browser width.
- Don't worry about links going to specific pages. All we'll be testing are the elements and functionality listed above.
On the development side...
- Your code should be clean and consistent.
- We'll be looking closely at your preferred methods for JavaScript and CSS. We're fans of ES6 and keeping libraries to a minimum.
- Code should be placed in the appropriate files.
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:
- Title
- Two featured collection spaces, including a collection image and title. It should look similar to this once created:
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.