thisislaait/shopify_onboarding

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

Shopify Onboarding Dashboard Hackathon

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 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
• 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.
• 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.
• 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
• As a merchant, when I click on theSelect plan link, I am redirected to the Shopify pricing page atshopify.com/pricing
• As a merchant, when I click on the dismiss button of the trial callout, the trial callout is immediately removed from the page.
• 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.
• 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.
• 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.