Imagine you have an application in which users have some sensitive data and they may forget to logout, leave the session open and someone else can extract these sensitive data like a banking account, personal information, private messages,… As a developer, you need to have a solution to protect our…

If you’re working on a Typescript + React project, setting up ESLint + Prettier can help you catch errors early and enforce coding standards across your codebase. In this post, we’ll go through the steps of setting up ESLint + Prettier for a Typescript + React application In case you’re…

Welcome back to my React Hero series. Today, we’re going to setup testing for our React TypeScript application using Jest and React Testing Library (RTK). The React Hero series will be covering the following topics: Setup a new React application with Vite + TypeScript Setup React application with a design…

Welcome back to my React Hero series. Today we will continue to add a system design — Material UI to our React + TypeScript application that we’ve done previously. The React Hero series will be covering the following topics: Setup a new React application with Vite + TypeScript Setup React…

Welcome back to my React series. Today I will start writing a new series called React Hero where I can share with you a step-by-step guide on how to be a master in React development. …

Welcome back to my React series! Today I’m going to show you how to step-by-step create a dropdown select component in React. This post could be useful for you if you’re looking for a solution to create your own Dropdown select component in React from scratch. We will be covering…

I’ve just got an issue when running Jest in another countries and found that all the React snapshot test cases related to date time were failed due to different timezone. I figured out 2 solutions that could be useful for you if you’re facing the same Instantly run Jest with…

Today I’ll be helping you to step by step create an animated SVG circular progress component (a.k.a the ring progress) from scratch. If you are not using React, you can also apply it in a similar way. Here is the checklist: Understand the DOM layers & properties Create the circular…

There are a lot of libraries, plugins out there for implementing pie chart, donut chart but they can’t fully support for what designers need so you need to create your own pie chart, donut chart to adapt that unique designs. Today, I will show you how to create many different…