The goal is to create the single page provided in the /docs/
folder of this repository. This is intentionally stripped down to allow for better inspection of your core skills and intuition.
The single page should look like the following:
The following should be noted:
- The back button does not need to work.
- The
1 of 3
does not need to be hooked up to anything. - All other numbers and values on the screen should be hooked up to the real data being pulled in.
- An
order
contains severalmerchantOrders
which will each have a heading separating them, in the mock-up you can see this listed asSeller A
. - The footer listing
Terms and Conditions >
does not need to lead anywhere. If you want bonus points you can create a new api method for generating aReturns
collection document. And, have that footer create the document. - The
Talk to Someone
button should open the help modal. (/docs/help-modal.png) - The
Call Us
button does not need to work. - The
Close
button should work. - The quantity button should open the quantity selection drawer from the right side. (/docs/quantity-drawer.png)
- The
back arrow
button on the quantity drawer should close the drawer.
Updates based on the answers to my questions:
- 'Help Modal': it should be a pop-up, it should not fill all screen;
- 'Return Quantity': the user should be able to select the quantity and click 'Apply Changes'. After that, numbers '2 of 4' (the ones near the Seller A), should change to his selected value (X of 4);
- 'Return Quantity' and 'Checkbox': when the user selects the quantity from the drawer, the checkbox should become checked and overall quantity should recalculate;
- 'Return Quantity' and 'Checkbox': when the user deselects the checkbox (which was previously checked), return quantity should become '0 of X' and overall quantity should recalculate;
- 'Checkbox': if the user goes to the page, does not select anything from the drawer and just clicks on the checkbox (which is not checked), the highest possible value for that item should be selected and overall quantity should recalculate.
The following will be considered:
- Understanding of frameworks, especially React.
- Attention to detail
- Coding style
- Ensure
npm
is installed. - Ensure
meteor
is installed meteor npm install
meteor npm run start
- View at
http://localhost:3000/
It should look like this initially:
meteor npm run lint
- Before pushing linting is automatically run.