Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/celo-org/celo-composer

celo-composer is a starter project with all code needed to build, deploy, and upgrade a dapps on Celo.
https://github.com/celo-org/celo-composer

angular blockchain dapp flutter react react-native web3

Last synced: 9 days ago
JSON representation

celo-composer is a starter project with all code needed to build, deploy, and upgrade a dapps on Celo.

Awesome Lists containing this project

README

        


Celo

Celo Composer


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



GitHub Contributors


GitHub Contributors


Issues


GitHub pull requests


MIT License


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](https://celo.org/)
- [Solidity](https://docs.soliditylang.org/en/v0.8.19/)
- [Hardhat](https://hardhat.org/)
- [React.js](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
- [viem](https://viem.sh/)
- [Tailwind](https://tailwindcss.com/)

(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

```bash
npx @celo/celo-composer@latest create
```

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

```text
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.

```text
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`.

```text
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.

```text
- Minipay
- Valora
```

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

```text
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.

```text
πŸš€ Your starter project has been successfully created!
```

## Install Dependencies

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

```bash
yarn
```

If you prefer npm, you can run:

```bash
npm install
```

## Deploy a Smart Contract

Find the detailed instructions on how to run your smart contract in [packages/hardhat/README.md](./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](https://faucet.celo.org/alfajores).
3. Run the following commands from the `packages/hardhat` folder to deploy your smart contract to the Celo Testnet Alfajores:

```bash
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](./packages/react-app/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](https://cloud.walletconnect.com/)

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:

```bash
yarn dev
```

If you prefer npm, you can run:

```bash
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](https://ui.shadcn.com/) in this project, refer to the [UI Components Guide](./docs/UI_COMPONENTS.md).

## 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](./docs/DEPLOYMENT_GUIDE.md).

## Supported Frameworks

### React / Nextjs

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

Check [nextjs docs](https://nextjs.org/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](https://hardhat.org/hardhat-runner/docs/getting-started) 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](https://docs.celo.org/developer/build-on-minipay/overview) to learn more about it.

### Valora

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

Checkout [valora docs](https://docs.valora.xyz/) to learn more about it.

## Support

Join the Celo Discord server at . Reach out on the dedicated repo channel [here](https://discord.com/channels/600834479145353243/941003424298856448).

## Roadmap

See the [open issues](https://github.com/celo-org/celo-composer/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](https://twitter.com/CeloDevs)
- [Discord](https://discord.com/invite/celo)

(back to top)