All right.
So now that we're more or less done writing Whittaker Code and we've completed the back end for this
decentralized finance or defi application, well, it's time to actually think about what the user is
going to see.
So namely the front end of this application.
Now you notice that by default, every single new project that you create on the ICP, when you use
the template, it will generate a set of assets, including a definitive logo and also an index for
each email and index dot JS.
And you can tell pretty much from this whole code that this is just the same as the hello world example
that we saw when we first set up for ICP development.
And that means right now the frontend for our bank actually looks somewhat like this.
So this doesn't allow us to use any of the things that we've created in our back end.
And so basically we have to get rid of the template and replace it with this.
This is what we're going to create today.
We're going to hook up this frontend with all Motoko backend and get it to actually work and to update
the balance to top up, to withdraw and to be able to use our Motoko Code.
So let's get started.
The first thing I want you to do is to go ahead and simply just delete everything that's inside the
index store, HMO, the main access and also the index DOT, JSE.
We're going to delete all three parts of our frontend basically, and instead we're going to replace
it with some new code.
Now, if you go over to the course resources for this lesson, you'll be able to download a file called
Index and Main.
Now, instead of saving them as HMO files or CSC files, I've actually gotten rid of the extension and
just kept them as tax files this way.
Basically, when you double click on it to open on your computer, it won't try to open it in the browser
because it recognizes it's an HMO file.
But what I want you to do is to go ahead and simply just copy the index file and put it into the index
dot HMO.
And then do the same thing for the CSIS.
So the main file goes into the main CSF and now we've got some basic frontend code.
Now because we've done so much frontend work in this course already, when we covered HPLC SS, I don't
want to type all of this out from scratch so that we can focus more on learning new things.
But I think it's a good idea always when you copy and paste code to just make sure that you understand
what's actually going on.
So in this case, all we've got here is a container that contains a logo.
Now, don't worry about this just yet.
I'm going to talk about it in just a second.
We're going to create this logo very soon.
And then you can see we've got this current balance which corresponds to this line.
And then we've got a form where we've got two inputs, a place where we can put the input amount and
a place where we can put the withdraw amount.
And then finally there's a submit button, and then the CAC basically just styles up all of those components.
And I've kept it pretty basic.
So now what we all going to code up, however, is the index, not just we're not just going to copy
and paste code in here because we actually have to understand how to hook up the frontend with the backend.
This is really important.
But what do we do if we want to be able to see this so that we can develop it as we go along?
Well, in this case, we're going to set up a new terminal.
And making sure that you are inside the Dabangg project.
You're going to run NPM install.
And this is going to install all of the packages that are required for this to get up and going.
And if you take a look inside package Dot, Jason, you can see what the dependencies are.
There shouldn't be too many.
Now, the next thing we're going to do is we're going to run, start.
And that means we've got our simulated Internet computer running locally.
And then in a new terminal, I'm going to run.
Do you deploy?
You might have already done this before, so you might have already deployed your code into the cannisters.
But because we've changed the whole bunch of files, it's usually a good idea to just deploy and update
our canisters.
Now, finally, I'm going to run the command ampm.
Done.
And this is going to spin up our web server and it will allow us to view what our current website looks
like.
So as you can see, we've got a broken logo because we don't have it in yet.
But the assassin, Ishmael, seem to be placed in correctly.
Now, none of this is going to work because of course, we don't have any JavaScript code.
Tell it how it should behave.
But the first thing we need to fix is this logo in order to add this logo.
I've again included it in the course resources, so you can simply download it.
And once you've downloaded it, all you have to do is drag and drop it into the assets folder.
So the same folder as where the logo dot PNG is.
So let's go ahead and do that.
Now you can either delete this DNG logo or you can keep it.
It doesn't really matter.
I'm going to get rid of it just so that it's less confusing here so that we've only got one logo.
And you can see this is the logo that I've created for our current project.
If you want to create your own logo from scratch, then I'll show you how I made this.
I didn't actually design or do any work.
Instead, I use this free logo maker online.
I typed in the name of my product and then I just went through this selection process and shows fonts
and sizes and styles that I liked.
And then we get to pick our favorite color.
Add a slogan if you want to, and then type in some related icons to our concept.
Now, in the end, I actually didn't choose to use a logo with any of these icons, but you might feel
differently.
So once you've chosen all of your icons, then it'll show you a bunch of automatically generated logo
results and you can basically just go through these and pick one that you like.
And then once you're done, you can download it by signing up to this free service.
They just want an email password, I think.
Alternatively, if you don't want to sign up, you can also just take a screenshot of the logo that
you like and then crop it to the size that you want.
And this is how I basically ended up with this D bank logo.
And then all we have to do is drag it into the assets folder and we're golden.
So now if we go ahead and hit save and go back to our local host and then go ahead and refresh, you
should see the logo show up.
So perfect.
Now, this additional next part is at least complete.
And what we need to do now is to hook it up with the JavaScript.