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
  • Type & Query
• 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.