Composer series: Building a decentralized news feed with Celo Composer.

Build a decentralized news feed using React, Tailwind, IPFS, and Celo Composer.

Hello, friends! 🙋🏾‍♂️

Stacks, Stacks

What is the conventional wisdom for getting involved in web3? Something involving solidity. What does this look like for you as a web2 developer seeking to make this transition? New language? — definitely, but also a headache of new tools and frameworks to learn and getting conversant with. The learning curve between you and your excellent Defi app causes light (or heavy) showers on your parade.

As a developer evangelist, I won’t be doing my job if I didn’t tell you there is a better way out. The blockchain space is still very much in the “developer phase,” and companies, protocols, and blockchains now have the responsibility of lowering the barrier to entry by making it easy to break into blockchain from traditional web/mobile development.

This is an area where Celo stands clear of other blockchains and protocols with its impeccable SDKs, APIs, and toolkits.

Speaking of toolkits, we will use the Celo Composer toolkit today.

Celo Composer

The Celo Composer is a starter pack built on the react-celo toolkit to get you up and running fast in developing DApps on the Celo blockchain. This starter pack is best suited for web2 developers currently transitioning into web3 as it abstracts all the complexities involved in setting up and developing Defi applications and replaces it with a plug-and-play environment. The starter pack, which currently supports React, React-Native, and Flutter requires little to no configurations from you as it eases you into the web3 sphere.

Now to the crux of the matter

Here’s a list of what we’ll cover in this article:

• ✅ Step 1: Setting up your environment.
• ✅ Step 2: Creating your smart contract.
• ✅ Step 3: Deploying your smart contract.
• ✅ Step 4: Getting started with the frontend.
• ✅ Step 5: Interacting with your smart contract from the frontend.
• ✅ Step 6: Deploying your Defi application.

What are we building?

In this article, we are using the Celo Composer starter-kit, which comes pre-integrated with NextJs, Tailwind CSS, and IPFS HTTP client, to build a decentralized news feed where users can connect their wallets and share news as it happens around them and also read submissions from others.

This is what the final project looks like. If your learning style is “head first,” then you can find the complete code for this project on Github. Do follow the commands in the README—md file to get started with setting up your project.

Prerequisites

• Solidity
• React
• Tailwind

Setting up your environment:

Navigate to the Celo Composer repo and select Use this template.

Please refer to this guide for a step-by-step guide on setting up your development environment. Once this is done, you’re ready to start building on Celo!

Step 1: Create your smart contract ✅

• On your terminal, make sure you are in the root directory and then navigate to the contracts folder by running the following command:

• Create a new file in the contracts folder called NewsFeed.sol
• Copy the smart contract code from here and paste it into the file you created, and now your NewsFeed.sol file should look like this:

Step 2: Write your deploy script ✅

After setting up our environment and saving our smart contract in our newly created file, the next step is to update the deploy script to be able to compile and deploy our smart contract to the blockchain.

• Navigate to the packages/hardhat/deploy/00-deploy.js file, and on line 17, you’ll see the deploy function for the greeter contract( A sample contract that comes with the starter kit).

• Update the function to deploy our NewsFeed instead by replacing the function with this.

• Once that is done, scroll to the bottom of the page and update the exports by adding NewsFeed to them, and voila, you are done! This is all the setup that is required on the backend.

Step 3: Deploy your smart contract ✅

Now we are done with the smart contract and have updated our deploy script; next is deploying the smart contract to the blockchain. To do this, run a straightforward command. Go back to your terminal, ensure you’re on the correct directory, i.e., packages/hardhat, then run

View smart contract

Open Celo Block Explorer (Alfajores Testnet) and paste the transaction or deployed address to view the transaction or smart contract. You can also check your wallet to confirm that the gas fee has been deducted from your balance.

Step 4: Getting Started on the frontend ✅

Navigate to the React app by running the following command on your terminal.

Note: No worries if you have closed the terminal you used in deploying your smart contract! Ensure you are in the root directory of your application, then run the following

If not, run the following

Note: This presumes you followed the env setup guide and have installed the dependencies already

Adding tailwind CSS

Follow the official tailwind guide to add tailwind to your project.

After that, delete everything in the tailwind.config.css file generated automatically for you and replace it with this code.

Your tailwind.config.js file should look like this now.

Create a new folder called styles in your react-app directory and a new file in the styles folder called global.css. Paste this code into the global.css file.

Your global.css file should now look like this:

• The final setup for our tailwind configuration is to import the global.css file into the pages/_app.tsx file.
• Add import ../styles/global.css to the list of imports, and voila! You are ready to start using tailwind in your project.
• The next stop is the pages/index.tsx file. Delete everything in the file and replace it with this code. Your index.tsx file should look like this:

AppLayout.tsx

Now, navigate to the layout/AppLayout which is nested in the components folder and update the function with the code below:

Header.tsx

Still in the layout folder, Navigate to the layout/Header.tsx file and replace the existing code with this.

Footer.tsx

Same for the layout/Footer.tsx file. Replace the existing code with this:

FeedList.tsx

Navigate to the react-app/components folder and create a new file called FeedList.tsx. In your newly created file, paste this code into it. Your FeedList.tsx file should now look like this.

Feed.tsx

Still in the components folder, create another file called Feed.tsx. In this new file, paste the following code into it.

This concludes everything we have to do in the components folder.

HomePage.tsx

Navigate to react-app/pages directory, and create a new file called HomePage.tsx. Please copy the code from here and paste it into your newly created file.

This is the empty state of the home screen. i.e., no feeds.

Code walkthrough

The kit function, which allows you to create a new contract instance, is obtained from the useCelo() function. This function is part of the react-celo hook, formerly called use-contractkit. This manages access to Celo with a built-in headless modal system to connect to your users' wallet of choice. You can explore the react-celo hook further here.

This function creates a new instance of the contract by leveraging the kit function and passing as arguments, the abi and address which is contained in the contractData prop. This prop is being passed onto your HomePage from the Index.tsx file.

The getFeeds function, as the name implies, fetches all available feeds by querying the contract using the “contract” instance we created earlier. Contract.methods is how we access the functions or methods declared in the smart contract. getAllFeeds() is a function in the contract NewsFeed.sol. The rest of the code is basic javascript.

FeedPage.tsx

Please create a new file in the public directory called FeedPage.tsx and paste the following code into it.

This image is what the Feed page looks like after the feeds have been created.

Code walkthrough

This is a similar function to the one in the index.tsx file. It returns all deployed contracts.

Here we select the particular deployment we want which is the NewsFeed contract we deployed at the beginning and assign it to a constant called contractData.

This function, the same as on the home page, creates an instance of the contract.

This function gets all the feeds and filters the result to return the feed whose id matches the id passed in.

The getRelatedFeeds() is quite similar to the getFeed() function. The difference being it takes the getFeed function a little further and filters the results based on categories.

UploadPage.tsx

Still in the pages directory, create one more file called UploadPage.tsx and paste the following code into it.

Code walkthrough

The above function creates an IPFS node and assigns it to a constant called client.

c

The uploadCoverImage function nested in the handleSubmit() function, takes in the image uploaded by the user and uploads it to IPFS. Then it calls the saveFeed() function while passing in the path to the image.

The saveFeed function takes the path to the image from the earlier function.

This particular code block is for gas price estimation. It describes the amount of gas to be used for the transaction. The following block of code uses contract.methods to access the createFeed function declared in the NewsFeed.sol contract.

When adding information to the blockchain, we use the send() function (Recall in earlier contract interactions, we use call() function ), and it accepts two arguments, from and gasPrice. We pass the address of the user calling the contract obtained from the useCelo() function and the gasPriceMinimumContract as values for the arguments. This function, when called, creates a new NewsFeed entry and saves it on the blockchain.

Home page after the feeds has been created.

Congratulations

This brings to a fruitful end today’s topic on building a decentralized news feed using Celo Composer and IPFS. You can review the checklist below and confirm that you have learned each.

Here is a quick recap of everything we covered.

• ✅ Step 1: Setting up your environment.
• ✅ Step 2: Creating your smart contract.
• ✅ Step 3: Deploying your smart contract.
• ✅ Step 4: Getting started on the frontend.
• ✅ Step 5: Interacting with your smart contract from the frontend.
• ✅ Step 6: Deploying your Defi application.

Challenge

Once more, I have left some homework for you to get your hands dirty.

• Refer to the FeedPage.tsx file. Now in the getFeed() function, focus on the line below:

A better way to handle this would be to use the contract.methods function to call the getFeed() function in the NewsFeed.sol contract while passing in feedId as a parameter.

• Repeat the same for the getRelatedFeeds() function

Share your results or questions on the discord channel (Please ask all questions in the Celo composer channel for visibility).

Till next time,

Adios !! ✌🏾

Check this project out on Github. Design Inspiration Olanetsoft