Frontend Developer Assessment (framework) Store Checkout Mockup Implementation

--- GA: UA-83160642-4 tags: t1.gl/Public, t1.gl/Assessments --- # Frontend Developer Assessment (framework) Store Checkout Mockup Implementation {%hackmd hp8GBradSpO0m-MA4UKFRg %} :::success :moneybag::moneybag::moneybag: Please **[sign up](https://t1.gl/loyalty)** to be eligible for up to **HK$6,000** completion bonus. :moneybag::moneybag::moneybag: :mortar_board: This assessment awards a **Basic** or **Intermediate** level certificate. *Note: completion bonus only applies to Intermediate certificates.* ::: ### The Task [![](https://i.imgur.com/RYqNYY7.png)](https://i.imgur.com/RYqNYY7.png) *Designed by [Giga Tamarashvili](https://dribbble.com/Tamarashvili) on Dribbble* The challenge is to implement a shopping cart page as shown on the mockup with a modern Web framework such as React or Vue.js. (Unless otherwise specified by us, you may choose any framework you like.) You can choose to use a front-end component framework like Material-UI / React Bootstrap / Bloomer, or without a front-end component framework. You should handle state management using Redux, Vuex or similar. ### Deliverable The deliverable will be a code repository we can browse through and clear instructions for accessing/installing the app. **What we are looking for:** - All the fields on the right except for Card Type are editable. - The original font is Gilroy, but you can use Roboto. - The quantity of the items in the shopping cart can be changed (increased or decreased) by clicking the - or the + sign. - The price shown on the item row changes accordingly when the quantity changes. - For example: Chicken momo 0 $0.00 Chicken momo 1 $10.50 Chicken momo 2 $21.00 - When the quantity reaches 0, the item row stays. - The Subtotal at the bottom changes accordingly when the number of items in the shopping cart changes. - Each row of the shopping cart should be deletable through clicking the cross. - (Optional, bonus) You may choose to make the page responsive. - (Optional, bonus) The Check Out button and the Continue Shopping links are not redirecting to other pages, unless you come up with a design on your own. **Please find our submission and grading guidelines [here](https://t1.gl/review). Your priorities are:** 1. Hit the deadline you assign yourself with all requirements met. 2. Produce beautiful and maintainable code with tests. 3. Your code must be ready to be deployed to netlify or heroku. ### Skills to be graded 1. Code Quality 2. Visual Accuracy 3. Functionality 4. UX/UI Design 5. Testing 6. Communication ### Submission 1. You can find our general grading guidelines at https://t1.gl/review. 2. Submit your assessment at https://t1.gl/submit-assessment. ### FAQ Please feel free to send any additional questions our way. How long should this take? ~ This challenge should take less than 4 hours. Is this the assessment for me? ~ This assessment targets frontend developers with 0-2 years of frontend development experience. If you are not a frontend developer, or if you are a more experienced developer, you may want to check out other assessments. --- Copyright (c) 2016-2020 Terminal 1 Limited.