Running The Frontend
npm install
in the frontend directory to install the required modules then npm run start
to start the dev server by default on localhost:3000
yarn install && yarn start
should work too.
Design Choices
- Frameworks
- I decided to use
ReactJS and Redux
- I’m pretty comfortable with it but it’s been a while since I used it without TypeScript
- Decided to use
createSlice
from the redux toolkit since this appears to be standard now
- I used
material-ui
for some nice prebuilt visual components
- I used
react-flip-move
for some list animations
Features
Payments
- Payments are displayed in a nice material-ui card.
- I added a bit more information to each card.
- I found and added
react-flip-move
which adds some nice animations
- I believe there’s an issue when running it in dev that swapping tabs can cause some strange behavior
- removing react-flip-move and replacing with an alternative is a simple fix
Polling
- Payments are polled using setInterval with an interval of 1
- Since it’s doing an IO request it’s pretty unreliable and likely to miss some requests
- A good alternative could be modifying the server to use websockets
Redux Payments Store
- Holds all payments
- uses unshift to add to front of list which is most likely inefficient (not sure on JavaScript implementation of unshift).
- allows for the nice animation
- Only holds 25 payments at any one time
- We only care about 25 payments from the specification so this should be okay
- Holds latest error information
- Only holds a single error
- In a larger system I’d give errors their own store
- I originally thought the /GET endpoint was similar to the /POST endpoint and would return errors sometimes
Filters
- You can filter based on each field and remove filters as you progress
- The implementation allows for multiple filters on the same field
- Useful for searching memos
- Could be extended to a “person” filter which looks only at receiver and sender name
‘any’ type filter
I gave some thought onto implementing a filter type that searches through all fields. Some implementation ideas I had were
- Apply each filter to the original payments input and add all outputs to an array then remove duplicates
- Combine all fields to a single string and use indexOf
- has obvious possible undesirable results
Redux Filter Store
- Handles the current user input
- Handles the current active filters
- User input could be changed to use useState() or in it’s own store
Directory Layout
I used the default directory structure that is recommended with create-react-app
.
Code Quality & Cleanliness
Generally I’d use an airbnb eslint configuration, this instance the setup complained too long and it’s been a while since I messed around with non TypeScript eslint.
There’s no tests but tests could be added to ensure reducers work correctly and components have the correct behaviour. Jasmine / Jest tests could be easily implemented.