How to quickly create a React Starter template using Celo-composer.
Tags: celo, celocomposer, blockchain, web3
Published: 2023-02-21 09:30:18

## Overview
With Celo-Composer, building fullstack dApps on celo blockchain network is extremely easy and quick. In this tutorial, you will learn how to 

- setup metamask 
- add Celo Alfajores Testnet network to metamask
- fund your testnet account
- generate a React.js template
- run your frontend on localhost and connect wallet

**A look at the output on localhost**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k70ld8si5pnmuujlvj1a.png)

## Prerequisite
To fully follow up with this tutorial, you will need to have 

- [Node](https://nodejs.org/en/download/) or [Nvm](https://github.com/nvm-sh/nvm) installed on your system
- general understanding on running commands on the terminal
- good knowledge on [React](https://reactjs.org/) 


## Setting up Metamask and connecting to Celo
I'd recommend going through this, [3-simple steps to connect your metamask wallet to celo](https://docs.celo.org/blog/tutorials/3-simple-steps-to-connect-your-metamask-wallet-to-celo) for a detailed explanation to this, which is from the Celo documentation tutorials.
- After setting up metamask extension, to easily connect to the Celo Alfajores network, go to [chainlist](https://chainlist.org/) which is a site that has a list of EVM networks. 
- Tick on the checkbox, Include Testnets and search for Celo Alfajores Tesnet. Connect your wallet and then select Add to Metamask.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh3lwnsstbwxeyvq2ly9.png)

- To fund your wallet address, visit [celo-faucet](https://faucet.celo.org/), copy your wallet address from metamask and paste it in the Account Address so that your account can get funded with Celo.

## Generate React template
- Open the terminal and paste this command
`npx @celo/celo-composer create`
This is a command line tool which will help us in quickly generating a template for dApp development and in this tutorial, we will be opting for React, which is the frontend framework we will be using.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9dy71q7vrm7az64kzhn.png)

- After selecting React, we will be opting for [Rainbowkit-celo](https://docs.celo.org/developer/rainbowkit-celo) which is a component that makes it easy for us to integrate wallet connection into any dApps.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pre62o596oy0xfb2511r.png)

- After selecting Rainbowkit-celo, you can either opt for [Hardhat](https://hardhat.org/) or [Truffle](https://trufflesuite.com/) which will be for smart contract development or you could just opt for None.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4z551aqfnu7hi4pdnzt.png)

- Next, we will be selecting either No or Yes to creating a [subgraph](https://thegraph.com/docs/en/developing/creating-a-subgraph/), which will help in querying data from the celo blockchain.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dktly4evsqmp3aqmfxqw.png)

- Next, You'll be providing a project name for the dApp and voila, your React template will be generated and you can start building your dApp.

- On your terminal, navigate to your project's directory using this command `cd [project-name]/packages/react-app` and 
run `yarn` to install all the dependencies needed to run the application.
When the installation is successful, you will get an output like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqj297m747qykzigs4z4.png)

- Next up, run this command `yarn run dev` to start up the server in your localhost

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atdtc8s5bjrwrlumg3c6.png)

- Copy the local host url http://localhost:3000 and open it up on the browser. And there you have it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb7pjxro50r7hpok6po3.png)