A simple React boilerplate for Celo projects

by React

Celo React Boilerplate

This repository contains a simple React boilerplate for Celo projects.

1. Tech Stack

This boilerplate uses the following tech stack:

  • React – A JavaScript library for building user interfaces.
  • use-Contractkit – A frontend library for interacting with the Celo blockchain.
  • Hardhat – A tool for writing and deploying smart contracts.
  • Bootstrap – A CSS framework that provides responsive, mobile-first layouts.

2. Quick Start

To get this project up running locally, follow these simple steps:

2.1 Clone the repository:

git clone https://github.com/dacadeorg/celo-react-boilerplate.git

2.2 Navigate to the directory:

cd celo-react-boilerplate

2.3 Install the dependencies:

npm install

2.4 Run the dapp:

npm start

To properly test the dapp you will need to have a Celo wallet with testnet tokens. This learning module NFT Contract Development with Hardhat will walk you through the process of creating a Metamask wallet and claiming Alfajores testnet tokens.

The boilerplate should behave like this:

3. Smart-Contract Deployment

You can use your own smart contract that the dapp will interact with by following the steps below:

3.1 Add a new smart contract

Update the contracts/MyContract.sol file with your solidity code.

Notice that if you change the contract and file name you will also need to update the deploy script that we will use later.

3.2 Compile the smart contract

npx hardhat compile

3.3 Run tests on smart contract

npx hardhat test

3.4 Update env file

  • Create a file in the root directory called “.env”
  • Create a key called MNEMONIC and paste in your mnemonic key. e.g
MNEMONIC = "...";

In this case, we are using a mnemonic from an account created on Metamask. You can copy it from your Metamask account settings. An account created on the Celo extension wallet will not work.

You can find more details about the whole process in the Dacade NFT Contract Development with Hardhat learning module. It will also show you how to get testnet tokens for your account so you can deploy your smart contract in the next step.

3.5 Deploy the smart contract to the Celo testnet Aljafores

npx hardhat run --network alfajores scripts/deploy.js

This command will update the src/contract files with the deployed smart contract ABI and contract address.

GitHub

View Github