Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bestbynature/crushingit-hackathon-challenge-submission

Crushingit-Hackathon-Challenge-Submission
https://github.com/bestbynature/crushingit-hackathon-challenge-submission

hackathon-project shopify-app vanilla-javascript

Last synced: 3 months ago
JSON representation

Crushingit-Hackathon-Challenge-Submission

Awesome Lists containing this project

README 

        

# [Live demo of my submission](https://bestbynature.github.io/Crushingit-Hackathon-Challenge-Submission/)



[![Crushing It](https://www.crushingit.tech/assets/img/logo.png)](https://www.crushingit.tech/hackathon/challenge)



Crushing Tech

Hello, Damilare!



View your submission

The Level Up Front Hackathon Challenge

Shopify dashboard



Hello Damilare,



The Hackathon challenge is a Figma design that you have to bring to life as a frontend engineer. The Figma design is an exact replica of the Shopify onboarding dashboard. This is the dashboard that is used by Shopify's 1.75 million merchants to sell millions in ecommerce products.



You are welcome to start immediately, and submit your solution before the 27th Nov.



Before you proceed, please watch the 5 min video below for an introduction to the entire challenge:



What's the point?



The essential purpose of a frontend engineer is to build solutions that solve the problems specific to a business. In this challenge, you will be required to recreate a production-ready dashboard used by Shopify's 1.75 million merchants globally.



The community

Since this hackathon is focused on growth, please join the Discord community to meet others completing the challenge, and also get resources to help your learning.



Join the conversation on Discord

About Shopify

Shopify is a user-friendly e-commerce platform that helps small businesses build an online store and sell online through one streamlined dashboard. As a business, they strive to provide great user experiences to all their users, including keyboard-only users, visually impaired users



Your Challenge

Your challenge is to build the merchant onboarding experience as per the Figma design we'll provide to you. You are to cater for the three most popular types of Shopify merchants:



Mouse users

Keyboard-only users

Screen reader users

You are to create a fully responsive experience for users on these device types:



Mobile Phones (Google Chrome Browser Only)

Desktops (Google Chrome Browser Only)

To complete this challenge, assume you are a software engineer at Shopify, assigned to complete this project, so as to provide a great dashboard experience to Shopify merchants.



Challenge resources

1. [Figma file](https://www.figma.com/file/W4IHXzpdgxrUMWuymS9R9i/Level-Up-Front-Hackathon?type=design&node-id=0%3A1&mode=design&t=EsuFAm9tFyz62qJm-1)

Here's the Figma file for this challenge. We recommend that you duplicate this Figma design to your own Figma drafts.



Link to the [Figma design prototypeLink](https://www.figma.com/proto/W4IHXzpdgxrUMWuymS9R9i/Level-Up-Front-Hackathon?type=design&node-id=301-7069&t=Vp96v1PtUpHDWlOy-1&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=301%3A7069&mode=design) to the Figma design

2. Icons and images

You do not need to download images from Figma. Here are all the icons you'll need. For the images, you may use the URLs directly.



Challenge constraints

Please consider the following constraints as you create your solution to the challenge:



You may only use 3 HTML, CSS and Vanilla Javascript for the challenge. No CSS or Javascript frameworks or libraries are allowed.

You may only use 3 files for your solution: index.html for your HTML, app.css for your CSS and app.js for your Javascript. For the assets, you do not need to download them. You can use the links to assets provided in the Resources section above.

Your solution will only be tested on the latest version of Google Chrome. This means you may use the latest versions of Javascript without worrying about old browser support, and cross browser compatibility will not be evaluated in this challenge.

Please follow the strict submission guidelines to enable us evaluate your submission. We will make the instructions as clear as possible, and inform you of any errors, but please be sure to follow the instructions.

Please make sure every text you use is exactly as displayed on the Figma design. Please do not use different text because the text will be used for your automatic submission evaluation.



# User stories

This is a list of acceptance criteria to consider your solution to this challenge as complete. Please take a moment to study the Figma designs before reading this, so it makes sense as you read.



As a merchant, when I click on the Shopify icon on the top bar, I am taken to the shopify landing page shopify.com



Show images

As a merchant, when I focus on the search box on the top bar, I can freely type into the input. At the moment, no further actions or results should occur. A merchant should only be able to type freely in the box.



Show images

As a merchant, when I click on the notification bell, I see a dropdown panel that shows me an empty list of notifications since I have none yet. When I click on the notification bell again, this dropdown panel is closed.



Show images

As a merchant, when I click on the name of my store Davii Collections, or on my profile image placeholder DC on the far right of the topbar menu, I see a menu with a list of menu items as specified by the Figma design. Clicking on this button again closes the menu. Finally, when I click on any of the menu items in this menu, I am redirected toadmin.shopify.com



Show images

As a merchant, when I click on theSelect plan link, I am redirected to the Shopify pricing page atshopify.com/pricing



Show images

As a merchant, when I click on the dismiss button of the trial callout, the trial callout is immediately removed from the page.



Show images

As a merchant, when I click the "Arrow Up" icon on the top right of the Setup guide card, it closes the card. When I click again, it reopens the card.



Show images

As a merchant, when I click on any of the 5 onboarding steps, it expands the panel, showing the content of the onboarding step, and closes the previously opened one. When I click on an opened onboarding step, nothing happens.



Show images

As a merchant, when I click on the circle checkbox (empty) on the left side of an onboarding step title, it marks that step as completed, and expands the next incomplete step. If I click again, it marks the step as incomplete. As I mark steps as completed or incomplete, I see the onboarding progress bar showing the correct progress.



Show images

Crushing Tech

Get more

Articles

Newsletter

Contact Us

FAQ

Contact Us