Celo Composer

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

---

Table of Contents

• Table of Contents
• About The Project
• Built With
• Prerequisites
• How to use Celo Composer
  • Interactive Mode (Recommended)
  • Inline Commands Mode
    • Available Flags:
  • Installation Steps
• Install Dependencies
• Deploy a Smart Contract
• Deploy Your Dapp Locally
• Add UI Components
• Deploy with Vercel
• Supported Frameworks
  • React / Next.js
  • Hardhat
• Supported Templates
  • Minipay
  • Valora
• Support
• Roadmap
• Contributing
• License
• Contact

---

About The Project

Celo Composer allows you to quickly build, deploy, and iterate on decentralized applications using Celo. It provides a variety of frameworks, templates, deployment tools, UI components, and Celo-specific functionality to accelerate your dApp development.

This is an ideal lightweight starter-kit for hackathons and rapid prototyping on Celo.

---

Built With

Celo Composer is built on the Celo ecosystem and supports multiple frameworks and libraries:

• Celo
• Solidity
• Hardhat
• React.js
• Next.js
• Viem
• Tailwind CSS

---

Prerequisites

Ensure you have the following installed:

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

---

How to use Celo Composer

The easiest way to start is by using the @celo/celo-composer CLI tool. It helps bootstrap dApps with different templates.

Interactive Mode (Recommended)

Run the CLI tool and follow the interactive prompts:

npx @celo/celo-composer@latest create

Inline Commands Mode

For automation or CI/CD pipelines, you can also use inline commands with flags:

# Basic usage with all options
npx @celo/celo-composer@latest create --name my-celo-app --owner "John Doe" --hardhat --template Minipay

# Short flags version
npx @celo/celo-composer@latest create -n my-app -o "Jane Smith" --no-hardhat -t Valora

# Only specify some options (remaining will be prompted)
npx @celo/celo-composer@latest create --name my-project --hardhat

Available Flags:

• --name, -n: Name of the project (will be converted to kebab-case)
• --owner, -o: Project owner name
• --hardhat: Include Hardhat in the project
• --no-hardhat: Exclude Hardhat from the project
• --template, -t: Template to use (Minipay, or Valora)

Installation Steps

1. Enter a project name (or use --name flag)
2. Choose whether to use Hardhat (or use --hardhat/--no-hardhat flags)
3. Select a template (or use --template flag)
4. Provide project owner details (or use --owner flag)
5. Wait for project creation to complete
6. Follow the on-screen instructions to start your project

---

Install Dependencies

Once the project is set up, install dependencies:

yarn
# or
npm install

---

Deploy a Smart Contract

For detailed instructions, refer to packages/hardhat/README.md.

Quick steps:

1. Rename packages/hardhat/.env.template to packages/hardhat/.env and add your PRIVATE_KEY.
2. Ensure your wallet has test funds from the Celo Faucet.
3. Deploy the contract:

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

---

Deploy Your Dapp Locally

Before starting your project, follow these steps:

1. Rename .env.template to .env in packages/react-app/.
2. Add your WalletConnect Project ID from WalletConnect Cloud.

Start the local server:

yarn dev
# or
npm run dev

---

Add UI Components

To keep Celo Composer lightweight, UI components are not pre-installed. You can easily add components using ShadCN. Refer to the UI Components Guide for details.

---

Deploy with Vercel

Deploying with Vercel is quick and easy. Follow our Deployment Guide for step-by-step instructions.

---

Supported Frameworks

React / Next.js

• Supports web and PWA applications
• Compatible with major crypto wallets
  📖 Next.js Docs

Hardhat

• Powerful tool for smart contract development
• Works with various Ethereum dev tools
  📖 Hardhat Docs

---

Supported Templates

Minipay

• Pre-configured for building a mini-payment dApp on Celo
  📖 Minipay Docs

Valora

• Designed for easy Valora wallet integration
  📖 Valora Docs

---

Support

Join the Celo community on Discord:
📌 Celo Discord
💬 Repo Support Channel

---

Roadmap

See the open issues for upcoming features and bug tracking.

---

Contributing

We welcome community contributions!
Please refer to our contribution guidelines to get started.

---

License

Distributed under the MIT License. See LICENSE.txt for details.

---

Contact

• Twitter: @CeloDevs
• Discord: Celo Developer Community

(Back to top)