Learn how to create a decentralized application (DApp) using NextJS, React, ChakraUI, RainbowKit, and Wagmi on the Celo Network | Part 1

I want to do a tutorial that will be easily reusable by more specific tutorials I’ll write (or anyone else) so this tutorial will be more general on how to setup well NextJS, React, ChakraUI, RainbowKit and Wagmi. And to configure wagmi, so it works on both Celo mainnet and testnet.

This tutorial will likely be in 2 part
Part1:

  • Setup the repo, install required dependencies
  • Setup next, with optimal configuration for page loading optimization and SEO
  • Setup RainbowKit and Wagmi and configure them with both Celo Mainnet and Testnet
  • Deploy to Netlify

I recently wrote a tutorial on how to write and test a multi-signature contract (How to write a multi-signatures contract on Celo using Hardhat | Part 1/2 | Celo Documentation)
The goal is to ultimately build a DApp that allow the user to use his multi-signature easily, instead of have to code each multi-signature request as a script in Javascript. So I see this tutorial in two part as a middle step before going into the final series that will take this tutorial and give it a specific purposes.

Later on I can write more tutorials on writing and testing smart contract, then linking the next step to this tutorial and following up with giving the dapp a specific purpose to be use by the smart contract we will have written.
Typescript, React, Github