React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Solidity is an object-oriented, high-level language for implementing smart contracts.

solidity

Ethereum is a decentralized, open-source blockchain with smart contract functionality. 

ethereum

**Links to code:**
- [React UI Starter Repo](https://github.com/ryancharris/nftix-demo-ui) 
- [Solidity Base64 Utilities](https://gist.github.com/ryancharris/ed5c4f161f2ab049adf41a7f3eed2229)
- [Final Smart Contract](https://gist.github.com/ryancharris/b1be47faf3f141f21fbd5b42c80da2e3)

NFTs, non-fungible tokens, have taken the online world by storm ushering in the proclamation of a new world-wide web... web3.

For most, NFTs mean profile pictures (pfps). 🐵

This isn't the most practical use case, even if it is a lot of fun

Even if you wanted to create useful NFTs, it’s not easy to get started. 

Since the tooling is still being developed, it can be confusing as to where to get started. It also doesn't help that there's a paradigm shift with app development from web2 to web3.

Here be dragons 🐉

**This course is here to get you through that initial learning curve and frustrating lack of answered questions and good documentation.**

You will be building a ticketing and proof-of-attendance service complete with wallet QR code scanning. Very useful indeed!

**This course is here to get you through that initial learning curve and frustrating lack of answered questions and good documentation.** 

You will be building a ticketing and proof-of-attendance service complete with wallet QR code scanning. Very useful indeed!

[![nft in action](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1643211710/course-resources/build-an-nft-based-ticketing-system-1a2f387c/nft-landing-page-screen-shot.png)](https://egghead.io/lessons/ethereum-create-a-new-nft-project-with-scaffold-eth)

Through building this project you will learn the **general development lifecycle** of NFT smart contracts and dApps giving you the skills to start your own projects.

By the end of this course, you will be able to do the following 

- Use the OpenZeppelin Solidity library to create NFT smart-contracts
- Deploy smart contracts to Ethereum testnets
- Host static assets on IFPS
- Create a React dApp that interacts with your smart-contract API
- Confirm a wallet owns an NFT

Kamil Khadeyev

Simplify the process of creating a new smart contract by cloning the scaffold-eth repo. 

Once you’ve cloned the scaffold you can run a blockchain locally with `yarn chain` and also run your frontend with `yarn start`

You can find the repo here -> [https://github.com/scaffold-eth/scaffold-eth](https://github.com/scaffold-eth/scaffold-eth)

Create a New NFT Project with scaffold-eth

Simply deploy your smart contracts with the scaffold by running `yarn deploy`.  Once deployed your can view your contract in the UI. 

But, the default smart contract that comes with scaffold-eth isn’t useful for our NFT ticketing app. So, we’ll edit the contract to have a `saleIsActive` state and write a couple of functions that update the state to `true` or `false`

Deploy a Smart Contract to Localhost with scaffold-eth

ERC-721 is the Non-Fungible Token (NFT) standard that implements an API for tokens inside of Smart Contracts. 

Luckily, the OpenZeppelin library makes it easy to enforce this standard with the `ERC721URIStorage` class! We just import the `ERC721URIStorage` class and specify that our contract is an instance of it. Then, set the return type in our constructor to `ERC721`.

Create an ERC-721 Token with OpenZeppelin

We need our users to be able to mint their NFT tickets. We also need to limit the number of available tickets. 

Start by making sure each NFT has a unique ID. OpenZeppelin gives us the handy utility `Counters` for this. We will increment the ID each time an NFT is minted. 

Once your NFTs have IDs you can use the inherited `_safeMint` function from OpenZeppelin in your `mint` function to mint an NFT for the initiator of the function. Also, make sure to increment the ID and decrement the number of remaining NFTs.

Add a Mint Function to Your NFT Smart Contract

Let’s add an image to our SVG. We’ll start by creating a base 64 encoded SVG using `Base64` and `OpenZeppelin`. 

Then, in order to actually associate an image to our token, we’ll have to apply it to our token’s metadata. We’ll create a base64 JSON object that includes our image, save it as a string variable that lives in memory, then call the `_setTokenURI` method with our NFT’s ID and our metadata string.

Add an Image to an NFT with Token Metadata

We want to actually sell our NFT tickets, so let’s set a mint price. 

In our smart contract, we can just set the price to an integer variable. We’ll then make our mint function `payable`. When a function is payable in Solidity it means it can receive ether. 

Once our mint function is payable, we can call the `require` function to check if the initiator of the function is sending enough ether.

Set a Mint Price on Your NFT Smart Contract

Right now our sale can be open and closed by anyone. We want to take ownership of our smart contract to prevent this.

We'll use `Ownable` from OpenZeppelin, Set the `openSale` and `closeSale` public functions to `onlyOwner`, and then set the owner of the smart contract in the deploy script.

Restrict Smart Contract Functions to a Specified Owner

So far we’ve been deploying to a blockchain running locally. Let’s get our smart contract onto the Rinkeby test network. 

Create an account on the command line and then get some ether through a faucet. In this lesson, we used [https://faucets.chain.link/rinkeby](https://faucets.chain.link/rinkeby) to get our fake ether. Then we use our same deploy script, except with the `--network` flag that we set to `rinkeby`.

Deploy a Smart Contract to the Rinkeby Testnet

Let’s create a dApp that connect to a smart contract on the Rinkeby test network! 

I’ve created a starter repo ****for you. Just run `git clone git@github.com:ryancharris/nftix-demo-ui.git`. Then just run `yarn` and add the smart contract’s address to an ENV file.

Set Up a React dApp From a Starter

We need a way for our user’s MetaMask wallets to connect to our dApp. We can accomplish this with the `ethereum` object that MetaMask injects into the browser’s `window`. 

When the user connects we’ll save their wallet address as state using the `useState` hook.

Support MetaMask Connections to a React dApp

Users should also be given the option to disconnect their wallet from your dApp.

There isn’t a programatic way to accomplish this, but we can remove their wallet address from state, adjust the UI, and use `react-router` to navigate them to root in order to provide a clear UX.

Disconnect MetaMask from a React dApp

Since we are storing the user’s wallet address in React state, it is lost when the dApp is reloaded. To fix this, we’ll cache the address in localStorage. 

We’ll use the `useEffect` hook to look for an address in localStorage if there isn’t one in local state.

Cache a MetaMask Wallet Address in localStorage

Now it’s time to connect your dApp to your smart contract on the Rinkeby test network. 

You will copy over the `nfTixBooth.json` file from the smart contract project. Then, using the `ethers` library, you’ll connect to the smart contract.

Connect a React dApp to a Smart Contract Using ethers.js

We don’t want any user to be able to access admin pages. Let’s check if the user’s wallet address matches the address of our connected smart contract. 

This can be done by using OpenZeppelin to get the owner address from the smart contract, then comparing that to the currently connected address.

Fetch the Owner's Wallet Address From a Smart Contract

We need to give the owner of the smart contract the ability to open and close an NFT sale in the React dApp UI. 

We’ll use the `.openSale` and `.closeSale` methods off of the `connectedContract` stored in React state. Then for the best possible experience we’ll create a pending state while the sale is opening or closing. During the pending state the buttons will be disabled. 

Then we’ll bring in `useToast` from chakra-ui to give a message depending on if the opening/closing of the sale was successful or not.

Open and Close an NFT Sale From a React dApp

It’s helpful for users to know how many NFTs are currently available and how many there are total.  

This information can be found on the smart contract. In our dApp we can get it off our `connectedContract`, stored locally in React state, using the `totalTicketCount` and `availableTicketCount` methods.

Fetch Mint Info From a Smart Contract

Time to set up our dApp to actually mint an NFT when the buy button is clicked. 

`.mint` is called on our `connectedContract` with an object containing a `value` property. The value property is the NFTs cost in gwei. 

Then to polish everything up, we’ll add a loading state, and link the user to the transaction on Etherscan using `useToast`

Mint an NFT from a React dApp

With the `QrReader` component from `react-qr-scanner` library, scanning a user’s wallet QR code is straightforward. 

We first make sure that the QR reader can be open and closed in the UI. Then using the `onScan` prop on `QrReader`, we get the wallet address from the QR code and add it to local state.

Scan an Ethereum Wallet's QR Code

To confirm ownership we first have to add a `confirmOwnership` method to our smart contract and redeploy it. 

Then, we can call that `confirmOwnership` method on the connected smart contract within a `useEffect` hook in our React dApp.

Confirm a Wallet Owns an NFT in a Smart Contract

A placeholder image isn’t going to cut it for our awesome NFT tickets. 

We can upload our own images to IPFS at [https://www.pinata.cloud/](https://www.pinata.cloud/)

Upload Static Assets to IPFS with Pinata

We want to update the “Checked In” property on our NFT tickets once a user checks in with our dApp. 

To accomplish this we create `checkIn` method in our smart contract. To write `checkIn` we can just copy and paste a large portion of our `mint` method and remove the call to `safeMint`, set the id to the user’s token, set Checked In to `true`, and replace the placeholder image with our IPFS image.

Update an NFT’s Image and Other Metadata

Let’s display a user’s NFT ticket in our dApp. 

Using Axios, we can make a call to OpenSea’s API, passing in the user’s address and the smart contract address as params.

Build a Practical NFT Ticketing Service with Solidity and React

Ryan Harris

Credits

Course Content