Transaction Management Fullstack - Level 3

Your task is to build a fullstack app that allows to record financial transactions and view the transaction history.

Please agree with your hiring team regarding the tech stack choice.

The backend should implement the Accounting API.

The frontend should consist of a form for submitting transactions and a transaction list.

Transaction list displays the withdrawn or deposited amount for each transaction along with the affected account id. It also shows the current balance for the last submitted transaction.

Here's the UI mockup with hints:

Feel free to tweak the UI, but please ensure that the following HTML is in place.

The form for submitting transactions

<form ... >
  <input data-type="account-id" ... />
  <input data-type="amount" ... />
  <input data-type="transaction-submit" type="submit" ... />
</form>

Both input fields should be cleared after the form is submitted.

Transaction list

Every new transaction goes on the top of the list and should have an enclosing <div /> with the following structure:

<div 
     data-type="transaction"
     data-account-id="${transaction-account-id}"
     data-amount="${transaction-amount}"
     data-balance="${current-account-balance}" ...>
  ...
</div>

${transaction-account-id} - account id of the corresponding transaction.
${transaction-amount} - transaction amount.
${current-account-balance} - the current account balance right after submitting the transaction (only show for the last submitted transaction).

Before you get started

If you run into a problem

Need help? Head over to our community on GitHub to get assistance.

Import boilerplate

Follow this link to get the boilerplate code for your tech stack to configure a minimal setup for running the E2E tests.

Alternatively, use the manual setup.

Update the baseUrl (where your frontend runs) in cypress.json.
Update the apiUrl (where your backend runs) in cypress.json.
Update the build and start scripts in package.json to respectively build and start your app.

Get familiar with the API

Follow this link to find the API documentation. Feel free to try out a few requests to better understand how the API should work.

Try running the E2E tests locally

npm install
npm run build # should build your fullstack app
npm run start # should start your fullstack app
npm run test

What we expect from you

Make the provided E2E tests pass.
Keep server data in memory.
Implement client-side validation of the form data.
Ensure that the frontend app remains responsive while the data is being loaded from the server.
Unit test one module of choice. There is no need to test the whole app, as we only want to understand what you take into consideration when writing unit tests.
Avoid duplication and extract re-usable modules where it makes sense. We want to see your approach to creating a codebase that is easy to maintain.
Push your code to the new implementation branch. We encourage you to commit and push your changes regularly as it's a good way for you to showcase your thinking process.
Create a new pull request, but please do not merge it.
Document the tech decisions you've made by creating a new review on your PR (see how). In particular, describe how you've made the frontend responsive.
Await further instructions from the hiring team.

Time estimate

About 3 hours depending on your experience level + the time to set up the project/environment (go with one of the provided boilerplates to move faster).

Also, there is no countdown. The estimate is for you to plan your time.

Made by DevSkills.

How was your experience? Don't hesitate to give us a shout.

gagocarrilloedgar/managemet-system-test