Malothu Avinash's blog

My Journey with Headless Hashnode:Stream-Gated Blogs

Malothu Avinash's photo
Malothu Avinash
·

2 min read

Introduction:

In the ever-evolving world of blogging, Hashnode's GraphQL APIs have opened up a realm of possibilities. When I heard about the #HeadlessHashnode challenge, I knew I had to dive in. Here's my journey of building a unique, token-gated blog using the Headless Hashnode and Superfluid streams

The Process:

  1. Starting with the Open Source Starter Kit: Hashnode's Open Source Starter Kit provided the foundation. It's flexible, customizable, and integrates seamlessly with Hashnode's GraphQL APIs.

  2. Implementing Token-Gating: I integrated a system where readers send a superfluid stream to my wallet address to access my blogs. The backend monitors this stream and conditionally renders the content.

  3. Backend Magic: The real challenge was ensuring the backend effectively monitored the superfluid streams and rendered content accordingly. With some tweaks and testing, I achieved a seamless flow.

Demo Video

https://youtu.be/ePnFchho0ko

Steps to reproduce the Stream gated blog:

  1. Clone the Repository:

    Begin by cloning the provided starter kit repository to your local machine.

     git clone https://github.com/avinashnayak27/starter-kit.git

  2. Navigate to the Project Directory:

    Once cloned, navigate to the project's root directory.

     cd starter-kit

  3. Install Dependencies:

    Before making any changes, ensure you install all the necessary dependencies.

     pnpm install

  4. Modify the Receiver Address:

    • Open the project in your preferred code editor.

    • Navigate to packages/blog-starter-kit/themes/enterprise/components/.

    • Open the paymentOptions.ts file.

    • Locate the receiverAddress variable and replace its value with your desired wallet address. For instance:

        receiverAddress: "0xEa21171f79a19338bF608ffa1c64dE0B33F0Ab19",

  5. Run the Project Locally:

    After making the necessary changes, you can run the project on your local machine to see the changes in action.

     pnpm run dev

  6. Deploy (Optional):

    If you're satisfied with the changes and wish to deploy your blog, you can use platforms like Vercel, Netlify, or any other of your choice.

    My blog is deployed at https://starter-kit-delta-indol.vercel.app/

By following the above steps you can stream/token gate your hashcode blogs using Headless hashcode and Superfluid Subscriptions widget

HeadlessHashnodeHeadlessChallenge