I have spent just about 5 hours on this task, maybe a little more :)! The solution is fully implemented. Unit tests have been written for some various components and functions but the coverage is nowhere near perfect, due to time constraints. If I was going to spend more time on this, I would have perhaps liked to:
- Implement the UI mobile first, perhaps by using a CSS framework like tailwind CSS. The current UI is not responsive.
- Achieve a higher unit test coverage percentage.
- Write some Cypress tests
- Implement some sort of internationalization/ localization solution.
👨🏻💻 Arsam Sarabi
📧 arsamsarabi@me.com
- Fork or clone this repo (a simple
create-react-app
extended withjson-server
and some Cleo-specific goodies) - Install dependencies via
yarn
(ornpm
) - Run
yarn start
to start the dev server - Run
yarn api
in a different terminal to start the json-api server
- Create a Tabs component that allows multiple pages to be switched between.
- One tab should show a list of merchants with transactions that have been marked as bills. These can be found at http://localhost:3002/merchants. Merchant's marked as bills, have a flag
isBill
set totrue
. - Another tab should show a list of merchants with transactions which are potential bills. These can also be found at http://localhost:3002/merchants. Merchant's that could be potentially bills have a flag
isBill
set tofalse
. - Under each merchant row for both lists, should be a hidden list of transactions for that merchant. This should show when the merchant row is clicked.
- Under the name of each merchant should show a count of the transactions for it
- Add an action to the bills tab for each merchant called "remove bill" which updates the relevant merchant's
isBill
flag tofalse
. You can use aPATCH
request tohttp://localhost:3002/merchants/:id
using the id of the merchant to update the resource. - Add an action to the potential bills tab for each merchant called "Add as bill" which updates the relevant merchant's
isBill
flag totrue
. - After each action, the lists should reflect the changes.
- Please aim to spend 2-3 hours completing this task
- We'd like to see state management tools being used
- Tools we use at Cleo include styled-components, Typescript and Redux (with Sagas)
- Style the components however you see fit. SASS or PostCSS are fine, but we'd prefer CSS in JS
- We love tests, linted code and great looking UIs
- The API contains other data, feel free to use this creatively if you have the time
- Remember to check your project runs before submitting