You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
fraz 28ca3c349b first commit 11 months ago
public first commit 11 months ago
src first commit 11 months ago
.eslintcache first commit 11 months ago
.gitignore Initialize project using Create React App 11 months ago first commit 11 months ago
package-lock.json first commit 11 months ago
package.json first commit 11 months ago
yarn.lock Initialize project using Create React App 11 months ago

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



  • 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


  • 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


  • 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.