Celo Composer

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

---

Table of Contents

1. About The Project
   • Built With
   • Prerequisites
2. How to use Celo Composer
   • Install Dependencies
   • Deploy a Smart Contract
   • Deploy Your Dapp Locally
   • Add UI Components
   • Deploy with Vercel
   • Supported Frameworks
   • 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 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.

npx @celo/celo-composer@latest create

Installation Steps

1. Enter a project name
2. Choose whether to use Hardhat (Yes/No)
3. Select a template (Minipay, Valora, etc.)
4. Provide project owner details
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)