Now, before we do anything, let's just put up a boilerplate so that it is easy for us to return the
result on a screen, so let's just create a box and we'll be adding last name to it later on when we'll
be just figuring out our make styles and inside this box component, we are going to have a card component
that we just imported from a module material.
And inside this card component, we're going to have the card contained.
OK, so we have a card component, card content.
Now you might recall that there were two content in our card, right when was fired expense column,
an advice for income column.
The amount of money that we have left in that account, as well as the amount of money that we have
spent.
And that is going to return our total.
So on the left side, it was then come in on the right side, it was the expense.
So in our left card content, we will be having first or typography, and this typography is going to
show the income, the amount of money that we have left in our.
So the amount of money that we have earned and outside the topography will be just another type of topography.
And this topography is going to show our income will be making up code that is going to dynamically
render that income.
But for now, let's just put up a hardcoded value.
And we have to topographies and we'll be having another card component, so let's just copy this entire
segment.
And pasted just beneath it.
But this time, rather than the income, will be higher in the expenses.
And then again, it is going to have expenses.
It needs to have a negative sign as well as this needs to have a positive thing.
So we have successfully created our boilerplate.
Now it's time to add functions to our app and this is going to be transactions.