Skip to main content

Introduction to Celo Progressive DAppstarter

· 3 min read

Quickly develop full-stack progressive web applications on the Celo blockchain.


Getting started

Welcome to the Celo Progressive Dappstarter—a starter pack to get you up and running fast with Celo DApp development. The goal of this post is to get you up and running Celo Progressive Dapp starter in about 15 minutes or less. From there you can quickly build, iterate, and deploy new DApps on the Celo blockchain.

Here's a quick look at what you'll build

dappstarter

Watch the video

Check out this video for an overview of the topics covered in this post.

README

View the project README for a quick summary of steps in this video.

Prerequisites

To start building, you’ll need a basic understanding of web development, Node (v12), yarn, and Git.

  • Node (v12), NVM
  • Yarn
  • Git

Project stack

The Celo Progressive Dappstarter uses the Next.js React framework with Material UI, and use-contractkit Celo library to get you started with building a responsive, web3 DApp quickly. The goal is to get you started quickly for ha reference and extend it with any web3 packages you are familiar with.

Set up your project repo

Navigate to the project repo and select Use this template

dappstarter

Add a repository name, description and click Create repository from template.

dappstarter

Include all branches

This template will soon include additional branches with new features. If you would like to include these branches in your repository, select Include all branches.

Create a local project

From your new GitHub repository, select code, and copy the GitHub URL for your project.

dappstarter

Open your terminal, navigate to your project directory, and git clone your project using the GitHub URL.

git clone https://github.com/path-to-your-project-repo

dappstarter

Navigate into your Celo project and run nvm use to switch to a Celo compatible Node version. Celo is compatible with Node v12 as specified in .nvmrc of the project folder.

cd celo-progressive-dapp-starter
nvm use

dappstarter

Setup your testnet account

Create a new account and print the account number and private key using hardhat create-account.

npx hardhat create-account

dappstarter

Copy the testnet account address, paste it into the Celo Testnet Faucet and select Get Started to transfer funds into your testnet account.

dappstarter

Import a new MetaMask account using your private key to view your newly funded Testnet Account.

dappstarter

MetaMask Setup

Learn more about setting up your Alfajores Testnet with MetaMask here

Deploy smart contracts

Change into the hardhat directory and install the project dependencies.

cd packages/hardhat
yarn install

dappstarter

Open your projects .env file and replace PRIVATE_KEY with the account private key from your terminal.

dappstarter

Return to your terminal and run yarn deploy to deploy your smart contracts.

Redeploy contracts

You can run yarn deploy --reset to force re-deploy your contracts to any chain.

dappstarter

Start the front-end

Navigate into the react-app directory and run yarn install to install the project front-end dependencies.

cd packages/react-app
yarn install
yarn dev

dappstarter

Run yarn dev to start your development environment.

yarn dev

dappstarter

Open localhost:3000 to view your project.

dappstarter

Explore your dApp

Enter a value in the write contract function and confirm the transaction to store a value.

dappstarter

Once the transaction has been complete (approximately 5 seconds) you may view the transaction using the alert that appears with a link to the Celo Alfajores Block Explorer.

dappstarter

You should now be able to view the updated storage value using the Read Storage Contract function.

dappstarter

View the Greeter Contract using the tabs to interact with a similar contract that allows you to read and write string values rather than numbers.

dappstarter

Customize your dApp

Smart contracts for this project are in the packages/hardhat/contracts folder.

dappstarter

The deploy scripts for each smart contract are found in packages/hardhat/deploy/00-deploy.js.

dappstarter

The front-end code for each smart contract interface are found in packages/react-app/components and are named as components that should be similar to the name of the smart contract.

dappstarter

Redeploy contracts

You can run yarn deploy --reset to force re-deploy your contracts to any chain.

View on Mobile

Serve your React app to your mobile device for testing via a tunnel. Next.js defaults to serving your app on port 3000.

npx localtunnel --port 3000
Local Tunnel

Read more about localtunnel here.

dappstarter

Your Celo dApp is now available on your mobile device at the URL provided in your terminal.

Contribute to the project

We welcome contributions to this repository! If you decide to try this out and find something confusing, consider opening a pull request to make things more clear for the next developer. If you improve the user interface or create new components that you think might be useful for other developers, consider opening a PR.

We will happily compensate you for your contributions. Anywhere between 5 and 50 cUSD (or more) will be awarded to contributors depending on the scope of the work as determined by the Celo Foundation Developer Relations team.

Get Support

Join the Celo Discord server or reach out on the dedicated repo channel here.