BUIDLing Decentrablog - The Decentralized blogging experience

[The Idea and the flow] What is Decentrablog? ❓

Decentrablog is a place for empowering bloggers, writers, creators by enabling them to convert their writings into great NFTs. Looking for funds? No problem! Start a crowdfunding with just your idea! Auction those great creations! For passionate fans out there, be a part of the author's journey and get partial ownership of the final NFT! Don't be a passive fan, be an owner! Try out Decentrablog now!

[The Concept] Wasn't NFT just an expensive .jpeg? 🤔

Not really. NFT is a non fungible token, but of course you knew that. What that means is it's unique in its value. It can be used to represent unique, irreplaceable ownership of any digital asset you have. Not limited to art. You can use it as an identity proof, as a proof of attendance (POAP), for engaging with your audience if you're a creator, or for investing!

[The Problem] Cool, but why should I mint a blog, of all things? 🤷‍♀‍

Blogs are intellectual digital possessions, and you've got a right to mint them, like every other digital assets. It transfers the ownership wholly to you as opposed to any other paywalled blogging platform, to grow your readers, to get part of royalties every time publishers profit from your minted blog. If you're looking to start a course/series, it gets even better! You can start a crowdfunding! On Decentrablog, the reader can sponsor the author as well with cryptocurrencies or raise offer for the minted nft blog.

Cool, now that we agree, there's much empowerment in Decentrablog, let's have a look at how I went about BUIDLing it, and how you can too!

[Developer Tools for Web3.0] Thirdweb

You don't need to dive into solidity every time you think of web3. Here's where thirdweb becomes every developer's delight. With the thirdweb golang sdk, mint nfts simply by using the nft module contract address in your Go project.

Baby Steps 👶 -> Ship a blogging platform ✍

[Use your favourite language] Using the thirdweb golang sdk

Make an account on thirdweb, add a project and create a nft module within it. Just copy the contract address and write a basic golang app like the one below to start minting. Create a new directory

mkdir GolangWithThirdWeb
cd GolangWithThirdWeb

Create the go modules file

go mod init
go mod tidy

Add the sample code

touch main.go

Make sure you update the go mod file with latest version of thirdweb golang sdk for the latest fix

github.com/nftlabs/nftlabs-sdk-go v0.1.4-beta-1

(kudos to the #thirdweb team for the great support on discord!)
And Voila! It works! Now we can get to leveraging this for our app.

Designing the backend

Let's start with what we'd like to provide users of our blogging platform.

• Author should be able to mint blogs with any properties like royalty conditions etc.
• Author should be able to auction NFT blogs
• Author should be able to crowdfund blogs (not yet started blogs/series)
• Readers should be able to view all minted NFT blogs
• Readers should be able to sponsor authors through polygon
• Publications/Readers should be able to buy the minted blogs
• Publications/readers can take part in crowdfunding for blogs/series

Once we have decided all the purposes our platform would solve, adding APIs for these is an easy task. I used Go as the backend for this hack.

Starting the Go server

Inside your Go directory, create a server directory. This is the backend for your app. Create a main.go file inside the server directory. Your main.go should now look something like this

func main() {
    router.SetUpRouter()
}
// inside server/internal/router directory
func SetUpRouter() {
    router := gin.Default()
    // Serve frontend static files
    router.Use(static.Serve("/", static.LocalFile("./web", true)))
    // Setup route group for the API
    api := router.Group("/api")
    SetUpRoutes(api)
    // Start and run the server
    router.Run()
}
func SetUpRoutes(api *gin.RouterGroup) {
    api.GET("/", controller.Health)
    api.POST("/blogs", controller.MintBlog)
}
// Move the minting logic code in MintBlog 
// inside server/internal/controller

Starting with the frontend

Golang has a built-in HTTP package that contains utilities to help create a web server quickly, it is quite easy to host the frontend on it.

All the frontend directories can be moved to a folder inside the root directory. Let’s name this folder frontend. After installing npm, go to the Go app directory root and just do a

npx create-react-app frontend
cd frontend
npm start

This would open up localhost:3000

To make the frontend proxy all requests to the Golang server backend (default port 8080), add the proxy in the package.json to "proxy": "http://localhost:8080"

Do a npm run build to generate the build files for production

Using IPFS Pinata 🪅

We'd be uploading our blogs as JSON to IPFS using Pinata gateway. Pinata is the simplest way to upload and manage files on IPFS. Just create a free account on Pinata. Use the pinata api key + password/ jwt token to interact with ipfs via pinata gateway. Pin a blog data as json and get the CID back. You can see your data by hitting https://gateway.pinata.cloud/ipfs/{CID} on your browser!

In the app, we'll be pinning the blogs using Pinata to IPFS and updating the corresponding link in our mint. We can fetch our mints from thirdweb and call Pinata with the link in the returned response, to get back the original blog as JSON.

Deploy the Go App on Heroku

Deploy on heroku using Dockerfile. The structure of our codebase looks like

-frontend/
-server/
-Dockerfile

Add the dockerfile as below and run

docker build -t decentrablog . 
docker run -p 3000:8080 -d decentrablog

Now, open localhost:3000/ and see your app. To deploy to heroku, just add a heroku.yml file as below.

  docker:
    web: Dockerfile
    worker:
      dockerfile: Dockerfile

Set up heroku CLI from devcenter.heroku.com/articles/getting-start.. and

heroku create
git push heroku main
heroku open

And now you've mastered BUIDLing decentralized blog platforms!

Source Code

For the full source code, you can visit github.com/Sampriti-Mitra/Decentrablog. It's open source, so do feel free to contribute! Disclaimer: I'm primarily a backend dev, so all the frontend blog designs have been shamelessly copied from Hashnode blogs.

Conclusion

It was quite a journey down the rabbit hole with blockchain, web3, minting NFTs, but it was definitely a lot easier with thirdweb! Also, thirdweb has a great support on their discord channel, so do reach out if any issues, like I did!

Useful Links

Decentrablog
GitHub repo
Let's Connect