In this project, let's build a Money Manager app by applying the concepts we have learned till now.

Refer to the image below:


money manager output gif

Design Files

Click to view

Set Up Instructions

Click to view
  • Download dependencies by running npm install
  • Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • Initially, Balance Amount, Income Amount, and Expenses Amount should be 0

  • Balance Amount should be calculated by removing the Expenses Amount from the Income Amount in the list of transactions

  • Income Amount should be calculated by removing the Expenses Amount in the list of transactions

  • Expenses Amount should be calculated by adding only Expenses Amount in the list of transactions

  • The MoneyManager component is provided with transactionTypeOptions. It consists of a list of transaction type objects with the following properties in each object

    Key Data Type
    optionId String
    displayText String
  • Initially, the value of the titleInput should be empty

  • Initially, the value of the amountInput should be empty

  • Initially, the first option in the list should be selected

  • When a transaction is added, by providing the values in the titleInput, amountInput and optionId and Add button is clicked,

    • A new transaction should be added to the transaction history list

    • totalBalance, totalIncome and totalExpenses should be updated accordingly

      totalBalance = totalIncome - totalExpenses
      
    • After updating, the values in the titleInput,amountInput and optionId will be updated to their initial values

  • When the delete button in the transaction history is clicked,

    • The respective transaction should be deleted from the transaction history list
    • totalBalance, totalIncome and totalExpenses should be updated accordingly
Components Structure
component breakdown structure

Implementation Files

Use these files to complete the implementation:

  • src/App.js
  • src/components/MoneyManager/index.js
  • src/components/MoneyManager/index.css
  • src/components/MoneyDetails/index.js
  • src/components/MoneyDetails/index.css
  • src/components/TransactionItem/index.js
  • src/components/TransactionItem/index.css

Important Note

Click to view

The following instructions are required for the tests to pass

  • The Balance Amount should have the data-testid as balanceAmount
  • The Income Amount should have the data-testid as incomeAmount
  • The Expenses Amount should have the data-testid as expensesAmount
  • The Delete button for each transaction should have the data-testid as delete

Resources

Image URLs
Colors
Hex: #475569
Hex: #0b69ff
Hex: #ecfccb
Hex: #84cc16
Hex: #cffafe
Hex: #06b6d4
Hex: #ede9fe
Hex: #7c3aed
Hex: #cbd5e1
Hex: #7e858e
Hex: #ffffff
Hex: #1e293b
Hex: #d7dfe9
Hex: #334155
Font-families
  • Roboto

Things to Keep in Mind

  • All components you implement should go in the src/components directory.
  • Don't change the component folder names as those are the files being imported into the tests.
  • Do not remove the pre-filled code
  • Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.