Building a DApp UI
This lesson preview is part of the Million Ether Homepage course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Million Ether Homepage, plus 80+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:06] It's time to build the UI for our DAP. We're going to build an HTML, CSS, JavaScript page, which will display the pixels that we have on the blockchain.
[00:07 - 00:12] Keep this in mind. What we're building is a visualization of the true data that exists on the blockchain.
[00:13 - 00:21] That is, our page isn't the source of truth, it's a visualization. This means that this app could run locally on anyone's computer without connecting to the broader internet.
[00:22 - 00:30] As long as they have our code and the Ethereum blockchain on their local machine. To build our boilerplate for this app, we're going to use NWB like we did in the earlier course.
[00:31 - 00:36] Again, in a real app, I'd probably use a web framework like Angular or React. But for now, Vanilla JavaScript will be just fine.
[00:37 - 00:41] NPM install dash g nwb. And we already have a million ether page, so let's create our app in there.
[00:42 - 00:52] This time we use NWB init. Now install web three, which gives us a connection to our Ethereum node, and get pixels, which we'll use to read the image files later on.
[00:53 - 01:01] All right. Now we have our boilerplate, so let's draw on a canvas.