Forem: Ashish maurya

We've Implemented Enterprise Integrations for Years. Here's the Honest iPaaS Landscape in 2026.

Ashish maurya — Wed, 15 Apr 2026 05:03:28 +0000

At Ivoyant, enterprise integration is what we do. We've designed, built, and supported integration architectures across healthcare, financial services, manufacturing, and retail — running on MuleSoft, Boomi, Workato, n8n, and everything in between. Over the years we've been brought in to clean up platform migrations that went wrong, extend integrations that the original vendor couldn't support, and help IT leaders figure out why their $300K iPaaS wasn't delivering what the sales team promised.

Eventually, that pattern of problems pushed us to build Koodisi — our own enterprise iPaaS, designed around what we kept wishing these platforms would just do by default.

I want to be upfront about that. I work at Ivoyant. We make Koodisi. This post isn't from a neutral third party. But it is from practitioners who have lived inside these other platforms — as implementers, as architects, and sometimes as the team called in when things go sideways. The analysis below is honest. If MuleSoft is the right answer for your situation, I'll tell you that.

What Enterprise Teams Actually Need

Before the platforms: the requirements.

Across the engagements we've worked on, the needs are rarely exotic. Most teams need an integration platform that can:

Run multi-step workflows across Salesforce, Workday, NetSuite, ServiceNow, and a mix of internal REST APIs
Be operated by both integration engineers and the operations team (who are not developers)
Support a real deployment pipeline — dev, staging, production, with approvals
Produce audit logs that can go to compliance without embarrassment
Not require a dedicated DevOps team just to keep the platform itself running

That last point is where the majority of platforms start breaking down. And it's the one that's almost never covered in feature comparison tables.

The Platforms in Practice

Here's the landscape as we've seen it — not from a 30-day trial, but from implementation work.

MuleSoft (Anypoint Platform) — The gold standard for complex enterprise integration, but the licensing and implementation complexity will humble you fast. Mid-market teams routinely spend $400K+ in year one and still aren't in production at the end of it. We've seen it. Where MuleSoft makes sense, it's the right tool. Where it doesn't, the sunk cost becomes a serious organizational problem.

Boomi (Dell Technologies) — Mature, stable, and widely adopted. Boomi has deep connector coverage that reflects 20+ years of integrations built up. The UX is showing its age, and the pricing model has become harder to predict as workloads grow. Still a solid mid-tier choice for the right stack.

Workato — Recipe-based automation done well. Strong for operations-oriented teams and accessible without deep technical training. The per-recipe pricing compounds fast at scale, and the governance model feels layered on rather than designed in — which becomes a real issue in regulated environments.

n8n — Excellent developer tool with a genuinely impressive integrations catalog. The Community Edition is free to self-host, but "free to license" is not the same as "free to run." Someone has to operate it, secure it, patch it, and back it up. For enterprises without a DevOps team dedicated to the iPaaS layer, the self-hosted model creates a hidden operational burden that tends to surface at the worst possible moment.

Zapier — Good consumer and SMB automation tool, not an enterprise iPaaS. The per-task pricing at enterprise volumes becomes uncomfortable quickly, and there's no meaningful governance story. Worth understanding because business units frequently adopt it independently, which creates its own migration complexity later.

Celigo — Focused heavily on NetSuite and eCommerce workflows. Solid in those lanes. Less compelling for teams outside that vertical.

Koodisi — What we built, so I'll treat this separately below. The short version: it's designed around the governance and operational visibility gaps we kept running into everywhere else.

The Problem Nobody Writes About: Governance and Change Control

Here's what integration platform reviews almost universally skip: what happens after you build the workflow?

Most comparisons stop at the builder UX. That's the wrong place to stop. The question that actually matters is: what happens when a workflow breaks in production at 2am and the engineer on call has never touched this part of the platform?

Enterprise governance in practice means:

Every workflow change goes through a structured review before it reaches production
Every deployment is versioned, logged, and reversible
Failures surface with execution context — not just "workflow failed," but which step, which record, what the error actually was
Roles determine who can build, who can approve, who can deploy — scoped to the workspace, not just set globally per account

Most platforms treat this as an add-on. It shows in the implementation. And it shows even more in the post-go-live support.

MuleSoft has the governance story — but it requires certified MuleSoft architects to use it properly. The capability is real. The accessibility is not.

Workato has approval workflows and audit logs. They're functional. They're not deep enough for teams with real compliance requirements.

n8n (self-hosted) has essentially none of this out of the box. SSO, Git sync, and environment support moved to the Business plan ($800+/month). The Community Edition is free to host, but you're writing your own governance story around it.

Koodisi — this is the gap we designed against. Governance isn't a settings tab in Koodisi; it's the deployment model. Every workflow lives in a workspace with RBAC. Every deployment moves through a pipeline: Dev → Deploy → Test → Promote. Rollbacks are built in. Execution traces are written for the operations team, not just the engineer who built the workflow.

More on this: Koodisi vs n8n — enterprise governance comparison.

The Cost Reality

Numbers are more useful than adjectives like "expensive" or "affordable."

MuleSoft enterprise contracts start around $150K/year and routinely exceed $500K for mid-to-large deployments once Anypoint Platform licensing, runtime licenses, and professional services are loaded in. G2 reviews and community discussions put most enterprise MuleSoft deployments at $250K–$600K annually, fully burdened.

Boomi is less steep but still substantial. Community Edition works for light use. Production-grade deployments with Flow, API Management, and Master Data Hub add up — expect $50K–$200K depending on usage.

Workato quotes per recipe, which makes forecasting difficult. Teams with 50+ active recipes frequently report $30K–$80K/year, and that tends to scale as automation success creates more automation demand.

n8n Cloud starts at $20/month (billed annually) and goes to $800/month for the Business tier. Self-hosted Community Edition carries no licensing cost, but factor in infrastructure management, upgrades, security patching, and backup operations — that "free" cost becomes real.

Koodisi enterprise pricing isn't published publicly. See the pricing page for positioning, or reach out directly. The model is designed to be accessible to mid-market teams who've outgrown SaaS automation tools but can't absorb MuleSoft-tier spend.

The Operational Blind Spot

One pattern we've seen repeatedly across client environments: the operations team can't use the platform the integration team built on.

Operations teams need to:

See which workflows ran today and which failed
Understand what a failure means without parsing a stack trace
Retry a failed workflow without filing an IT ticket
Know when a scheduled workflow simply hasn't run

On MuleSoft, Boomi, and n8n — this is a developer-only activity. Logs exist. They are not readable by someone unfamiliar with the platform internals. The result is that operations teams become dependent on engineering for visibility into processes they nominally own.

This is what Gartner refers to as the "citizen integration" gap — and it's a real operational problem, not just a UX complaint. The gap between technical and operational users needs to close at the platform level, not through training programs.

In Koodisi, execution traces are written to be readable without coaching. That was a deliberate design decision, informed by watching operations teams struggle with every other platform we've worked on.

Where the Traditional Players Are Still the Right Answer

I want to be direct here, because "everything is broken except the tool I'm associated with" is not a credible take.

MuleSoft is genuinely the right choice if you have a large, heterogeneous enterprise with hundreds of integrations, a dedicated integration team with MuleSoft certifications, and the budget and timeline to match. Nobody competes with its depth of enterprise connectors or its API management story at scale. If you're in that situation, use it.

Boomi carries 20+ years of integration expertise in its connector library. For SAP-heavy environments, Boomi's SAP integration support is notably strong. It's well-established in manufacturing and logistics verticals where that depth matters. For the right stack, it's a solid, low-drama choice.

n8n is an excellent tool for developer-led teams comfortable operating infrastructure. If you have a strong DevOps culture and no significant compliance burden, the self-hosted Community Edition is genuinely powerful. We'd recommend it for a developer-heavy SMB or a startup — and not recommend it where governance and managed operations are requirements.

What We've Seen Work for Mid-Market Teams

The pattern we see most often among teams that successfully modernize their integration layer:

MuleSoft is ruled out on cost or implementation timeline
Boomi gets close, but the UX creates real operations team adoption risk
n8n is off the table because there's no DevOps headcount to run it
The remaining options are Workato and Koodisi

Workato tends to win on connector breadth at the SMB end. Koodisi tends to win where governance, operations team usability, and API management are all requirements — particularly for teams that expose internal APIs to external partners and need structured change control across both sides.

The clients we've seen get the most out of Koodisi are running 30–80 integrations in production, operating across IT and business operations teams, and dealing with compliance requirements that make the audit trail matter.

If that profile fits your situation, request a demo and test it against your specific workflows — not against a generic benchmark.

Frequently Asked Questions

What's the difference between iPaaS and workflow automation tools like Zapier?

iPaaS (Integration Platform as a Service) is designed for enterprise-grade integration — multi-step workflows, bidirectional data sync, API management, governance, and operational visibility. Zapier is built for simple trigger-action automations at the individual or SMB level. At enterprise scale, iPaaS provides the audit trails, access controls, and deployment pipelines that automation tools don't offer.

Is MuleSoft still worth the cost in 2026?

For large enterprises with dedicated integration teams and complex, multi-domain needs — yes. For mid-market teams that can't justify a $300K+ annual platform spend plus specialist staffing, the value calculation has shifted significantly. See Koodisi vs MuleSoft for a direct comparison.

What should I actually look for in an enterprise iPaaS?

Beyond connector count: Is governance designed in or bolted on? Does the deployment pipeline support dev/staging/production with approvals? Can non-developers actually operate it day to day? What's the total cost of ownership, including DevOps overhead? Most platform comparisons skip the last two — they're usually where the surprises are.

How long does it take to properly evaluate an enterprise integration platform?

Budget 6–8 weeks for a real proof of concept. Set up your actual use cases (not demo scenarios), include your operations team in testing — not just engineers — and pay close attention to what happens when something fails. How a platform behaves in failure tells you more than how it behaves on the happy path.

Is n8n a real enterprise iPaaS?

n8n is a strong developer-led automation platform. It's not a traditional enterprise iPaaS. The self-hosted Community Edition is powerful but requires real DevOps investment. Cloud plans scale to $800/month for Business tiers. For enterprises that need managed infrastructure, RBAC, and a structured deployment lifecycle, a purpose-built iPaaS is a better fit. Full comparison here.

What's a good Boomi alternative for mid-market teams?

Workato and Koodisi are the most direct alternatives. Koodisi specifically addresses the governance and API management gaps that come up most often in Boomi migration conversations. See the full comparison.

Final Thoughts

Enterprise integration is genuinely hard. The platforms are rarely the hard part — the governance model, the operational handoff from engineers to ops teams, and the change control story are the hard parts. Pick a platform that takes those seriously from the start, not one where you'll be retrofitting them in year two.

The mid-market options in 2026 are meaningfully better than they were even two years ago. You no longer have to choose between "MuleSoft budget" and "run your own infrastructure." There are real, production-grade options in between.

Whatever you evaluate: ask every vendor what happens when a workflow breaks at 2am and your senior integration engineer is unreachable. The specificity of the answer tells you everything about how seriously they've thought about operations.

I work at Ivoyant, the team behind Koodisi. Everything in this post reflects what we've seen across real client engagements — but you should factor in that perspective. I'm happy to answer questions in the comments.

Multithreading In JavaScript using Web Workers

Ashish maurya — Mon, 15 Aug 2022 10:38:40 +0000

Have you ever heard that Javascript is a single-threaded language and can only execute one process at a time well that is completely true. JavaScript uses an event loop to execute the process, for now, think of the event loop is as a queue where all the Javascript processes kept inside and are executed one by one.

In older Browsers, the whole browser was executed on Only one thread but now Each tab of the browser is given a thread to execute the process on.

Problem with Single threaded Programing Language.

As JavaScript is a single-threaded Programing language so now only one Process can be executed in one tab. You will have a better understanding of this if you are familiar with Event Loop in Javascript.

For normal purposes, It is more than enough but for the CPU-intensive process, this can cause major issues in the UI. Suppose you want to do a certain CPU-intensive task and while doing it another process will stop working such as clicking or scrolling or anything else you do on the website.

Here is an example where I calculate a sum of all the numbers in the range using a for loop.

let sum = 0;

  for (let i = 0; i < 10000000000; i++) {

    sum += i;

  }

  alert("The sum is: " + sum);

Let's see what happens in the browser if I run this.

let's understand what happening here In this Gif. Here are two Buttons one is to change the background color of the Website and one is to do CPU-intensive work which is to calculate the Sum and once done it just shows the sum on the screen as the gif.

Now before I clicked on the Calculate sum button I was able to change the background of the Website but once I click on the Calculate Sum the javascript will only execute any other process once it calculate the other. As executing the calculated Sum takes a lot of time it just freezes all the other processes.

Well, this can be solved by using something called web workers.

Modern Problem Required Morden Solution

An Introduction to Web Workers

MDN in their official document says and I quote

Web Workers are a simple means for web content to run scripts in background threads.

Meaning you can now run your Javascript Script on a different thread in the background. Which is exactly the solution we are looking for.

Let's try to do that using a web worker, as a web worker needs a new script so will create a new script for that let's call that a worker.js, and in our main.js let's initiate the worker script using the single line new Worker("worker.js")this is how easily a new worker can be initiated in your already written javascript.

Our main.js will look something like this

// main.js 

const calculateSum = document.getElementById("calculateSum");

const changeColor = document.getElementById("changeColor");

const worker = new Worker("worker.js");

calculateSum.addEventListener("click", function () {

// We posted a message to the worker with a simple JSON as we don't require to pass any data

  worker.postMessage({ text: "sum" });

// Our worker is listening to the return message then it will execute some logic on the basis of data passed.

  worker.onmessage = function (e) {

    document.getElementById("sum").innerHTML = the sume <span class="hljs-keyword">is</span> ${e.data};

    worker.terminate() //terminatiing the worker after the use

  };

});

changeColor.addEventListener("click", function () {

  document.body.style.backgroundColor =

    document.body.style.backgroundColor == "red" ? "blue" : "red";

});

now as you can see I have moved the logic to calculate the sum from the main.js to the worker.js

// worker.js

onmessage = (e) => {

  let sum = 0;

  for (let i = 0; i < 10000; i++) {

    arr[i] = i;

  }

  postMessage(sum);

};

this will post the sum back and the Website will work without any blockage. You can easily try it.

Things to remember while using Web-Worker

Even though workers are amazing but there are some trade-offs which we will talk about in this Section.

With great power come's the great Responsibility

Web Workers use message passing which is performance costly. The message is copied instead of share which is exactly the reason for the performance cost.

Let's use performance.now() web API to get the performance of the same function in the main thread and web-worker thread and let's watch the performance.

I changed the code according to our use case. Here are the new codes

// main.js

const calculateSum = document.getElementById("calculateSum");

const changeColor = document.getElementById("changeColor");

const worker = new Worker("worker.js");

threadedFunction = () => {

  worker.postMessage({ text: "sum" });

worker.onmessage = function (e) {

    // document.getElementById("sum").innerHTML = the sume is };

    worker.terminate();

  };

};

MainThread = () => {

  let start = performance.now();

  let sum = 0;

  let arr = [];

  for (let i = 0; i < 10000; i++) {

    arr[i] = i;

  }

  let end = performance.now();

  console.log(Main thread took ${end <span class="hljs-operator">-</span> start} ms to complete);

};

calculateSum.addEventListener("click", function () {

  MainThread();

  threadedFunction();

});

changeColor.addEventListener("click", function () {

  document.body.style.backgroundColor =

    document.body.style.backgroundColor == "red" ? "blue" : "red";

});

// worker.js

onmessage = (e) => {

  let start = performance.now();

  let arr = [];

  let sum = 0;

  for (let i = 0; i < 10000; i++) {

    arr[i] = i;

  }

  postMessage(arr);

  let end = performance.now();

  console.log(Worker took ${end <span class="hljs-operator">-</span> start} ms to complete);

};

Here are the results for the above benchmarks on my Pc with an i7 processor.

Well, this might come as a shock to you because we are actually running the same code than why it is almost 2x slow.

Debugging the Performance

Let's use the performance profiler to actually see what is taking so long for it to execute the same program in the worker thread.

As you can see the message takes almost 0.5ms whereas the original function call only took 1.5ms.

In Web Worker the more complex the data you pass the more time it will take to pass as it copies the whole data.

There are various ways to optimize the performance which we will talk about in the next session.

TL;DR

Javascript is a Single Threaded Language but you can use multithreading in javascript using web-workers in the browser.
Web-Workers are easily initiated using new Worker() and you can pass data from the main thread and worker thread using onmessage() method and postMessage() method.
Complex Data takes more time to pass as workers do not share the data but instead copy them.

This blog is posted using Blogtiple

Creating a React Modal with React custom Hooks and Typescript

Ashish maurya — Sun, 07 Aug 2022 14:54:01 +0000

Hello Guys,

React hooks are very useful features of React and with this comes custom React hooks, these custom React hooks have endless possibilities and can easily replace container Logic in Container/Presentational Model.

Why custom Hook?

Here I used a custom hook so that I don't have to write the same logic again and again when trying to use modal and add the same function in all the files.

Adding logic to the Hooks

let's quickly make a new file useModal.tsx in our hooks folder this will be a pure function and only contain the logic for now.

// useModal.tsx

import { useState } from "react";

export default function useModal() {

  const [isOpen, setisOpen] = useState(false);

const toggle = () => {

    setisOpen(!isOpen);

  };

return {

    isOpen,

    toggle

  };

}

In this, we have a state isOpen to show or hide the modal, and then there is a function that actually toggles the visibility of the Modal.

now let's use this code in our App.tsx and implement a Modal that gets triggered on click

let's import out the Modal component and useModal hook in App.tsx

import Modal from "./component/modal";

import useModal from "../src/hooks/useModal";

let's add the other logic and pass isOpen and toggle to the Modal component.

our App.tsx will look something like below

export default function App() {

  const { isOpen, toggle } = useModal();

  return (

    <div className="App">

      <h1>Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen!</h2>

      <button onClick={toggle}>Open Modal </button>

      <Modal isOpen={isOpen} toggle={toggle}></Modal>

    </div>

  );

}

Well at this point we are almost done all we need is to add some basic conditional rendering logic to our Modal component and let's see what we have.

// Modal.tsx

import React, { ReactNode } from "react";

interface ModalType {

  children?: ReactNode;

  isOpen: boolean;

  toggle: () => void;

}

export default function Modal(props: ModalType) {

  return (

    <>

      {props.isOpen && (

        <div className="modal-overlay" onClick={props.toggle}>

          <div  className="modal-box">

            {props.children}

          </div>

        </div>

      )}

    </>

  );

}

we added the onClick event and passed the toggle function to it so that if we click anywhere else on the outside of the modal, the modal get's close.

Also, we rendered our component such that if isOpen = false it will return nothing.

At this point we are done let's see how it looks now.

Now it's working fine .......... Well Almost actually.

if you noticed if we click on the inner div even then the whole modal is getting close which is not something we can do as this can lead to several issues.

This is happening due to the phenomenon called Event Bubbling in Javascript where any event is propagated through the parent divs.

Solving bugs and handling Event Propagation.

In React this can be easily solved by the using event.stopPropagation() method which is already provided by React.

We will just call this method when the user clicks on the Inner div.

let's see how our code looks now

// Modal.tsx

import React, { ReactNode } from "react";

interface ModalType {

  children?: ReactNode;

  isOpen: boolean;

  toggle: () => void;

}

export default function Modal(props: ModalType) {

  return (

    <>

      {props.isOpen && (

        <div className="modal-overlay" onClick={props.toggle}>

          <div onClick={(e) => e.stopPropagation()} className="modal-box">

            {props.children}

          </div>

        </div>

      )}

    </>

  );

}

Yaay !!!!!!!!!! now the above problem is solved

Try this on Sandbox?

Hope you like testing it try adding more features to it.

TL;DR

We learned about container/presentational design patter
We learned how to create our own custom hooks and separate all the logic parts from the UI.
We learned how the Modal component works and to create reusable React component
We learned what is event propagation and how to stop it.

if you like this post let's get connected on Twitter:

Follow me here

This blog is posted using Blogtiple

Testing For Project submission

Ashish maurya — Wed, 27 Apr 2022 08:11:02 +0000

Hey, Testing to project submission.

This blog is posted using Blogtiple

Setting Up Your Online Store: The Gumroad Way

Ashish maurya — Sat, 26 Mar 2022 08:32:00 +0000

Well, Lately I have been trying to build some source of income where I have to work once and get paid for the product instead of the hourly paid. Most people call it a passive income stream. In my research and exploring through countless youtube videos I got to the conclusion that selling online stuff would be the best way for me right now.

Finding your Niche

Well selling online is cool but what am I supposed to sell that was a big problem for me to find out what I am good at and what can make money. As I am good at making websites and Designs I thought why not sell React Templates for different purposes.

For each person, it could be anything.

Finding the platform to Sell

Now that I found the product I wanted to sell the big question was where to sell?

After a couple of searches, I got to find three good platforms to sell at.

Already Built Market Places

Build Market places are good but I think that they have a lot of sellers and are already saturated with them. For my needs, I needed something new and creative. That's where Gumroad comes to the rescue.

Setting up you're a custom shop on your own domain

Setting up your own custom store can be challenging for a non-tech person and even for a tech person handling all the transactions and databases is a pain if you don't already know that you selling.

Well in my case I thought of this but eventually, drop it as it can be a lot of process and work.

Gumroad ( My choice)

Well, I have been seeing a lot of developers and Influencers selling their product on Gumroad and the got me curious so I tried to explore Gumroad and I find this can be the right choice for my need as I don't have to write all the code and won't be handling the payment gateway and stuff. So that my prime focus will be on the selling and product.

Well, Gumroad is fine but I really wanted some traffic to my domain so after exploring I got to know I can set up my custom domain to the Gumroad same as I have set this blog to my domain. So instead of users being redirected to gumroad.com/@username they will be redirected to store.theashishmaurya.me.

Setting Up your custom domain with Gumroad.

Once you are logged in to the Gumroad go to the setting >> Advance setting then put store.yourdomain.com in the domain or whatever you want to.

Before verifying you need to add the CNAME to your domain provider. In my case, I m using Netlify so my configuration looks something like this.

Also if you don't know how to set up a custom domain in Netlify read the below article of mine, the process is quite similar.

https://blog.theashishmaurya.me/how-to-integrate-your-hashnode-blog-with-netlify

Once you are all set up click on verify in your Gumroad setting and you will get a confirmation like below.

Read more about the domain setup here https://help.gumroad.com/article/153-setting-up-a-custom-domain

The Result

You are all set up to sell things online now. It might take 24 hours for the domain to reflect changes but once it is done you will have something like this on the link.

Keep selling!! Also, follow me and subscribe to me so that you can get more updates like this.

This blog is posted using Blogtiple

Introducing Blogtiple - A Cross Blogging Application

Ashish maurya — Sun, 20 Mar 2022 03:52:24 +0000

Introduction

Hey Folks, If you are into blogging well then this product is a treat for you guys, so pay attention to this blog.

Have you ever wondered why do you even write blogs? Is it to share the information or to grow as a blogger? Well, whatever the reason it might be I got your back with Blogtiple.

But how? you ask.

Hmmm! good question, before I answer that let me tell you what is the major problem I solved with this product.

The Problem

After getting into this Tech blogging world I realized one thing there are a lot of other blogging websites except Hashnode and Dev.to and the one other realization was that the more you post on each and every platforms the more audience and exposure you will have. This can also mean more leads for your next freelancing gig or maybe more recognization and if you are the second type who just want to share their blog post isn't it better the more people are now reading your blogs across the other Platforms?

But it's obvious to most of the users and they already post it to other platforms too. But, personally copying and pasting everything, it's a drag for me.

I can't copy and paste all my content across every other platform its too much work. So what's the solution?

The Idea Behind Blogtiple

I thought to create a pipeline/system which can automatically import my already written blogs and post them to other blogging platforms. Well, that's what Blogtiple does for you all you need is to select the provider and Copy paste the link of your blog, and click post.

Cool and comfy isn't it?

via GIPHY

Features

Importing your already written blogs.

This is one of the core features we offer and the flow works something like below.

As you can see the user is providing a URL and Provider for their blog, after that, we fetch that blog either from Dev, Medium, or Hashnode depending on the provider, and then post it to other platforms.

Till now we are only supporting Medium, Hashnode, and DEV but planning to add more as we grow.

Scheduling Blogs for later (Beta)

It's another amazing feature of this App, Say you want your blogs to be posted on different days on different platforms. You can easily schedule your posts on the days you like and I will be posted on them.

This feature is using Netlify's function's cron job which was released this month only.

Watch this video to understand more about the scheduling function on Netlify

The flow for the Scheduling works something Like this.

Other Features to be Included Are

Advance Analytics to keep track of all the blogs across all Platforms.
A Better markdown editor with Image and gifs and emoji integration support.
New platforms

Demo

Posting Directly to Platforms

Let me show you how to post your blogs from Hashnode to other platforms i.e Dev and Medium.

I wrote a test Blog on the Hashnode here it is

https://blog.theashishmaurya.me/testing-blogtiple

Now let's get started

Let's log in, I will be using google provider for login.

Once you are logged in you will be seeing the Import blog page and will be something like below

Goto setting and add the API keys for the platforms. Just so you know the keys are encrypted once they leave your browser so even I can't use it.

Now save each of the keys and go to the Import option.
In Import Page Select the Provider to Hashnode and paste the link and then click on the fetch to fetch any blog you want.
I will be fetching my test blog

As you can see that it is fetched and displayed in the blog display Area.

Now let's select where we want to post and select put the original link as Canonical link. (It's important to put Canonical link)
You can also add some Tags too if you like.

Now you are all set to post these blogs to the other platform.

Results

Here we get the post to Dev.to and Medium

Dev.to

Medium

Scheduling for Later

Instead of posting directly, we can also schedule posts for later

Just instead of clicking on Post just click on Schedule and then select the date you want to post to.

Video Demo

Role of Netlify

Here Netlify plays a crucial role, from hosting Blogtiple to triggering the scheduled functions by using Netlify functions for cron jobs. It is a crucial part of the scheduling feature and using Netlify functions solved a lot of problems and complexity I would have to deal with and efforts for writing my own cron job functions.

Challenges

The major challenge was to import blogs from Medium, as Medium does not support any fetch API for the user blog and only supports post API. The workaround was a hard job and the tradeoff was the time complexity increased a lot.
Second major challenge was to find a good way to trigger functions for scheduling as firebase function was my first choice but they are not free for use, hence I needed to find something else after some research luckily I got to know that Netlify has just launched cron job function this month and the timing couldn't be more perfect for me.
Also to ask users to give the API key for posting blogs to their blog still feels a lot, So I thought why not encrypt the API keys before they leave the client's browser this seems like a smart idea for the time been, but I am still having seconds thoughts on that.
One of the major problems is the URL, as medium and Hashnode have different kinds of URLs, some users have subdomains and some user have hosted their blog on their own domain. Writing cases for each kind of URL was a big challenge and I still think it's not fully resolved.

Future Plans

In the future, there are some features I think are mandatory for this product of mine

Advance Analytics to keep track of all the blogs across all Platforms.
A Better markdown editor with Image and gifs and emoji integration support.
I am thinking to add as many blogging platforms as much as I can.
Finding a better way to store API keys that is much safer and encrypted.

Tech Stack

To build this amazing product I used.

NEXTJS for frontend and API calls
Material UI for Design
Firebase for authentication and Database
Netlify for Hosting and for scheduling function

Testing Blogtiple

Ashish maurya — Mon, 28 Feb 2022 20:31:00 +0000

This is a test post for Blogtiple.com

This blog is posted using Blogtiple

Building our first NFT Marketplace ARCANE without writing single line of Solidity 🖖

Ashish maurya — Sat, 26 Feb 2022 10:43:41 +0000

Gm folks! It's 2022 😻, the year of getting ourselves in to web3. One morning we notice Hashnode dropped 2022's first hackathon on Web 3.0 with ThirdWeb, isn't it an amazing start for this year? Why wait for any further let's go through what we have cooked for this Hackathon.

Before that, If you are new to web3 you must be wondering what's Blockchain, NFT, and NFT marketplace? Don't worry I got your back.

⛓️ What is Blockchain?

Well it's hard to explain Blockchain in a one-liner but let me try

Blockchain is a public database(ledger)📒 that is updated and shared across many computers(nodes) in a network.

👀 What is NFT?

NFT stands for Non-Fungible Token. Wait it doesn't make any sense right? I Know let me explain it when I said Non-fungible that means unique, there is no other of the same kind. bitcoin is fungible because when you trade one token for another you got the same, it's different from the previous one. but when we say non-fungible that means if you trade one token that is totally unique in its way with another non-fungible token you got a different kind.

🤔 What is NFT Marketplace?

The marketplace is a common platform that acts as a market or meeting point for creators and collectors. Creators come to the marketplace and list their NFTs for sale and collectors buy those listed NFTs.

🤷‍♀️Problem

In past there was hardly one can verify the provenance of digital contents, like one can verify physical contents in traditional auctions that a given work of art is in fact the original one, not a replica. As we already know blockchain contains transaction history on a public ledger that is decentralized and can't be altered, which serves the purpose of making any digital content unique in its own way. In laymen's way, we can say tokenization of unique digital content on the blockchain is minting NFT.

We build a decentralized Marketplace app without writing a single line of solidity code, if you are thinking what's so great about not writing solidity, let me tell you solidity is a strictly typed programming language that is used to write awesome smart contracts. It's a newly developed language specifically writing smart contracts and deploying them on the Ethereum network. Many of us are not very comfortable in writing 👩🏼‍💻smart contract with solidity and understanding all the basic and important components for writing your own smart contract for NFT minting or for another purpose.

Then what should a person don't want to write contracts but still want to build amazing web3 Dapps 🙇‍♂️. (🥁Drum roll, please !! ) here comes ThirdWeb.

🌐thirdweb

ThirdWeb is a portal that provides smart contracts, SDKs, and UI components that creators, developers, etc can integrate into their projects/apps. It's a place where you can get all the web3 related tools and start building your awesome Dapp.

Using thirdweb SDK, project, and modules we didn't require to pay much attention to the backend part of DApp. We only focus on integration which is totally easy for anyone who is a beginner in frontend development.

💡Inspiration

We got inspired by amazing NFT Marketplaces like OpenSea,Rarible.

⚡That's where ARCANE comes into the Play

Well, ARCANE is an NFT marketplace where an artist can mint her/his digital content into NFT and store them on the blockchain, letting collectors purchase. live demo We will start with having a crypto wallet. We recommend installing Metamask🦊

We login into thirdweb via crypto wallet, setting Mumbai as a network for creating projects and modules for our marketplace. We created NFT, Marketplace module with the current address. after setting up some permission we are ready to use our smart contracts via thirdweb SDK. Installing thirdweb SDK in Nextjs application.

//Instantiate 3rdweb SDK

 const rpcUrl = "https://rpc-mumbai.maticvigil.com";

 const privateKey = process.env.NEXT_PUBLIC_PRIVATE_KEY;

const wallet = new ethers.Wallet(

    privateKey,

    ethers.getDefaultProvider(rpcUrl)

  );

const market = new ThirdwebSDK(wallet).getMarketplaceModule(

    MARKETPLACE_ADDRESS

  );

Defining which module to use while minting NFT we needed the NFT module address and for listing and buying needed marketplace module address.

// assign the smart contract address

const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

// Instantiate NFT Collection module

 const nft = new ThirdwebSDK(wallet).getNFTModule(NFT_MODULE_ADDRESS);

it's now time to mint your digital asset to another address

// Minting the NFT asynchronously

import { ThirdwebSDK } from "@3rdweb/sdk";

import { ethers } from "ethers";

export default async function mint(req, res) {

  const rpcUrl = "https://rpc-mumbai.maticvigil.com";

const privateKey = process.env.NEXT_PUBLIC_PRIVATE_KEY;

const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

const { account, name, decription, image } = await req.body;

  console.log(req.body);

  const wallet = new ethers.Wallet(

    privateKey,

    ethers.getDefaultProvider(rpcUrl)

  );

// initialize the SDK and get the NFT Collection module

  const nft = new ThirdwebSDK(wallet).getNFTModule(NFT_MODULE_ADDRESS);

  await nft

    .mintTo(account, {

      name: name,

      decription: decription,

      image: image,

    })

    .then((metadata) => {

      console.log(metadata);

      res.send(JSON.stringify(metadata));

    })

    .catch((e) => console.log(e));

}

for listing, we need both modules addresses.



// Declaring the NFT Collection module address

 const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

// Declaring the MarketPlace  module address

  const MARKETPLACE_ADDRESS = "0x229b1f789506dbea2052f8423a780b1be1c16f21";

// Initialize market module by passing in the module address

const market = new ThirdwebSDK(wallet).getMarketplaceModule(

    MARKETPLACE_ADDRESS

  );

you can list your minted NFT on the marketplace

// the listingId of the listing you want to fetch data for

import { ThirdwebSDK } from "@3rdweb/sdk";

import { ethers } from "ethers";

export default async function list(req, res) {

const rpcUrl = "https://rpc-mumbai.maticvigil.com";

  const privateKey = process.env.NEXT_PUBLIC_PRIVATE_KEY;

const NFT_MODULE_ADDRESS = "0x0C8fe5019D3B3BaC3B9e0878080C898518E02060";

  const MARKETPLACE_ADDRESS = "0x229b1f789506dbea2052f8423a780b1be1c16f21";

 const TOKEN_ADDRESS = "0x0000000000000000000000000000000000000000";  //MATIC Mumbai token address

console.log(privateKey);

const { tokenOffer, tokenId } = await req.body;

console.log(req.body);

const wallet = new ethers.Wallet(

    privateKey,

    ethers.getDefaultProvider(rpcUrl)

  );

const market = new ThirdwebSDK(wallet).getMarketplaceModule(

    MARKETPLACE_ADDRESS

  );

await market

    .createDirectListing({

      assetContractAddress: NFT_MODULE_ADDRESS,

      buyoutPricePerToken: ethers.utils.parseUnits(tokenOffer, 18),

      currencyContractAddress: TOKEN_ADDRESS,

      startTimeInSeconds: Math.floor(Date.now() / 1000),

      listingDurationInSeconds: 60  60  24,

      tokenId: tokenId,

      quantity: 1,

    })

    .then((data) => {

      console.log(data);

      res.send(JSON.stringify(data));

    })

    .catch((error) => {

      console.log(error);

    });

}

🥳Woohooo!! we have minted our digital assets and listed them on the Polygon blockchain without writing any line of solidity smart contract way to go thirdweb ✨.

Now it's time to reveal the tech-stack we have used to build this amazing marketplace 🙈

📚 TechStack Used

Framework and Services

NextJS - for Frontend
Material UI - for styling the website
thirdweb - for getting pre-build smart contracts

Libraries

ether.js- for interacting with the Ethereum Blockchain and its ecosystem
axios - Promise based HTTP client for the browser and node.js
ipfs-http-client - The JavaScript HTTP RPC API client library for IPFS implementations.

👯‍♂️ Team and Collaborator

I have been in collaboration with Sneha Maurya who handles backend, API/SDK integrations, and web3 related functionalities✌️.

🚀 Deploying

The whole app is deployed on Vercel, 🏃🏽‍♀️ go and check it out.

🌐 Links and resources

Live demo - ARCANE
Github Repository link -Github-NFTMarketplace
connect to us on twitter - @sneha_kushw and @theashishmaurya

🤖 Future Possibilities

buying listed NFT using our custom/existing currency token form marketplace
adding royalties for minted NFTs.
adding more crypto wallets for accessing our website.

This blog is posted using Blogtiple

FIREBASE & REACT: Setting Up React APP with Firebase

Ashish maurya — Thu, 24 Feb 2022 17:48:59 +0000

In this article, we will learn how to create a new Reactjs app and integrate Firebase in our React application.

1. What is Firebase

Firebase is Google’s mobile application development platform that helps you build, improve, and grow your app.

Firebase is a toolset to “build, improve, and grow your app”, and the tools it gives you cover a large portion of the services that developers would normally have to build themselves, but don’t really want to build, because they’d rather be focusing on the app experience itself. This includes things like analytics, authentication, databases, configuration, file storage, push messaging, and the list goes on. The services are hosted in the cloud and scale with little to no effort on the part of the developer.

now that we have a little gist of Firebase let's set up our application now.

2. Setting Up React application.

In this tutorial, we will be using Create-react-app. If you are new to React, here is an article about how to set up the React Application in your local.

https://blog.theashishmaurya.me/setting-up-react-app-and-writing-your-first-hello-world

once you have followed the above article for setting up the React-App we will now move to our next part where we set up the Firebase for our application.

3. Setting up the firebase for Web Application

Once the above process is done now let's set up the Firebase for our App.

Go to Firebase.google.com

Click on get started and add a project to it.

Once done give it any name and then just create the project. Once the project is created you will be getting something like the below.

Click on the </> icon that will initiate a web app in the firebase.

Name whatever name you wanna give to your web app once done, Save it.

After that, you will be given your config keys for the web app make sure to not expose the keys.

once done you are done with the firebase console setting let's install the firebase package in our local.

4. Setting up Firebase with React Application.

Now we are done with the firebase side now all we need to set up everything in our local Application.

Open the terminal and install the firebase package.

npm install firebase

Once Installed,open the React app folder and add a new file `.env.local to it.

Now we will configure the .env.local file, where we put all our environment variables.

REACT_APP_FIREBASE_API_KEY = "YOUR-UNIQUE-CREDENTIALS"

REACT_APP_FIREBASE_AUTH_DOMAIN = "YOUR-PROJECT-NAME.firebaseapp.com"

REACT_APP_FIREBASE_PROJECT_ID = "YOUR-PROJECT-FIREBASE-PROJECT-ID"

REACT_APP_FIREBASE_STORAGE_BUCKET = "YOUR-PROJECT-NAME.appspot.com"

REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "YOUR-PROJECT-SENDER-ID"

REACT_APP_FIREBASE_APP_ID = "YOUR-PROJECT-APP-ID"

REACT_APP_MEASUREMENT_ID = "YOUR-MEASUREMENT-ID"

Save the file and restart the server.

After saving the .evn.local file we need to initiate the firebase in our application for that, we will create a new folder name firebase and then also create a new file and name it firebase.js

Once done copy the following code inside the file.

import { initializeApp } from "firebase/app";

// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const clientCredentials = {

  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,

  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,

  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,

  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,

  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,

  appId: process.env.REACT_APP_FIREBASE_APP_ID,

  measurementId: process.env.REACT_APP_MEASUREMENT_ID,

};

// Initialize Firebase

export const app = initializeApp(clientCredentials);

//

Now you are all set, firebase has been initiated in your app now you can use different firebase services in your app.

All you need is to import them from firebase.

Summary

we learned to create a new React application using create-react-app and also how to initiate firebase in our React application. We also learned how not to expose the firebase environment keys by using .evn files.

In the next article, we will learn about creating an Authentication application using firebase auth and react's popular framework NEXTJS.

If you liked my work considering the following and liking this article, it keeps me motivated and in case you want to connect to me feel free to email me at ashish.1999vns@gmail.com or connecting me on Twitter.

https://twitter.com/theysaymaurya/status/1438924150588915716?s=20

also if you wanna support me please consider buying me coffee.

This blog is posted using Blogtiple

Everything You Should Know About Blockchain.

Ashish maurya — Thu, 24 Feb 2022 16:51:35 +0000

A lot has changed since blockchain first arrived in the 1990s and since then it's changing our world in a way no one has predicted. If you have been active on the internet you must have heard people throwing words like NFT, Ethereum or you must have heard about some famous crypto coin like Dogecoin or Bitcoin.

Here is a tweet of Elon musk about Dogecoin.

https://twitter.com/elonmusk/status/1284291528328790016

Here is a tweet about Jack Dorsey which was sold for NFT for over $2.9 million

https://twitter.com/jack/status/20?lang=en

If you wanna know more about NFT read an article by Like I'm 5 on NFT.

All the famous cryptocurrencies like BTC, Ethereum, or any other coin like Ethereum classic or Bitcoin cash run on Blockchain and something to know NFT which works on Ethereum which runs on Blockchain.

So the question arises what is this BLOCKCHAIN everything is running on.

let's see

Genesis of The Blockchain

Well, the blockchain is originated way before any cryptocurrencies emerged or hypothetically saying, even theorized. A cryptographer named David Chaum first tossed the idea of the blockchain-like protocol in his 1982 dissertation " Computer Systems Established, Maintained, and Trusted by Mutually Suspicious Groups ".

Further work on a cryptographically secured chain of blocks was described in 1991 by Stuart Haber and W. Scott Stornetta. They wanted to implement a system wherein document timestamps could not be tampered with.

It wasn't till 2008 when the first blockchain was conceptualized by a group/people know as Satoshi Nakamoto. Nakamoto improved the design in an important way using a Hashcash-like method to timestamp blocks without requiring them to be signed by a trusted party and introducing a difficulty parameter to stabilize the rate with which blocks are added to the chain. The design was implemented the following year by Nakamoto as a core component of the cryptocurrency bitcoin, where it serves as the public ledger for all transactions on the network.

How Blockchain works

As the name suggests blockchains are nothing but a big chain of interconnected blocks. Where every block contains their previous block's hash value and that is how they are linked as well as their own unique hash.

Now that we have a gist of what blockchain is let's dive deeper into the technicality of Blockchains.

Why Blockchain?

Blockchains are decentralized and transparent which means anyone can add their own block on the blockchain given that they have to do certain work to add it. This process is called mining and it is well rewarded. We will talk more about mining later in this article.

It is well secured by powerful cryptography which makes it impossible to tamper with. Also, blockchain is publicly broadcasted and are decentralized which makes it immutable and impossible to temper.

But what is Decentralization?

To understand this concept of decentralization let's first understand how banks and transactions work right now.

Suppose you want to share money with your friend Bob who is miles away from you. So what will you do is open your Application on your mobile and transfer the money to Bob's account.

So what is happening behind the scene is you are not sending money to Bob instead you are sending a message to the bank. A message you kidding me? Well, if you think a little more money is nothing but some number in this digital world.

So our message might look something like this.

 { 

    "To" : "BOB",

    "From" : "Alice",

    "Ammount" : "500 $"

}

So in this message, we are saying send 500$ to Bob. After the bank receives this message from your device it will check so certain tasks to complete the transaction.

It will open the ledger ( A ledger balance is computed by a bank at the end of each business day and includes all withdrawals and deposits to calculate the total amount of money in a bank account.) and check if Alice has enough money to transfer i.e if Alice has 500$ or more.
If the above condition is met then the ledger is updated where the new balance of Alice will be the old balance - 500 $ and a new balance of the Bob will be the old balance + 500$.
After this both receive a message that their transaction is successful.

So this was how the transaction works with banks. But the problem with it is you can never verify the transaction yourself or you can never see what is happening inside the book of the bank you trust they can manage your money and all the power is centralized around the bank. They have the power to create new money (as I already said it's just a number) or transfer if they want.

This centralization of power is something from which the community is not happy with and blockchain solves the problem using a decentralized method of adding a transaction.

Now let's understand how Blockchain handles this kind of transaction between Alice and Bob.

Now Alice wants to send some money to Bob through Blockchain. This transaction will happen without the interference of any central power.

So what's really happening is shown in the below image.

When a transaction is made it creates a block that block is then sent to every node where miners compete with one another to add that block to the main block. On successfully doing that each miner is paid in cryptocurrencies, but that is the miner's logic which can be discussed in the next article.

For now, we understood how decentralization happens in the blockchain.

So now you might though if no one is governing the transactions then how is it getting validating and adding to blockchain who is doing all that work? Here come's the miners who validate the transaction and add it to the block.

Who are Miners and how Mining Logic Works

Well, till now it's clear that the blockchain is made of a number of blocks. So what are these blocks and which kind of data do they contain.

Well if we see an overview block looks something like below.

In this, we can see that a single block contain

Previous Hash
Nonce
TimeStamp
Merkel Root.

But in exact a block look something like this with a lot of data

You can see all the transactions and blocks of the public Blockchain. Here I used Etherscan to get the block data but there are a lot of services out there.

So what happens is every time transactions are made they came to miners where miners validate the transactions and then try to add that block to the public Blockchain.

Why I used "try to add"? Instead of add, well every miner is trying to add a new block to the Blockchain continuously all the time and it's like a race between every miner.

The way blockchain validates a block is valid or not is called Consensus Mechanism. There are different ways the Consensus Mechanism works one which is very popular is Proof of Work others are Proof of stake, Proof of Capacity, Proof of Activity* .

In this article, we will only talk about the Proof of Work.

In Proof of Work, every miner has to compute a hash value for the block in some given condition.

Let say you are a miner and you have to calculate a hash value that should start with 4 0's

for example : 0000x147a9393258780beef7d

to calculate something like this take a lot of trial and error and a lot of computational power. And also there is only one thing you can change in the block which is the value of Nonce.

So for every time you want a new hash value, you keep incrementing the value of Nonce and by finding a valid hash you can add that hash to the block.

Well if any miner can add to the Blockchain isn't that make the Blockchain untrustable and unsafe.

Well here comes the power of Decentralization to save you. Every time a miner adds a block to the Blockchain other miners do a validation check on that block. If the block is valid and matches with their own version of Blockchain if everything is valid they add that Blockchain to their own version of Blockchain and start mining the new block.

Say, if some malicious group tries to add an invalid block to the Blockchain for their own profile. After successfully mining the Blockchain their block will be rejected by other miners which can cost them a lot of money and computation power.

If another miner successfully mines a valid block the whole Blockchain will move to that version of the block and malicious manner have to sync up to mine the next block.

Well, for every success full mining each miner is given some reward. For mining on BTC Blockchain, it's BTC coin and on mining on ethereum Blockchain, it's ethereum.

fun fact: It's the only time a new coin is created. (It's just an analogy)

well till now we learned about what is Blockchain and now a new block is created and added.

But, we have no clue about how transactions take place in the blockchain.

How the transaction works in Blockchain.

Let's again take Alice and Bob's example and understand the transaction in-depth and how every transaction is protected.

But before that let us look at the concept of asymmetric encryption.

Asymmetric encryption and how it works in Blockchain.

Now, to understand this let's first understand how symmetric encryption works. Suppose Bob wants to send some data to Alice but the data is sensitive and Bob wants to send this in a way that only Alice can read it. Alice will send her on the box so that Bob can put the data in a box and close it. Once the box is closed only Alice can open the Box with her key, let's call this key Alice's Private key.

Now in cryptography same concept is happen, to send a message to Alice Bob encrypts the data using the Hash function such that only Alice's private key can Hash it back to the original data.

The problem with the above method was for every time Alice wants to receive a message Alice have to create numerous keys and boxes to receive messages from numerous people. This can be really problematic and hence the concept of the Asymmetric key was introduced.

Now in the Asymmetric Encryption key, Alice has two keys one is called Alice's private key and the other is called Alice's Public key. Now the public key is shareable and the private key must not be disclosed.

Now, every time someone wants to send a message to Alice they can use Alice's public key and send it to Alice now that message can only be decrypted by Alice's private key.

The math behind is quite long so we will discuss it in later articles, but for now, we understood the private and public key concept. Let's see how it is implied in Blockchain

In Blockchain when Alice wants to send money to BOB that data will be sent to the miner where they verify some conditions like the following.

Does Alice have enough money?
Does Alice is the one who sent the money to Bob or is it someone else.

For checking the available balance in the wallet BTC uses something called UTXO. An overview on UTXO will be that it is a set of all the previous transaction is done by Alice and after adding and subtracting everything if the balance matches then miner approve the transaction.

And to verify if the transaction Is came from Alice something called a Digital signature is used where Alice signs with her private key and sends it to the miner with other data. Well, you have to understand that those logics are automatically implemented in the wallet and Alice doesn't actually sign anything. Moving on what kind of data is sent to the miner?

Well, the data might look something like this with other data of course

Once it is received the miner will validate the transaction and add it to the Blockchain. Once added to Blockchain the data becomes immutable.

Summary

Today we learned about how Blockchain works and how data/transactions are added to the Blockchain. Once the transaction came to the miner, the miner validates the data and calculates a valid nonce value to add his version of the block to the Blockchain. Once added the miner get a reward but if the miner tries to add malicious data then it gets declined by rest of the miner and once more than 50% miners agree to some nonce then that will become the main branch and malicious data will not be added to the main branch of the blockchain.

So, this was an overview of Blockchain technology I hope you liked the article. I will be posting more in-depth knowledge about this topic from time to time. To get notified please subscribe to my newsletter.

References:-

https://en.wikipedia.org/wiki/Blockchain#History

https://blog.ethereum.org/2015/11/15/merkling-in-ethereum/

https://etherscan.io

This blog is posted using Blogtiple

Do You Really Know UseEffect?

Ashish maurya — Thu, 24 Feb 2022 09:25:09 +0000

React 16.8 comes bearing with gifts such as Hooks and React community couldn't be happier and why won't they be as Hooks gives the developer to create functional components with the power of Class components.

Some of the famous hooks are

State Hook
Effect Hook
Context Hook and so on.

But do you really understand them? Let's talk about the Effect Hook in this article and we will try to understand when and how to use them.

Using Effect Hooks

As mentioned in the document

The Effect Hook lets you perform side effects in function components

let's talk about what are these side effects? Imagine you are making a web app where you are needed to fetch some data from the server or set up a subscription using WebRTC these are some examples of side effects.

In the above example where you are fetching some data from API does not need cleanup means you can execute the function and forget about it. But the later one where you are subscribing needs the cleanup where you have to write some addition line so that every time your component unmounts the cleanup happens and your resources are not wasted up.

let's talk about the Effects without Cleanup

For using Effects in our React functional component we use useEffect Hook

  useEffect (()=>{

     console.log("Something Happened")

   })

Now useEffect accepts two arguments one is a callback function and one is an array.

Case 1

In this, we won't pass the second argument, and let's see what happens.

useEffect (()=>{

     console.log("Something Changed")

   })

Result: Every time our components render the useEffect Hook gonna run and we can see the text Something Changed in the console.

Case 2

In this, we will pass an empty array as the second argument [ ], and let's see what happens.

useEffect (()=>{

     console.log("Only Once")

   },[ ])

Result: This time useEffect Hook gonna run on mounting/ unmounting of our component and we can see the text Only Once in the console for only one time.

Case 3

In this, we will pass an array containing a state value as the second argument [ someState], and let's see what happens.

 const [someState , setSomeState] = useState();

useEffect (()=>{

     console.log("State Changed")

   },[someState ]);

Result: This time useEffect Hook gonna run when the value of the someState changes of our component and we can see the text State Changed in the console when we change the state.

Enough theory let's see some code now.

Above all cases are used in this Play around with the code to get to know more about the useEffect.

Now let's talk about the Effects with Cleanup

These are tricky ones, we already have seen the examples of hooks with clean up but let's see the code part which is provided in an official document, and try to understand it.

function FriendStatus(props) {

  const [isOnline, setIsOnline] = useState(null);

useEffect(() => {

   function handleStatusChange(status) {

      setIsOnline(status.isOnline);

    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

    // Specify how to clean up after this effect:

    return function cleanup() {

      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);

    };

   });

if (isOnline === null) {

    return 'Loading...';

   }

   return isOnline ? 'Online' : 'Offline';

  }

As you can see we are returning a function this is called clean up function. This is an optional cleanup mechanism for effects so that when your component had been unmounted from the DOM tree it also unsubscribes to the FriendStatus. As we already know that effects run with every render so this is important to clean up from the previous render also.

Let's Wrap up

So, we learned three ways how useEffect can be used and we also learned that some effects need cleanups while others don't.

If you learned something or liked my content follow me on Twitter.

Follow @theysaymaurya

follow me on Hashnode Ashish maurya

This blog is posted using Blogtiple

How to Fetch Data From API in ReactJS.

Ashish maurya — Thu, 24 Feb 2022 08:14:14 +0000

While developing an application in ReactJs you might be asked to fetch some data from an API directly into the frontend and then process it.

Well just fetching some data from the API is quite easy and today we gonna learn that.

Let's get started

First of all, let's create a new React app.

Go to your terminal and copy-paste the below code.

https://gist.github.com/Ashumaurya/b48d33db8338b8d0c5edd1e61261e80c

Now open the folder in your favorite code editor. (Mine is VS code )
Let's use the JSONPLACEHOLDER API. (It's a dummy rest API for such purposes)

https://gist.github.com/Ashumaurya/3f47d91de2b8f2358812af639e26aca9

Install the AXIOS library for fetching the data.

https://gist.github.com/Ashumaurya/fbd180c4c1d37df398e047ac05556f44
After successfully installing the AXIOS let's import it into our app.js your app.js should look something like this

https://gist.github.com/Ashumaurya/21196bd8f556ee69edebd72f196226d8

Now we are almost done. All we have how to use the Axios inbuilt method Axios.get() to fetch data from the above API.
let's get started by creating a function fetchData in our App.js.

https://gist.github.com/Ashumaurya/75294e21d750a3fd2c9510c4a8120294

Now that we created the function to fetch data from the API, all we need is to call it in our App.js as soon as DOM renders.
We will use useEffect for fetching the data every time DOM renders.

https://gist.github.com/Ashumaurya/e160199eab4a9c03e46ebf389ae1ed2a

If you followed the above steps clearly you would be getting an array of Objects in your developer's console.

Voila!! you have fetched the data from a rest API directly into your React App.

Next is creating a TODO APP using React-18 with the above data

here is my code sandbox link for the above application

https://codesandbox.io/embed/fetching-dummy-data-from-axios-pubbi?fontsize=14&hidenavigation=1&theme=dark

This blog is posted using Blogtiple

Forem: Ashish maurya

We've Implemented Enterprise Integrations for Years. Here's the Honest iPaaS Landscape in 2026.

What Enterprise Teams Actually Need

The Platforms in Practice

The Problem Nobody Writes About: Governance and Change Control

The Cost Reality

The Operational Blind Spot

Where the Traditional Players Are Still the Right Answer

What We've Seen Work for Mid-Market Teams

Frequently Asked Questions

Final Thoughts

Multithreading In JavaScript using Web Workers

Problem with Single threaded Programing Language.

Modern Problem Required Morden Solution

An Introduction to Web Workers

Things to remember while using Web-Worker

Debugging the Performance

TL;DR

Creating a React Modal with React custom Hooks and Typescript

Creating the Modal from Scratch

Creating the Presentational Part of Modal

Why custom Hook?

Adding logic to the Hooks

Combining the logic and Presentational Part ( hooks + Modal component)

Calling the Modal component and useModal

Adding Logic to Modal component

Solving bugs and handling Event Propagation.

Try this on Sandbox?

TL;DR

Testing For Project submission

Setting Up Your Online Store: The Gumroad Way

Finding your Niche

Finding the platform to Sell

Already Built Market Places

Setting up you're a custom shop on your own domain

Gumroad ( My choice)

Setting Up your custom domain with Gumroad.

The Result

Introducing Blogtiple - A Cross Blogging Application

Introduction

The Problem

The Idea Behind Blogtiple

Features

Importing your already written blogs.

Scheduling Blogs for later (Beta)

Demo

Posting Directly to Platforms

Results

Scheduling for Later

Video Demo

Role of Netlify

Challenges

Future Plans

Tech Stack

Links

Testing Blogtiple

Building our first NFT Marketplace ARCANE without writing single line of Solidity 🖖

⛓️ What is Blockchain?

👀 What is NFT?

🤔 What is NFT Marketplace?

🤷‍♀️Problem

💡Inspiration

⚡That's where ARCANE comes into the Play

📚 TechStack Used

👯‍♂️ Team and Collaborator

🚀 Deploying

🌐 Links and resources

🤖 Future Possibilities

FIREBASE & REACT: Setting Up React APP with Firebase

1. What is Firebase

2. Setting Up React application.

3. Setting up the firebase for Web Application

4. Setting up Firebase with React Application.

Summary

Everything You Should Know About Blockchain.

Genesis of The Blockchain

How Blockchain works

Why Blockchain?

But what is Decentralization?

Who are Miners and how Mining Logic Works