Hands-on Workshop: Build a Full-stack Blockchain App on Flow

Nik Kalyani

July 7, 2020

At TryCrypto, we're all about making full-stack blockchain app development easy. Flow, the blockchain from Dapper Labs, has made developer experience a priority. We teamed up with Flow to host a hands-on workshop for developers learning to work with Flow and Cadence, the programming language for the blockchain. In the workshop, TryCrypto co-founder Nik Kalyani walks through how to get started building a blockchain app on Flow.

About DappStarter

DappStarter is a full-stack blockchain application generator that involves three steps:

  1. Select the blockchain and features you want to implement in your dapp
  2. Download your full-stack custom source code for your blockchain app
  3. Customize the code and deploy!

The source code includes the smart contract, the web UI, unit tests, and server-side API code. The goal is not to provide a ready-to-use app (though it can certainly be used this way). Rather, DappStarter aims to get developers ~80% of the way to a production dapp, so they can get focus on creating the "special magic" of their specific dapp.

Install Flow CLI

You'll need to install the Flow CLI. Flow has done a great job with the docs, you can check the CLI documentation out here. Getting the CLI running gives developers the ability to run an emulator, add a VS extension for code highlighting, and more.

You can install the Flow CLI with this command:

sh -ci "$(curl -fsSL https://storage.googleapis.com/flow-cli/install.sh)

Get started with Flow!

In order to get started working with Flow, we're going to use DappStarter to generate a full-stack blockchain app and then we'll dive into the code generated by DappStarter.

Generate your project

  1. Go to https://dappstarter.trycrypto.com/
  2. Under "Smart Contract Stack", go to "Blockchains" and select Flow
  3. Under "Languages" select "Cadence"
  4. Select your front-end framework
  5. Under "Smart Contract Features", select "Non-fungible Tokens"
  6. Under "Dapp Customization", enter a name for your dapp
  7. Navigate to the bottom of the page and click "Create Dapp"

You should now see a page with a like to your custom GitHub repository. This repo has the custom features that you selected in DappStarter. Sometimes GitHub takes a couple minutes to update all of the code into a repo, so if you see an empty repo, wait a minute or two and refresh. If you still don't see your repo, please open a ticket at http://support.trycrypto.com and we'll get back to you ASAP to troubleshoot. You can also ask questions and get help on our Discord.

Get your project running locally

You'll need to have the following pre-requisites installed:

  1. Clone the repository or download it to your local machine and open in your IDE
  2. Install dependencies by running the following command:
yarn
  1. Once the dependencies are done installing, get the dapp running locally with the following command:
yarn start

When you run yarn start, this launches the Flow emulator and creates user accounts (which you can see in the terminal). It compiles everything, runs webpack, and generates the UI.

Your dapp should now open up in your browser on localhost. Now you can play around with your dapp!

Smart Contracts on Flow

Once you have your dapp running, you can make all the changes you want. To goal of DappStarter is to get you further ahead so you can tinker and focus on adding your dapp magic.

Repo Overview

Check out our basic repository overview that outlines the overarching architecture of a DappStarter project. We'll follow this post with a more in-depth exploration of important parts of the project. Stay tuned for that post.

Notes on Flow and Cadence

DappState.cdc

DappState.cdc is a .cdc file, which means it is a Cadence file. Cadence is the smart contract language on Flow. DappStarter intelligently stitches together the smart contract code for all of the feature blocks you've chosen and handles dependencies and other nuances of contracts with more complex functionality.

When you generate a project with NFT features on Flow, you'll see pretty extensive NFT functionality in DappState.cdc. This includes metadata for an NFT and all of the functionality you might need for developing a dapp using NFTs, like withdrawing, depositing, etc. It also has capabilities for an administrative user or restricted user to mint a token and assign it.

Syntax Differences

One thing that takes some getting used to in Cadence is syntax using a backward pointing arrow. Flow is a resource-based language. To prevent errors and minimize security risk, all resources in Flow can only exist in one place at any given time. The architecture of the Flow blockchain and Cadence work harmoniously to make that happen. While the difference in syntax takes time to learn, the resource model used by Flow is quite sophisticated and has the potential to improve experience for end-users.

New Releases and Updates

Cadence is still in development and as the Flow team continues to develop Cadence, we'll continue to add functionality to DappStarter to make it super simple to create dapps on Flow! Be sure to follow TryCrypto on Twitter and join our Discord to stay updated on new releases and exciting new features!

Special Surprise ‒ Project Mondgram

As we build more features for Flow into DappStarter, we want to provide an opportunity for developers to explore Flow with us! That's why we're putting together Project Mondgram, a community project where we'll build an NFT-implementation of Piet Mondrian-inspired art on Flow! We're announcing details on this soon ‒ if you're interesting in taking part, make sure to join our Discord.


*The DappStarter Flow experience is in rapid development, so be sure to check DappStarter periodically to see new changes and updates.

💌
Join the newsletter & get updates to your inbox.
Your information has been saved.
Looks like we're having trouble