DEV Community: Soumya Mondal

Create Calender heatmap in react like Github (from scratch)

Soumya Mondal — Sat, 20 Apr 2024 16:00:00 +0000

You must have seen those cool user activity heatmaps that shows the number of commits you've done over time using your github account. This has been a really crucial part of our journey.

Today I was able to create the same calender heatmap (without any packages) like GitHub and Leetcode under 30 minutes, and I've also recorded a simple video on that starting from scratch.

I've got an amazing response on twitter and I Hope you'll like this video as well.

In case you want to see more of these, I've a whole playlist on react machine coding and building components from scratch. You can head over to @indgeek on YouTube.

Shortest pathfinder in React using BFS

Soumya Mondal — Fri, 19 Apr 2024 19:32:22 +0000

Ever imagined your DSA skills could be implemented directly into your development projects?
Here you are, I've just curated a video where I showcase how to find the shortest path between two nodes avoiding their obstacles.

This pathfinder is created based on the Breadth First Search algorithm from graph.

I've received a lot of positive comments on all the social media combined for this tutorial and I hope for a positive reply from you as well.

Drag and Drop file upload with progress bar in ReactJS

Soumya Mondal — Fri, 19 Apr 2024 19:26:55 +0000

You know drag and drop file uploads should be provided as the default behavior for input type file. Yet the pioneers of the web never were ever able to provide such functionalities.

However I've created a project where I successfully implemented drag-and-drop file upload along with a progress bar and that provides you a cloud-uploaded URL as well.

How cool is that!

I've used no packages for the implementation of drag and drop upload, here's how! Created a tutorial on that topic to help you grasp the topic in a better way.

I'm sure you'll like the way I've explained, if you've any doubts at all, make sure to ask questions right away.

🔐How to encrypt variables in NodeJS

Soumya Mondal — Thu, 22 Sep 2022 02:54:15 +0000

Ever imagined what would happen if someone gets access to your MongoDB account where all your crucial information are stored.

All this comes down to another major issue when you have more than a few users who've submitted their confidential data relying on you.

Need of Encryption 💁‍♂️

Storing user's data without any encryption at all might not be a good idea.

A good fix to avoid compromising with someone's privacy would be to encrypt🔒 data before storing in Database and decrypt🔓 data while accessing from the Database.

-> How to Encrypt variables 🛡️

While hash can be a good idea to implement before storing your user submitted variables, that might not work to regain data from the Database.

Again npm packages like 'bcrypt' & 'crypto' can be super useful and complicated at the same time.

Let's see a method that's easy to understand as well as implementable in a flash.

-> Using Keyhasher

Assuming you already have a nodejs project set up, let's first install the npm package using:

npm i keyhasher

Running this in the terminal will install the package.
Let's require the package in the Node project.

const key = require('keyhasher');

Try to keep this at the top of the project file.

--> How Keyhasher Works

Keyhasher has two functions for Encryption and Decryption respectively.

Both the funtions takes in two arguments, the hashable or reverse hashable input and the Passkey 🔑.

Simple example of the functions are given as-

var hashAble = key.hash("Hi", 572);
console.log(`Hashed Phrase: ${hashAble}`)

// Hashed Phrase: X4A=

var rawWord = key.revHash("X4A=", 572);
console.log(`Output: ${rawWord}`)

// Output: Hi

In the hash Function, "Hi" is the text that is being encrypted, while I've used '572' as the Passkey🔑 that can be provided either directly to function or by using environment variable.

The function returns a Phrase "X4A=", which can be stored into the database.

With change to the passcode the Encrypted phrase changes. The same password is needed to decrypt the Encrypted phrase.

--> Securing the Passcode

The passcode can be any integer number like 12383473, 3481234, 341343, 8534582, 98, 1236, 894.

A better practice would be to store the passcode🔑 in the configuration file.

Create a .env file and store your passkey in the following format.

PASSCODE = "23143341"

After storing the passcode safely, it can be used in the project with following syntax.

var hashAble = key.hash("Hi", process.env.PASSCODE);
console.log(`Hashed Phrase: ${hashAble}`)

// Hashed Phrase: X4A=

var rawWord = key.revHash("X4A=", process.env.PASSCODE);
console.log(`Output: ${rawWord}`)

// Output: Hi