Imagine that you are working with your team to develop a checkout / bag application for an e-commerce platform. You decided to go for the following technology stack:
- Vanilla Javascript Components
- Webpack
- ES6 (Babel)
- SASS
- Axios
- Jest
Your colleagues already built a good part of the application which consists of a responsive header, footer and content areas.
They already made a mock API with a sample of user data and started to integrate it with the UI by calling the GET endpoint and listing the user's products on first load (see instructions below).
In this exercise you are required to revise what's already been done so far, and complete the following missing requirements:
As a user, I want to see a header containing the page title and the current total value of the products in my bag.
- The header should follow all visual requirements in the layout references.
- Given there are N products in the system, user should see the sum of their prices in the header.
As a user, I want to be able to click the X button on the product card to remove it from my list.
- When user clicks on the X button on the product card, the application should call the DELETE API endpoint for that item and update the content area and the current total on the header to reflect the change.
- App must run on latest versions of the following browsers: Chrome, Firefox, Edge (or Safari if you are using a Mac).
General
- Font Family: Georgia
- Font Color: #222
Header
Background Color: #E6E6E6
Size: 100px tall, full width
Text is vertically center aligned inside header
Title
- Font Style: 20px Bold
- Margin Left: 24px
Price
- Font Style: 15px Regular
- Margin Right: 24px
Card Container
- Margin: 24px
- Grid Layout: 1 column with cards
- Gap Between Cards: 12px
Card
Size: 175px tall
Border: 1px solid #B6B6B6
Image alignment: left
Remove Button Alignment: top right
Text (brand and price) is vertically and horizontally center aligned
Product Information Container
- Background Color: #F6F6F6
- Brand Name Font Style: 15px bold
- Price Font Style: 15px regular
- Distance Between Brand and Price: 6px
Footer
- Size: 50px tall with full width
- Background Color: #E6E6E6
- Text is vertically and horizontally center aligned
- Font Style: 12px regular
General
- Font Family: Georgia
- Font Color: #222
Header
Background Color: #E6E6E6
Size: 150px tall, full width
Text is vertically center aligned inside header
Title
- Font Style: 20px Bold
Price
- Font Style: 15px Regular
- Top distance from title: 16px
Card Container
- Margin: 60px
- Grid Layout: 3 column with cards
- Gap Between Cards: 18px
Card
Size: 310px tall
Border: 1px solid #B6B6B6
Image Container
- Size: 70% tall 100% width of card
- Background: white
Image
- Size: 130px tall, 175px wide
- Alignment: center (vertically and horizontally)
Remove Button Alignment: top right
Text (brand and price) is vertically and horizontally center aligned
Product Information Container
- Background Color: #F6F6F6
- Brand Name Font Style: 15px bold
- Price Font Style: 15px regular
- Distance Between Brand and Price: 6px
Footer
- Size: 100px tall with full width
- Background Color: #E6E6E6
- Text is vertically and horizontally center aligned
- Font Style: 15px regular
- If you don't already have it, install node.js
- Install dependencies:
$ npm install
$ npm run buildFor this exercise we provide a simple mock API as a local node express server. To start the local server, follow the instructions bellow:
- If you don't already have it, install node.js
- Start the server:
$ npm run serverBy default the API will run on http://localhost:3000.
It will accept only two endpoints calls:
- GET /bag
- DELETE /bag/
<bag-id>/items/<item-id>
You can assume <bag-id> to always be 'bag1'.
Don't forget to start the mock API server, so:
$ npm run server
$ npm run dev$ npm test- We are expecting a simple solution to this problem. No need to over-engineer it nor introduce unnecessary complexity.
- You are allowed to refactor existing code if you feel it's necessary. Just remember to describe the reasons for it.