Celo Composer

Build, deploy, and iterate quickly on decentralized applications using Celo.

Table of Contents

1. About The Project
1. Built With
2. Prerequisites
2. How to use Celo Composer
1. Install Dependencies
2. Deploy a Smart Contract
3. Deploy your Dapp Locally
4. Add UI Components
5. Deploy with Vercel
6. Supported Frameworks
7. Supported Templates
3. Usage
4. Support
5. Roadmap
6. Contributing
7. License
8. Contact

About The Project

Celo Composer allows you to quickly build, deploy, and iterate on decentralized applications using Celo. It provides a number of frameworks, templates, deployment and component support, and Celo specific functionality to help you get started with your next dApp.

It is the perfect lightweight starter-kit for any hackathon and for quickly testing out integrations and deployments on Celo.

(back to top)

Built With

Celo Composer is built on Celo to make it simple to build dApps using a variety of front-end frameworks, and libraries.

• Celo
• Solidity
• Hardhat
• React.js
• Next.js
• viem
• Tailwind

(back to top)

Prerequisites

• Node (v20 or higher)
• Git (v2.38 or higher)

How to use Celo Composer

The easiest way to start with Celo Composer is using @celo/celo-composer. This CLI tool lets you quickly start building dApps on Celo, including several templates. To get started, just run the following command, and follow the steps:

• Step 1

npx @celo/celo-composer@latest create

• Step 2: Provide the Project Name: You will be prompted to enter the name of your project.

What is your project name: 

• Step 3: Choose to Use Hardhat: You will be asked if you want to use Hardhat. Select Yes or No.

Do you want to use Hardhat? (Y/n)

• Step 4: Choose to Use a Template: You will be asked if you want to use a template. Select Yes or No.

Do you want to use a template?

• Step 5: Select a Template: If you chose to use a template, you will be prompted to select a template from the list provided.

- Minipay
- Valora

• Step 6: Provide the Project Owner's Name: You will be asked to enter the project owner's name.

Project Owner name:

• Step 7: Wait for Project Creation: The CLI will now create the project based on your inputs. This may take a few minutes.

• Step 8: Follow the instructions to start the project. The same will be displayed on the console after the project is created.

🚀 Your starter project has been successfully created!

Install Dependencies

Once your custom dApp has been created, just install dependencies, either with yarn:

   yarn

If you prefer npm, you can run:

   npm install

Deploy a Smart Contract

Find the detailed instructions on how to run your smart contract in packages/hardhat/README.md.

For quick development follow these three steps:

1. Change packages/hardhat/env.template to packages/hardhat/env and add your PRIVATE_KEY into the .env file.
2. Make sure your wallet is funded when deploying to testnet or mainnet. You can get test tokens for deploying it on Alfajores from the Celo Faucet.
3. Run the following commands from the packages/hardhat folder to deploy your smart contract to the Celo Testnet Alfajores:

npx hardhat ignition deploy ./ignition/modules/Lock.ts --network alfajores

Deploy your Dapp Locally

Find the detailed instructions on how to run your frontend in the react-dapp README.md.

Before you start the project, please follow these steps:

1. Rename the file: packages/react-app/.env.template to packages/react-app/.env

2. Open the newly renamed .env file and add your WalletConnect Cloud Project ID from WalletConnect Cloud

Once you've done that, you're all set to start your project!

Run the following commands from the packages/react-app folder to start the project:

   yarn dev

If you prefer npm, you can run:

   npm run dev

Thank you for using Celo Composer! If you have any questions or need further assistance, please refer to the README or reach out to our team.

🔥Voila, you have a dApp ready to go. Start building your dApp on Celo.

Add UI Components

To keep the Celo Composer as lightwieght as possible we didn't add any components but rather a guide on how to add the components you need yourself with a very simple to use components library. To learn how to add UI components using ShadCN in this project, refer to the UI Components Guide.

Deploy with Vercel

The Celo Composer is a great tool for hackathons and fast deployments. We created a guide for you, using the Vercel CLI to create a live deployment in minutes. For detailed instructions on deploying the Next.js app using Vercel CLI, refer to the Deployment Guide.

Supported Frameworks

React / Nextjs

• Support for Website and Progressive Web Application.
• Works with all major crypto wallets.

Check nextjs docs to learn more about it.

Hardhat

• Robust framework for building and testing smart contracts.
• Compatible with various Ethereum development tools and plugins.

Check hardhat docs to learn more about it.

Supported Templates

Minipay

• Pre-built template for creating a mini-payment application.
• Seamless integration with Celo blockchain for handling payments.

Checkout minipay docs to learn more about it.

Valora

• Template designed for Valora wallet integration.
• Facilitates easy wallet connectivity and transaction management.

Checkout valora docs to learn more about it.

Support

Join the Celo Discord server at https://chat.celo.org. Reach out on the dedicated repo channel here.

Roadmap

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

We welcome contributions from the community.

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

• @CeloDevs
• Discord

(back to top)