Skip to content

Commit e2d2053

Browse files
sergeypanin1994sergeypanin1994
committed
docs: improved README formatting and clarity
- Fixed typos and improved consistency - Standardized formatting for better readability - Updated outdated links and enhanced descriptions
1 parent 87dbb7d commit e2d2053

1 file changed

Lines changed: 123 additions & 193 deletions

File tree

‎README.md‎

Lines changed: 123 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<!-- TITLE -->
22
<p align="center">
33
<img width="100px" src="https://github.com/celo-org/celo-composer/blob/main/images/readme/celo_isotype.svg" align="center" alt="Celo" />
4-
<h2 align="center">Celo Composer</h2>
5-
<p align="center">Build, deploy, and iterate quickly on decentralized applications using Celo.</p>
4+
<h2 align="center">Celo Composer</h2>
5+
<p align="center">Build, deploy, and iterate quickly on decentralized applications using Celo.</p>
66
</p>
7-
<p align="center">
8-
<a href="https://github.com/celo-org/celo-composer/graphs/stars">
9-
<img alt="GitHub Contributors" src="https://img.shields.io/github/stars/celo-org/celo-composer?color=FCFF52" />
7+
8+
<p align="center">
9+
<a href="https://github.com/celo-org/celo-composer/stargazers">
10+
<img alt="GitHub Stars" src="https://img.shields.io/github/stars/celo-org/celo-composer?color=FCFF52" />
1011
</a>
1112
<a href="https://github.com/celo-org/celo-composer/graphs/contributors">
1213
<img alt="GitHub Contributors" src="https://img.shields.io/github/contributors/celo-org/celo-composer?color=E7E3D4" />
@@ -15,254 +16,183 @@
1516
<img alt="Issues" src="https://img.shields.io/github/issues/celo-org/celo-composer?color=E7E3D4" />
1617
</a>
1718
<a href="https://github.com/celo-org/celo-composer/pulls">
18-
<img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/celo-org/celo-composer?color=E7E3D4" />
19+
<img alt="GitHub Pull Requests" src="https://img.shields.io/github/issues-pr/celo-org/celo-composer?color=E7E3D4" />
1920
</a>
2021
<a href="https://opensource.org/license/mit/">
2122
<img alt="MIT License" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
2223
</a>
23-
</p>
2424
</p>
2525

26-
<!-- TABLE OF CONTENTS -->
27-
28-
<div>
29-
<summary>Table of Contents</summary>
30-
<ol>
31-
<li><a href="#about-the-project">About The Project</a></li>
32-
<ol>
33-
<li><a href="#built-with">Built With</a></li>
34-
<li><a href="#prerequisites">Prerequisites</a></li>
35-
</ol>
36-
<li><a href="#how-to-use-celo-composer">How to use Celo Composer</a></li>
37-
<ol>
38-
<li><a href="#install-dependencies">Install Dependencies</a></li>
39-
<li><a href="#deploy-a-smart-contract">Deploy a Smart Contract</a></li>
40-
<li><a href="#deploy-your-dapp-locally">Deploy your Dapp Locally</a></li>
41-
<li><a href="#add-ui-components">Add UI Components</a></li>
42-
<li><a href="#deploy-with-vercel">Deploy with Vercel</a></li>
43-
<li><a href="#supported-frameworks">Supported Frameworks</a></li>
44-
<li><a href="#supported-templates">Supported Templates</a></li>
45-
</ol>
46-
<li><a href="#usage">Usage</a></li>
47-
<li><a href="#support">Support</a></li>
48-
<li><a href="#roadmap">Roadmap</a></li>
49-
<li><a href="#contributing">Contributing</a></li>
50-
<li><a href="#license">License</a></li>
51-
<li><a href="#contact">Contact</a></li>
52-
</ol>
53-
</div>
54-
55-
<!-- ABOUT THE PROJECT -->
56-
57-
## About The Project
58-
59-
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.
60-
61-
It is the perfect lightweight starter-kit for any hackathon and for quickly testing out integrations and deployments on Celo.
62-
63-
<p align="right">(<a href="#top">back to top</a>)</p>
64-
65-
## Built With
66-
67-
Celo Composer is built on Celo to make it simple to build dApps using a variety of front-end frameworks, and libraries.
68-
69-
- [Celo](https://celo.org/)
70-
- [Solidity](https://docs.soliditylang.org/en/v0.8.19/)
71-
- [Hardhat](https://hardhat.org/)
72-
- [React.js](https://reactjs.org/)
73-
- [Next.js](https://nextjs.org/)
74-
- [viem](https://viem.sh/)
75-
- [Tailwind](https://tailwindcss.com/)
76-
77-
<p align="right">(<a href="#top">back to top</a>)</p>
78-
79-
<!-- GETTING STARTED -->
80-
81-
## Prerequisites
82-
83-
- Node (v20 or higher)
84-
- Git (v2.38 or higher)
26+
---
8527

86-
## How to use Celo Composer
28+
## **Table of Contents**
29+
1. [About The Project](#about-the-project)
30+
- [Built With](#built-with)
31+
- [Prerequisites](#prerequisites)
32+
2. [How to use Celo Composer](#how-to-use-celo-composer)
33+
- [Install Dependencies](#install-dependencies)
34+
- [Deploy a Smart Contract](#deploy-a-smart-contract)
35+
- [Deploy Your Dapp Locally](#deploy-your-dapp-locally)
36+
- [Add UI Components](#add-ui-components)
37+
- [Deploy with Vercel](#deploy-with-vercel)
38+
- [Supported Frameworks](#supported-frameworks)
39+
- [Supported Templates](#supported-templates)
40+
3. [Usage](#usage)
41+
4. [Support](#support)
42+
5. [Roadmap](#roadmap)
43+
6. [Contributing](#contributing)
44+
7. [License](#license)
45+
8. [Contact](#contact)
8746

88-
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:
89-
90-
- Step 1
91-
92-
```bash
93-
npx @celo/celo-composer@latest create
94-
```
47+
---
9548

96-
- Step 2: Provide the Project Name: You will be prompted to enter the name of your project.
49+
## **About The Project**
9750

98-
```text
99-
What is your project name:
100-
```
51+
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.
10152

102-
- Step 3: Choose to Use Hardhat: You will be asked if you want to use Hardhat. Select Yes or No.
53+
This is an ideal lightweight starter-kit for hackathons and rapid prototyping on Celo.
10354

104-
```text
105-
Do you want to use Hardhat? (Y/n)
106-
```
55+
---
10756

108-
- Step 4: Choose to Use a Template: You will be asked if you want to use a template. Select `Yes` or `No`.
57+
## **Built With**
58+
Celo Composer is built on the Celo ecosystem and supports multiple frameworks and libraries:
10959

110-
```text
111-
Do you want to use a template?
112-
```
60+
- [Celo](https://celo.org/)
61+
- [Solidity](https://docs.soliditylang.org/)
62+
- [Hardhat](https://hardhat.org/)
63+
- [React.js](https://reactjs.org/)
64+
- [Next.js](https://nextjs.org/)
65+
- [Viem](https://viem.sh/)
66+
- [Tailwind CSS](https://tailwindcss.com/)
11367

114-
- Step 5: Select a Template: If you chose to use a template, you will be prompted to select a template from the list provided.
68+
---
11569

116-
```text
117-
- Minipay
118-
- Valora
119-
```
70+
## **Prerequisites**
71+
Ensure you have the following installed:
12072

121-
- Step 6: Provide the Project Owner's Name: You will be asked to enter the project owner's name.
73+
- **Node.js** (v20 or higher)
74+
- **Git** (v2.38 or higher)
12275

123-
```text
124-
Project Owner name:
125-
```
76+
---
12677

127-
- Step 7: Wait for Project Creation: The CLI will now create the project based on your inputs. This may take a few minutes.
78+
## **How to use Celo Composer**
12879

129-
- Step 8: Follow the instructions to start the project. The same will be displayed on the console after the project is created.
80+
The easiest way to start is by using the `@celo/celo-composer` CLI tool. It helps bootstrap dApps with different templates.
13081

131-
```text
132-
🚀 Your starter project has been successfully created!
82+
```bash
83+
npx @celo/celo-composer@latest create
13384
```
13485

135-
## Install Dependencies
136-
86+
### **Installation Steps**
87+
1. **Enter a project name**
88+
2. **Choose whether to use Hardhat** (Yes/No)
89+
3. **Select a template** (Minipay, Valora, etc.)
90+
4. **Provide project owner details**
91+
5. **Wait for project creation to complete**
92+
6. **Follow the on-screen instructions to start your project**
13793

138-
Once your custom dApp has been created, just install dependencies, either with yarn:
94+
---
13995

140-
```bash
141-
yarn
142-
```
143-
144-
If you prefer npm, you can run:
96+
## **Install Dependencies**
97+
Once the project is set up, install dependencies:
14598

14699
```bash
147-
npm install
100+
yarn
101+
# or
102+
npm install
148103
```
149104

150-
## Deploy a Smart Contract
151-
152-
Find the detailed instructions on how to run your smart contract in [packages/hardhat/README.md](./packages/hardhat/README.md).
105+
---
153106

154-
For quick development follow these three steps:
107+
## **Deploy a Smart Contract**
108+
For detailed instructions, refer to [`packages/hardhat/README.md`](./packages/hardhat/README.md).
155109

156-
1. Change `packages/hardhat/env.template` to `packages/hardhat/env` and add your `PRIVATE_KEY` into the `.env` file.
157-
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).
158-
3. Run the following commands from the `packages/hardhat` folder to deploy your smart contract to the Celo Testnet Alfajores:
110+
Quick steps:
111+
1. Rename `packages/hardhat/.env.template` to `packages/hardhat/.env` and add your `PRIVATE_KEY`.
112+
2. Ensure your wallet has test funds from the [Celo Faucet](https://faucet.celo.org/alfajores).
113+
3. Deploy the contract:
159114

160115
```bash
161116
npx hardhat ignition deploy ./ignition/modules/Lock.ts --network alfajores
162117
```
163118

164-
## Deploy your Dapp Locally
165-
166-
Find the detailed instructions on how to run your frontend in the [`react-dapp` README.md](./packages/react-app/README.md).
167-
168-
Before you start the project, please follow these steps:
169-
170-
1. Rename the file:
171-
packages/react-app/.env.template
172-
to
173-
packages/react-app/.env
119+
---
174120

175-
2. Open the newly renamed .env file and add your WalletConnect Cloud Project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/)
121+
## **Deploy Your Dapp Locally**
122+
Before starting your project, follow these steps:
176123

177-
Once you've done that, you're all set to start your project!
124+
1. Rename `.env.template` to `.env` in `packages/react-app/`.
125+
2. Add your WalletConnect Project ID from [WalletConnect Cloud](https://cloud.walletconnect.com/).
178126

179-
Run the following commands from the `packages/react-app` folder to start the project:
127+
Start the local server:
180128

181129
```bash
182-
yarn dev
130+
yarn dev
131+
# or
132+
npm run dev
183133
```
184134

185-
If you prefer npm, you can run:
186-
187-
```bash
188-
npm run dev
189-
```
190-
191-
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.
192-
193-
**_🔥Voila, you have a dApp ready to go. Start building your dApp on Celo._**
194-
195-
196-
## Add UI Components
197-
198-
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).
199-
200-
## Deploy with Vercel
201-
202-
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).
203-
204-
205-
## Supported Frameworks
206-
207-
### React / Nextjs
208-
209-
- Support for Website and Progressive Web Application.
210-
- Works with all major crypto wallets.
211-
212-
Check [nextjs docs](https://nextjs.org/docs) to learn more about it.
213-
214-
### Hardhat
215-
216-
- Robust framework for building and testing smart contracts.
217-
- Compatible with various Ethereum development tools and plugins.
218-
219-
Check [hardhat docs](https://hardhat.org/hardhat-runner/docs/getting-started) to learn more about it.
220-
221-
## Supported Templates
222-
223-
### Minipay
224-
225-
- Pre-built template for creating a mini-payment application.
226-
- Seamless integration with Celo blockchain for handling payments.
135+
---
227136

228-
Checkout [minipay docs](https://docs.celo.org/developer/build-on-minipay/overview) to learn more about it.
137+
## **Add UI Components**
138+
To keep Celo Composer lightweight, UI components are not pre-installed. You can easily add components using [ShadCN](https://ui.shadcn.com/). Refer to the [UI Components Guide](./docs/UI_COMPONENTS.md) for details.
229139

230-
### Valora
140+
---
231141

232-
- Template designed for Valora wallet integration.
233-
- Facilitates easy wallet connectivity and transaction management.
142+
## **Deploy with Vercel**
143+
Deploying with Vercel is quick and easy. Follow our [Deployment Guide](./docs/DEPLOYMENT_GUIDE.md) for step-by-step instructions.
234144

235-
Checkout [valora docs](https://docs.valora.xyz/) to learn more about it.
145+
---
236146

147+
## **Supported Frameworks**
148+
### **React / Next.js**
149+
- Supports web and PWA applications
150+
- Compatible with major crypto wallets
151+
📖 [Next.js Docs](https://nextjs.org/docs)
237152

238-
## Support
153+
### **Hardhat**
154+
- Powerful tool for smart contract development
155+
- Works with various Ethereum dev tools
156+
📖 [Hardhat Docs](https://hardhat.org/hardhat-runner/docs/getting-started)
239157

240-
Join the Celo Discord server at <https://chat.celo.org>. Reach out on the dedicated repo channel [here](https://discord.com/channels/600834479145353243/941003424298856448).
158+
---
241159

242-
<!-- ROADMAP -->
160+
## **Supported Templates**
161+
### **Minipay**
162+
- Pre-configured for building a mini-payment dApp on Celo
163+
📖 [Minipay Docs](https://docs.celo.org/developer/build-on-minipay/overview)
243164

244-
## Roadmap
165+
### **Valora**
166+
- Designed for easy Valora wallet integration
167+
📖 [Valora Docs](https://docs.valora.xyz/)
245168

246-
See the [open issues](https://github.com/celo-org/celo-composer/issues) for a full list of proposed features (and known issues).
169+
---
247170

248-
<p align="right">(<a href="#top">back to top</a>)</p>
171+
## **Support**
172+
Join the Celo community on Discord:
173+
📌 [Celo Discord](https://chat.celo.org)
174+
💬 [Repo Support Channel](https://discord.com/channels/600834479145353243/941003424298856448)
249175

250-
<!-- CONTRIBUTING -->
176+
---
251177

252-
## Contributing
178+
## **Roadmap**
179+
See the [open issues](https://github.com/celo-org/celo-composer/issues) for upcoming features and bug tracking.
253180

254-
We welcome contributions from the community.
181+
---
255182

256-
<p align="right">(<a href="#top">back to top</a>)</p>
183+
## **Contributing**
184+
We welcome community contributions!
185+
Please refer to our [contribution guidelines](./CONTRIBUTING.md) to get started.
257186

258-
## License
187+
---
259188

260-
Distributed under the MIT License. See `LICENSE.txt` for more information.
189+
## **License**
190+
Distributed under the **MIT License**. See [`LICENSE.txt`](./LICENSE.txt) for details.
261191

262-
<!-- CONTACT -->
263-
## Contact
192+
---
264193

265-
- [@CeloDevs](https://x.com/CeloDevs)
266-
- [Discord](https://discord.com/invite/celo)
194+
## **Contact**
195+
- **Twitter:** [@CeloDevs](https://x.com/CeloDevs)
196+
- **Discord:** [Celo Developer Community](https://discord.com/invite/celo)
267197

268-
<p align="right">(<a href="#top">back to top</a>)</p>
198+
<p align="right">(<a href="#top">Back to top</a>)</p>

0 commit comments

Comments
 (0)