Building a DApp UI
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
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 70+ \newline books, guides and courses with the \newline Pro subscription.
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. Keep this in mind. What we're building is a visualization of the true data that exists on the blockchain. 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. 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. 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. NPM install dash g nwb. And we already have a million ether page, so let's create our app in there. 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. All right. Now we have our boilerplate, so let's draw on a canvas.