In this article, we are going to explore a pattern for frontend scalability. we are also going to explore the pros and cons of the ABC pattern.

Image for post
Image for post

Atomic Business Component

Reusable UI components can be shared across apps and they don’t carry any business logic them. But business UI components have business logic and data. Business UI components are created on top of reusable UI components.

Atomic Business Component is a pattern where the smallest part of the entire web application is created in such a manner so that,

  • It doesn’t depend on…


Well, why we need to reason for this simple statement and write a 2-page article on this?

It is just simple common sense. Client code (even which we wrote) will be executed on the client machine. we don’t have control over machines and the network.

Even if we make UI checks and hide stuff on UI, anybody else can still make an API call with any value.

Never trust client UI

We must do validations on the server-side at 1st priority and client-side validations at 2nd priority.


How we can fix not version so that developer, CI/CD, production, everybody uses the same node version?

Step 1 — Add nodeVersionLock in package.json

we need to add preinstall and prestart scripts too.

Image for post
Image for post

Step 2 — Throw errors when undesired node-version found.

Step 3— AutoUpdate of Dockerfile & GitbHub YML

This step is optional and custom. it depends on your setup.

This is an example of my setup where I am calling the above script using pre-commit hooks.


Image for post
Image for post
Photo by Becca Tapert on Unsplash

Ok, Let me ask this very brave question. Why in 2020, the pure frontend code repo is still private?

In my opinion, there are no such benefits by keeping frontend code repo in private walls.

1. The output is already public

we generate the build/dist folder by webpack or similar tools. this is the end result of most frontend repo. and this folder is already public.

If anybody can do something by looking at your public frontend repo, she/he can do the same thing by looking at your dist folder too.

By uglifying and other stuff, we just reduce the small probability.

2. Data is precious, it is hidden by API

What exactly we are…


Google sheet can be used as an excellent tool for internationalization in React App. It sounds strange but let me explain.

for Internationalisation, we need to maintain a big JSON file that holds the lang-keys and its translations. call it, langData.json.

generally, langData.json is part of code repo and every time, product manager/owner wants some change, the developer needs to make a change in the codebase.

Google sheet as JSON Hosting

We can host this langData.json over Google sheet. Think, Google sheet as JSON hosting website. In this article, we will learn to use an npm-package, which converts a Google-Sheet into a JSON file.

So…


Wrong-Way

import { Button, DatePicker, message, Alert } from 'antd';
Image for post
Image for post

Right Way


import Button from 'antd/es/button';
import Alert from 'antd/es/alert';
import DatePicker from 'antd/es/date-picker';
import message from 'antd/es/message';


We Indians are very much frustrated with IRCTC. Here are a few suggestions.

1. Remove AC1 and AC2 compartments

Take a look at Mumbai Rajdhani

Image for post
Image for post

AC1 has 22 seats = 22x4730 = 1,04,060

AC2 has 54 seats = 54x2835 =1,53,090

AC3 has 64 seats = 72x2040 =1,46,880

You can clearly see that,

If you increase face of AC3 from 2040 to 2126.25 (just 86 Rupee), AC3 coach will generate same revenue as AC2.

2. Increase General Coachs.


I have 2 kinds of git repos.

  1. Work-related code where I use my work email Id while git commits.
  2. Open Source code where I use my personal email id while git commits.

A lot of times, email mismatch happen. there is an easy solution for it.

The root cause of this mismatch is the “global” flag

git config --global user.email "EMAIL ID"

setting up “per repo” or “repo specific” user name and email is the solution.

Or you can directly edit the git config file.

.git/config

It is quite easy to set up a “pre-commit” hook to verify If email is not specified.


I always thought a lot of arguments and ways to do online election. Misuse is the biggest concern.

Sometimes, big problems have very simple solutions with small common sense.

Yesternight, when I was sleeping and an idea stuck in my mind that “Elections are Similar to online money transfer”.

Elections are similar to online money transfer

Voter Id = Bank Account (send only Bank accounts).

Candidate = Bank Account (receive only Bank accounts).

Vote = Send money (1 INR) from Voters Bank to Candidate Account

ECI = RBI

If you Imagine, Complete elections are basically a “Bank money transfer”.

Just before the election, Candidate file affidavit to…


I am here to give proof that NPCI/BHIM is hindering adoption of UPI.

Yes, I am blaming the TOP authority with proper proof.

My Story starts on 18 Sept 2017 when I identified a defect in BHIM app. and till date, I have communicated multiple times, but they are NOT fixing the defect and I have made a lot of efforts which I will show in the blog post.

18 Sept 2017

I published a detailed blog on the roadmap of UPI adoption with lots of suggests.

In the blog, I “Highlighted” a problem with BHIM.

Image for post

If you see the NPCI tech doc, there are multiple ways to generate UPI QR code. …

Narendra Sisodiya

12+yrs exp. JavaScript Expert. Full Stack Expert. React, Nodejs Mongo AWS, Terraform Pulumi. IITian, Open Source. Currently Software Architect @ Prophecy.io

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store