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…

Code: https://github.com/karthickthankyou/nestjs-prisma-simple-graphql-api Getting started // Initialize a new nest application npx nest new graphql-api --package-manager=yarn // Install dependencies yarn add graphql @apollo/server @nestjs/graphql @nestjs/apollo Add Graphql module in Nestjs GraphQLModule.forRoot<ApolloDriverConfig>({ // Configuring the GraphQL module using the Apollo driver with a specific configuration type driver…

With the rise of efficient build systems like Nx and Turborepo, creating and managing monorepos have become simpler. Let's create a simple monorepo setup that has a NestJS project and NextJS project with shared linting, type-checking, formatting, and caching capabilities. 1. Setup yarn workspaces Create a folder and open it with VSCode. mkdir next-nest-monorepo code…

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 //…