The fe-interview from meetcleo

fe-interview's Introduction

Cleo Frontend Interview - Bills

Fork or clone this repo (a simple create-react-app extended with json-server and some Cleo-specific goodies)
Install dependencies via yarn (or npm)
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 to true.
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 to false.
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 to false. You can use a PATCH request to http://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 to true.
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

Recommend Projects