All right, so now let's begin building our custom token. 1
Now to start, I want you to head over to the current lesson's course resources and download the starting 2
project. 3
So it should be something called token.zip. 4
And once it's downloaded, go ahead and unzip the folder and open up the project inside VSCode. 5
Now, here, you'll notice that I've already set up the project for React Development, so I've added 6
the tsconfig file and I've also modified the Webpack configs. 7
Now in addition, I've added some dependencies into the packaged.json which will get built when we run 8
npm install. 9
And also I've already created some of the assets such as the favicon and also the React components that 10
we're going to be working with and building out. 11
So essentially we've got this React frontend with a blank Internet computer Motoko backend and we're 12
going to be working on this in the coming lessons. 13
But because we've already covered some of the configuration and a lot of the boring stuff, I didn't 14
want you to repeat that over and over again. 15
So to save time, I've really created some of the barebones sort of HTML and CSS for you so that we can 16
work on the interesting things, which is working with the blockchain and also writing the JavaScript 17
code and Motoko code. 18
This project was actually inspired by Curve finance. 19
Curve is what's called an automated market maker. 20
It's really popular and used a lot for people to exchange stable coins and it's used really heavily by 21
people within the sort of web3 blockchain community. 22
And the reason why I really like it is because it has this really old school kind of nineties design 23
feel, like you're working on some sort of old Macintosh. 24
And I basically taken a lot of this design inspiration and built the front-end for our website, which 25
is going to be called DSurv instead of Curve. 26
And I want to show you how this looks. 27
But in order to do that, we have to actually build it and be able to run it locally on localhost. 28
So go ahead and open up a new terminal and use dfx start to start a new local simulated ICP blockchain. 29
And once that's done, let's go ahead and split out another screen. 30
And in this one, we're going to run npm install. 31
And this is going to take everything that's inside our package.json, everything that I've specified 32
as a dependency or a dev dependency, 33
and it's going to fetch that from the Internet and install it for us. 34
So that's going to take a little while 35
and it might be worth grabbing a cup of tea, depending on how fast your Internet and your computer 36
runs. 37
Now I fast-forwarded the video there for you, just so that you don't have to sit here and wait for my 38
packages to install. 39
But at the end of it, you should see that we've added something like 1,447 packages and they will go into 40
the node modules. 41
And these are a lot of the things that are required by the dfinity modules or some of the things 42
that we're going to be using later on as well 43
in order to authenticate our users, log in 44
users, also a lot of React dependencies and that kind of stuff. 45
So if you've seen some of these warnings in your installation about deprecation, don't worry about 46
it too much. Because I've specified the required version numbers, 47
you'll probably also see some deprecation here. But just be 48
rest assured it's all going to work just fine. 49
And a lot of this is very minor 50
like the material UI icons might have changed to MUI icons, but it really won't affect our website 51
or our security or anything at all. 52
Now that we've done that, the next thing we have to do is to go ahead and deploy our website. 53
Now you'll notice that in our main.mo I've deleted all the starter code in there, so there's not 54
much going on there. 55
But we do need to do a dfx deploy in order to build some of those declarations and other files in order 56
for the back-end to understand what's going on the front-end and some of that configuration for dfx 57
to complete. 58
So splitting out another terminal we're going to do a dfx deploy and this is going to create our wallet 59
canister, it's going to build our canister and install it onto this locally running ICP blockchain. 60
And as it's doing that, you'll see a dist folder being built, declarations folder being built. 61
And then once that's done and you see deployed canisters, then we can finally go ahead and run npm 62
start. And once we hit enter we'll be able to head over to the localhost, which is localhost 8080. 63
Or you can actually scroll up a little bit and you'll see localhost 8080 here, which you can simply 64
copy and paste into the browser here. 65
You should be able to see the frontend load up. 66
So we've got our DSurv website instead of curve. 67
We've got our faucet, which is where people are going to be able to claim some of our tokens for free. 68
And then we've got a check balance section where we can check a account's balance. 69
And finally we have a transfer section where we can transfer to another account some of our custom tokens. 70
Make sure that you're following to the step that everything is up and running without any errors in 71
the console. 72
And if you have any problems, then be sure to look back at the video and trace the steps one by one 73
to see if you can get to this step. 74
Once everybody is all here, then head over to the next lesson 75
where we're going to get started building out the check balance functionality on the back-end and tying it 76
up with the frontend. 77
So for all of that and more, I'll see you on the next lesson.