Have a look at the Zillow registration page below. It may look a bit verbose and busy. It may seem like we can take away the password requirements. Should it be there even before the user types it? Many sites won’t show the password requirements until the user finishes typing…

Graphql is awesome. Need to make it more awesome? What makes Graphql more awesome? Consider the below type Character. Imagine we query 4 properties from the type. Now, if we can do the below, that makes working with Graphql more awesome! In this article, we will see how to get up-to-date type checking…

Let's create a robust boilerplate that helps us focus on application building. Repository GitHub - karthickthankyou/ultimate-cra-boilerplate: The ultimate cra boilerplate that makes… You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com Create a react application with the below command. npx create-react-app my-app --template pwa-typescript

We laid out our design system foundations using tailwind in the previous section. Now let's create the base components that serve us like atoms or base building blocks for our application. Let's build them one by one. A couple of things before that. Script Generator We are going to place these components…

The foundation part of the design system comprises all basic styling necessities for a project. We will go through them one by one and create them using tailwind css. Colors We can either extend or completely reset the colors. Let's reset the colors. The brand Color of epicgames.com is #007dfc …

Font size is often associated with hierarchy. But using a lot of font sizes will make our UI look amateur. In this article, we will see the factors that help us bring hierarchy to any design with simple steps. Disclaimer: This article is best viewed in desktop mode. If you…

Let's create everything under the UI for our epic clone project. Once we get our infrastructure under our UI right, plugging UI components will become a breeze. Repository Clone the start branch to follow. Clone the final branch to follow the concepts skimming through the code quickly. // Repository github.com/karthickthankyou/epic-clone //…

In object-oriented and functional programming, an immutable object is an object whose state cannot be modified after it is created. This is in contrast to a mutable object, which can be modified after it is created. — Wikipedia Why immutability? Imagine you are working in a warehouse. Let’s look at two cases. …

Create the next immutable state tree by simply modifying the current tree — Immer. Software is all about reducing the pain points of people. We can see the effects of software making lives easier than they used to be all around us. But what about software developers’ pain points? Now…