Original subtitles

In this lecture it's time

to take a first look at the application

that we're gonna build in this section.

We will also take a closer look

at these data files for this project

and we will also check out

the flow chart for this application.

So lets get started.

And this is the application

that we will build through out this section

and also the next one.

So it's called Bankist

and this is the demo version

that is actually live on bankist.netlify.app.

So I invite you to actually try out

this application together with me

as you watch this video

so to get a real good feeling for how it all works.

Now this looks a little bit empty

and so you can just basically log in.

So write JS and then the pin is 1111.

And so Bankist stands for minimalist banking

and so this is why we have this kind of banking.

So an online bank interface.

So we have all the movements here,

we have the overall balance of the account up here.

Then we have some summary data down here

and here on the right side

we have three options that we can do.

So we can transfer money to someone else,

we can request a loan from the bank

and we can close the account.

So lets request a loan here.

Lets say I need

1,000 euros.

So I click here

and then after some time it is approved

and it appears here as a deposit.

Okay.

Then I can also transfer money

and there is a user called JD.

And lets say I wanna transfer 5,000.

So lets try that.

And so now I have 5,000 less than I use to have.

Finally we can also sort these here.

So now they are sorted

and now they are back to normal.

And now lets go to that other account JD

with the pin of

2222

and so lets check out if she has a deposit of 5,000.

And indeed here it is.

We also see that this account here is in US dollars

and with the American formatting

while the other one was in euros.

And so that's something

that we're gonna take care of in the next section.

But in this section we will actually take care

of displaying all of these movements,

making these operations here possible,

calculating the statistics as well as the current balance

and so yah, I think it's gonna be a lot of fun

and I'm really happy with this application.

I think it looks amazing,

it also looks like a real world use case

and yah, overall

this is a great project for training Arrays

because we can do lots of these stuff

that you see here on the screen using Arrays.

Great, so now that you have a feeling

for how this application works

lets take a look at a flow chart that I designed

or that I build for this application.

So here is that flow chart for the Bankist application

and just like before in the Pig Game.

I built this one based on the flow of actions

that we just saw in that live version

of the Bankist application.

So starting there in the top left

as the user logs in.

Which is on of these yellow actions.

So all of these yellow elements here

mean some sort of action.

So when the log in action is performed

we check for the correct credentials

and if they are correct we display the UI

and then we also update the UI.

And so that means to calculate the balance,

calculate the summary, display the movements,

and then later on in the next section

we will also start and display a log out timer.

So all of these here happens right

at the beginning as the user logs in.

And so actually this part in the beginning here

everything that is inside the update UI

will be the first thing that we will do.

Okay, then from there we will implement

the kind of fake log in

and then we will take care of these other operations.

So probably we will come back to this flow chart by then.

But anyway this is already a very good overview

of all the steps that we have to implement

in order to build this application.

And you can spend some more time on this

and actually compare it

to the functionality of the application.

That's why one more time I included this flow chart

in these data files of this section.

Now this time just like in the Pig Game

I built this flow chart myself

because all that matters here in this project

is to build this application and learn all about Arrays.

But in the next big project

we will actually plan the entire application together

and I'll show you all the steps

that we have to go through in order to come up

with a flow chart like this.

So don't worry about designing a flow chart just yet.

We will learn how it works

and how to plan an application from the ground up.

But for now again my purpose with this flow chart

is just to give us a good overview,

so a good road map to actually go ahead

and implement all the features of this application.

And so then whenever we get lost

we can always just come back to this flow chart

and see exactly how the application works

and what we have left to implement.

Now okay, but with that being said

lets now go back to our code editor

and take a closer look at all these data files

that we have there.

So right at the top of our script

we have these four account objects.

Okay, and so this one here was the JS

that I just showed you in the demo

and so here then are the movements stored in that object.

We also have the pin

and later on we will also use this interest rate.

Now okay, now of course in the real world

you would want much more data

about each of the movements not just the value, right?

For example we would use the date

of each movement maybe a description and so on.

But here we really just want to work with Arrays

and so I'm keeping it very simple

but still at the same time fun to build, okay.

So yah, so one object for each account

and you could ask why not use a map instead of an object.

Well the thing is that we're gonna pretend

that all these data is coming from a Web API.

So a little bit like we talked about earlier.

And whenever we get data from an API

this data usually comes in a form of objects.

And so this is why we have objects here

and then finally the under array containing

all these account objects in there.

Remember that this is one of the most common ways

of organizing data in JavaScript applications.

And so that's why we are going to use it

through out this section to make this actually feel

a bit more like a real world application.

All right, so that's the data.

Lets take a look here a little bit at the other files

so as always we have the prettier configuration.

Then here's the flow chart that I just showed you

and so here you can take a look at it by yourself.

Then the index.html and this one is a lot more complex now

and we will actually need it to take some code out of there.

Then here we have the icon and the logo.

So like this icon you see here in the tab.

So the fav icon and finally we have the style.

And so here you can have some fun

and learn some CSS if you're interested in it.

So it's almost like 300 lines of code I think

that I build to style this application.

So you see I really put a lot of work

to make this application really fun.

And okay, so I think that's it for the

data files.

Just notice that I already selected all

of the elements that we're gonna need.

So you see it's a lot of stuff

and I'm gonna explain what each of these is

but what matters is that this way

we don't have to write all these code or cells

and so this makes development a little bit faster.

So a lot of elements here

and yah.

So I think that's it for this video,

I think you got a good overview of this project

for the section and once again please go ahead

and take a look at this URL by yourself

and use user JS

and pin

1111.

And then when you're familiar with how

the application works then lets move on.