
Simple React app that handle list of bills
- or -
Post a project like this2040
$30
- Posted:
- Proposals: 5
- Remote
- #2851858
- Completed
Description
Experience Level: Entry
Estimated project duration: less than 1 week
### Get Started
Here's the project - https://drive.google.com/drive/folders/1xDn57BId0n3AkyoigAeQ9k87koW8I8hl?usp=sharing
1. Above is the link to the folder of the project (a simple [`create-react-app`](https://github.com/facebook/create-react-app) extended with [`json-server`](https://github.com/typicode/json-server) and some Cleo-specific goodies)
1.You will need to Install dependencies via `yarn` (or `npm`)
1. Run `yarn start` to start the dev server
1. Run `yarn api` in a different terminal to start the json-api server
### The Task
1. Create a Tabs component that allows multiple pages to be switched between. One tab should show a list of bills. These can be found at http://localhost:3002/bills/. Bills have a flag `isBill` set to `true`.
2. Another tab should show a list of transactions which are potential bills. These can also be found at http://localhost:3000/bills/. Potential bills have a flag `isBill` set to `false`.
3. Under each bill row for both lists, should be a hidden list of transactions for that bill. This should show when the bill row is clicked. Under the name of each bill should show a count of the transactions for it.
4. Add an action to the bills tab for each bill called "Remove bill" which updates the relevant bill's `isBill` flag to `false`. You can use a `PATCH` request to `http://localhost:3000/bills/:id` using the id of the bill to update the bill resource.
5. Add an action to the potential bills tab for each potential bill called "Add as bill" which updates the relevant bill's `isBill` flag to `true`.
6. After each action, the lists should reflect the changes.
### Notes
- I'd like to see state management tools being used - either Mobx or Recoil, or undux or unstated
- Tools we use at include styled-components, Typescript and Redux (with Sagas)
- Style the components however you see fit. SASS or PostCSS are fine, but I'd prefer CSS in JS
- Please unit / ui tests using Jest
- The API contains other data, feel free to use this creatively
- I'd like to see this React app hosted for demo purposes. So any hosting that is free specifically for React app would good.
There's no design for this simple app but I'd like it to follow the similar style of this https://www.meetcleo.com/
Main colours: #0815ff, #f5f6fa, #000000
Here's the project - https://drive.google.com/drive/folders/1xDn57BId0n3AkyoigAeQ9k87koW8I8hl?usp=sharing
1. Above is the link to the folder of the project (a simple [`create-react-app`](https://github.com/facebook/create-react-app) extended with [`json-server`](https://github.com/typicode/json-server) and some Cleo-specific goodies)
1.You will need to Install dependencies via `yarn` (or `npm`)
1. Run `yarn start` to start the dev server
1. Run `yarn api` in a different terminal to start the json-api server
### The Task
1. Create a Tabs component that allows multiple pages to be switched between. One tab should show a list of bills. These can be found at http://localhost:3002/bills/. Bills have a flag `isBill` set to `true`.
2. Another tab should show a list of transactions which are potential bills. These can also be found at http://localhost:3000/bills/. Potential bills have a flag `isBill` set to `false`.
3. Under each bill row for both lists, should be a hidden list of transactions for that bill. This should show when the bill row is clicked. Under the name of each bill should show a count of the transactions for it.
4. Add an action to the bills tab for each bill called "Remove bill" which updates the relevant bill's `isBill` flag to `false`. You can use a `PATCH` request to `http://localhost:3000/bills/:id` using the id of the bill to update the bill resource.
5. Add an action to the potential bills tab for each potential bill called "Add as bill" which updates the relevant bill's `isBill` flag to `true`.
6. After each action, the lists should reflect the changes.
### Notes
- I'd like to see state management tools being used - either Mobx or Recoil, or undux or unstated
- Tools we use at include styled-components, Typescript and Redux (with Sagas)
- Style the components however you see fit. SASS or PostCSS are fine, but I'd prefer CSS in JS
- Please unit / ui tests using Jest
- The API contains other data, feel free to use this creatively
- I'd like to see this React app hosted for demo purposes. So any hosting that is free specifically for React app would good.
There's no design for this simple app but I'd like it to follow the similar style of this https://www.meetcleo.com/
Main colours: #0815ff, #f5f6fa, #000000
Rory H.
100% (38)Projects Completed
38
Freelancers worked with
29
Projects awarded
37%
Last project
22 Feb 2021
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies