Million Ether Homepage

Storing Colors in a Pixel Grid

Million Ether Page Essential Smart Contract

Tip: Mining only when there are transactions

Tip: Using Remix IDE

Getting Started

Getting The Pixels and Ethereum Events

Building a DApp UI

Drawing in HTML Canvas

Using Websockets with Web3

We don't need the checkBalance function anymore, so let's get rid of it.

Web3 and Events Over WebSockets

Drawing Pixels from the Blockchain

Viewing Pixels

The rest of the script can be found in `scripts/buy-pixels-001-read.js` below

Buying An Image -- Reading Pixels

Buying An Image -- Sending Transactions

Pixel bidding and structs

Payable Contracts, payable Functions

Contract Owner and require

Payable color pixel function

Buying Pixels

Sending funds from a contract

The safer way to send funds from a contract

Also note that any sort of math like this _should_ be checking for overflows, which we'll talk about later.

The Pull Payment Pattern - Withdraw payments when outbid

Million Ether Homepage Summary

Auctioning Pixels

solidity

In this course, we'll build a DApp inspired by [The Million Dollar Homepage](https://en.wikipedia.org/wiki/The_Million_Dollar_Homepage). We'll build a 1 million pixel page, and each pixel can be colored by placing the highest bid.

In this course we'll walk through every step of writing a smart contract, deploying it, hosting auctions, and connecting it to the browser through web3. 

If you're looking to build real, full-stack ethereum Dapps, then this is a perfectly-sized example.

We'll build a DApp inspired by the Million Dollar Homepage, powered by an auction on the Ethereum blockchain

It's time to build a UI for our DApp. 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 

 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. 

---
title: 'Building a DApp UI'


slug: 'mep-building-a-dapp-ui'
thumbnail: https://embed-ssl.wistia.com/deliveries/968aad932ad220072bc11f29ada64a43afcb58f9.jpg

privateVideoUrl: https://fullstack.wistia.com/medias/a0hje541jg
description: ""



---

It's time to build a UI for our DApp. 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. 

Nate Murray

We're going to build an HTML, CSS, JavaScript page,

which will display the pixels that we have on the blockchain.

What we're building is a visualization of the true data

That is, our page isn't the source of truth,

This means that this app could run locally

As long as they have our code and the Ethereum blockchain

we're going to use NWB like we did in the earlier course.

use a web framework like Angular or React.

But for now, Vanilla JavaScript will be just fine.

And we already have a million ether page,

Now install web three, which gives us a connection

to our Ethereum node, and get pixels, which we'll use

Now we have our boilerplate, so let's draw on a canvas.