Proof Of Ex DApp with MetaMask modal open
Get Instant Access!

Become one of the world's first
Blockchain Developers

What's a DApp? (Hint: UI + Smart Contract)

Smart Contract graphic

Decentralized Applications (or DApps) are an exciting new type of application. They're backed by Smart Contracts, or automated code that helps people exchange money, property, or anything of value in a way that's transparent and doesn't require a middleman.

They're disruptive since they're built on top of a Blockchain: a transparent, immutable ledger (or database) that doesn't
require the establishment of trust from a centralized authority.

Build your first DApp

Proof of Existence application home page

This course is for Ethereum Developers who want to hook up a professional UI to a Smart Contract, or Web Developers who want to break into the exciting new Blockchain space.

In this course, you'll create a DApp called Proof of Ex. It allows users to prove authorship of their unique photographic assets, and it's a good use case for a Blockchain. The idea is simple enough to show you how to connect an industry-standard
UI to a simple Smart Contract.

What You'll Learn...

How to use Web3.js to connect a UI to a Smart Contract

The Ethereum logo

Web3.js is an Ethereum JavaScript library and API. This is the connecting glue between your UI and your Smart Contract.

It has some gotchas, but it's a must-know for Ethereum developers. I'll show you how to use it by guiding you through development of a real DApp.

How to create a checkout flow with MetaMask

MetaMask popup

Regular everyday users won't download the entire Blockchain to their computers. That's why you need to develop your DApp with MetaMask. It allows any user to interact with a decentralized application from a browser.

This is a key part of the Ethereum DApp ecosystem. Learn how to integrate it into your application.

How to think and develop in UI Components
using React

Outline of each UI component

React is an awesome library for creating UI components, and it's going to make your life as a developer much easier.

Learn how to develop modern interfaces by thinking and developing in components. An absolute must.

How to manage state with Redux

Redux icon and logo

You need to know how to manage the state of your application correctly. You also have to manage the data that flows through it.

Redux has a learning curve, but I'll help you understand this pivotal piece of your

Learn how to connect a
professional UI to a Smart Contract

What You'll Get...

Access to an expert foundational UI boilerplate

Devices with differnt viewports

I've developed a lot of software for a lot of companies, and I've seen all the mistakes. Start your DApp the right way, with the right foundation. You wouldn't build a house with the wrong foundation, would you?

  • Ideal Webpack + Babel configuration
  • Superior CSS architecture with CSS Modules
  • Centralized theming and SASS configuration
  • Advanced Application Shell Architecture
  • Reusable component organization and structure
  • Build commands for easy deployment
  • Automated developer workflow
  • Local development server with Hot Reloading
  • Responsive interface for mobile + desktop
  • ES6 ready
  • Reusable Modals, Icons, and more...

Step-by-step coding instructions by an industry expert

I walk you through the difficult technical parts in videos. I know what's essential for you to know, so let me show you how to start. Modern UI engineering skills are very much in demand. Let someone with experience get you started so you don't waste your time.

Step-by-step coding instructions

And more...

Integrated with Truffle

Truffle's Main Page

Truffle is the leading DApp framework. It helps you compile, migrate, and deploy your Smart Contracts.

The foundational UI boilerplate you get in this course comes integrated with Truffle so you can easily work with Smart Contracts.

Icon set up with Font Awesome

Font Awesome snapshot

Font Awesome is a professional icon set with hundreds of free icons.

The foundational UI boilerplate that comes with this course comes with a reusable Icon component that works with Font Awesome. Seriously, just have fun designing.

Give your DApp a skin

Material-UI snapshot

You don't have to be a Designer to create a theme for your DApp.

Learn how to use third-party libraries like Material-UI to give your DApp a look and feel. Easy peezy!

About the Instructor

Mark Muskardin presenting

Hi, I'm Mark, a UI Engineer & Web Developer in the San Francisco Bay area with over 10 years of experience in software development.

I develop and architect React apps for a lot of startups. I know how in-demand these dev skills are, so I teach others what I know.

I'm really excited about the Blockchain space and feel that it will revolutionize how we work with each other. My hope is that as we learn how to use these amazing new technologies, we'll also help
each other achieve greater freedom.

The UX of your DApp is extremely important.

Course Outline

  • 1 Introduction
  • About This Course
  • Prerequisites
  • How This Course Is Organized
  • What You'll Get If You Successfully Complete This Course
  • 2 Installation & Setup
  • Getting Started
  • Step 1 - Install Truffle
  • Step 2 - Install & Start The Ethereum Client
  • Step 3 - Install The UI Foundation
  • Step 4 - Start Your Local Server
  • Let's Review
  • 3 The Expert Front-End Architecture
  • Getting Started
  • React (UI Components)
  • Redux (Application State Management)
  • Webpack Configuration
  • The Package.json File
  • The Application Shell
  • Routing With React Router
  • CSS Architecture Part I - Using CSS Modules
  • CSS Architecture Part II - Centralizing CSS Configuration
  • Directory Structure & Organization
  • BONUS: Material-UI & Third-Party Theming Libraries
  • Let's Review
  • 4 Connecting To A Smart Contract With Web3.js
  • Getting Started
  • Web3.js - The Ethereum JavaScript Library
  • Install The Solidity Compiler
  • Set The Provider
  • List Available Accounts
  • Compile The Smart Contract
  • The Smart Contract Bytecode
  • The Smart Contract ABI Interface
  • The Smart Contract Instance
  • Let's Review
  • 5 Coding The DApp Part I - Setting Up The Provider With MetaMask
  • TL;DR In this coding module, you start developiong the DApp prototype Proof Of Ex. I go over the entire Redux design pattern (repeatedly) with you as you begin to code.
  • 6 Coding The DApp Part II - Connecting The UI To The Smart Contract
  • TL;DR In this coding module, you see how to connect the professional React front-end to a Smart Contract via JavaScript. This is very special content not found elsewhere.
  • 7 Coding The DApp Part III - Registering An Asset On The Blockchain
  • TL;DR In this final coding module, you learn how to integrate MetaMask into your application to complete an entire UI checkout flow.

This is a Premium development guide. Invest the time to learn these skills, it will be worth it.

How to Write a React Dapp
For Ethereum

Learn how to build the applications of the future

Get Started Instantly

The Complete Course

30 Day Money Back Guarantee

The author.  Walking through the woods.

Hi, I’m Mark.

I'm a UI and Web Engineer located in the San Francisco Bay Area.

I believe in the promise of the open Web. So I spend a lot of time working with Web technologies, and teaching others how to do the same.

When I'm not working I'm usually outside (hiking, backcountry camping, biking, mountaineering), and I focus a lot on personal development.

If I live by any motto it would be this: work less, adventure more.

I think we're all here for a reason. I hope that you discover yours.