Forem: Swastik Yadav

How I prepared for Frontend interviews in 2 weeks (And how you can too)

Swastik Yadav — Tue, 23 Sep 2025 12:21:49 +0000

Preparing for frontend interviews was a nightmare for me.

There is just so much resources with 500+ questions and so many topics to cover.

The range of frontend interviews today is wild. You can be asked anything from CSS, JS, Performance, Networking, Accessibility, Browser APIs, System Design, and more...

Before every frontend interview I use to feel overwhelmed. It took me months before feeling even remotely ready to start applying. The imposter syndrome was just at it's peak.

It's not about more and more questions but right set of less questions.

“I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times.” - Bruce Lee

Sounds familiar?

I've been there, but I've also sat for multiple frontend interviews in many service and product companies.

And noticed a pattern, in every interivew I was more or less asked the same set of concepts just with different variations.

On the surface the questions looked different but deep down it was the same old concepts which can be answered easily if you understand concepts like closures, promises, performance, e.t.c.

Hence I built a list of the smallest set of questions which covers all important concepts and helps me preapre quickly before a frontend interview.

Now, I've decided to publicaly share my list with great explanations, examples, and visuals for FREE.

Introducing Frontend75: A curated database of 75 most important questions you'll face in your next frontend interview.

This isn't just another generic question dump. Each question includes:

Real-world examples
A "signal score" showing how likely it is to appear in your next interview.
Deep explanations (no more surface-level answers)
How I'd actually respond in a real interview setting.

Launching in a few days for absolutely FREE.

If you're tired of scattered resources and want a clear, focused prep path that actually works, join the waitlist here: https://frontend75.kit.com/waitlist

See you on the other side.

Thank You!

React component library for rapid product prototyping.

Swastik Yadav — Sun, 27 Jul 2025 11:39:43 +0000

There is nothing more satisfying than building great products that entice your users.

However, building a great product requires more than just coding or designing, and that's what I'm learning these days.

I am one of those people who believe in building great products at great speed.

Every time I build a product, I feel overwhelmed by the numerous UI/UX options available for layout, spacing, typography, and color.

Hence, I created a minimal component library for myself, which follows a specific set of rules to avoid being overwhelmed.

Introducing: Catalyst UI - A React components library for faster product prototyping.

Read the design system here: The Design System

Every CatalystUI component, block, and template follows this design system.

CatalystUI doesn't force you to follow this design system strictly. You can break the rules if you've a good reason to do so with simple TailwindCSS utility classes.

This is built with React, TailwindCSS, and RadixUI.

RadixUI is the core building block of this design system. Unstyled, Accessible, and Open-source React primitives.

Let's break down one simple component from CatalystUI.

Avatar component breakdown

RadixUI Avatar comes in three parts:

Avatar.Root: The root element
Avatar.Image: The element that takes the image URL
Avatar.Fallback: The element which renders name initials if the image URL is not given or can't be fetched

Here is the basic usage.

<Avatar.Root>
  <Avatar.Image src={imageUrl} />
  <Avatar.Fallback>SW<Avatar.Fallback />
<Avatar.Root>

This renders a completely unstyled Avatar, one that doesn't even look like an avatar. So that we can style it however we want. And that's not a bug but a feature of RadixUI Primitives.

We'll create three different components for each part of the avatar.

Use children props to render Avatar.Image and Avatar.Fallback into Avatar.Root.
Style each part with TailwindCSS.

const AvatarRoot = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, children, ...props }, forwardedRef) => {
  return (
    <AvatarPrimitive.Root
      ref={forwardedRef}
      className={cx(className)}
      {...props}
    >
      {children}
    </AvatarPrimitive.Root>
  );
});

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> & {
    imgUrl: string;
  }
>(({ imgUrl, className, ...props }, forwardedRef) => {
  return (
    <AvatarPrimitive.Image
      ref={forwardedRef}
      className={cx(
        // base
        "w-[26px] h-[26px] rounded-full cursor-pointer",
        // className prop
        className
      )}
      src={imgUrl}
      alt="Colm Tuite"
      {...props}
    />
  );
});

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, children, ...props }, forwardedRef) => {
  return (
    <AvatarPrimitive.Fallback
      ref={forwardedRef}
      className={cx(
        // base
        "cursor-pointer border border-gray-200 rounded-full p-1",
        // className prop
        className
      )}
      delayMs={600}
      {...props}
    >
      {children}
    </AvatarPrimitive.Fallback>
  );
});

Now, our Avatar component is ready to be used. Here is the usage.

<AvatarRoot>
  <AvatarImage imgUrl="https://avatars.githubusercontent.com/u/44374494" />
  <AvatarFallback>SW</AvatarFallback>
</AvatarRoot>

Similarly, other components are also built with some API differences. Radix doesn't have primitives for everything, so for other things, we can use the Slot utility from Radix to get its accessibility benefits into our custom primitives.

Show your support by giving CatalystUI a star on GitHub: https://github.com/Swastikyadav/CatalystUI

6 Steps To Become A Profitable Freelance Web Developer In 90 Days.

Swastik Yadav — Fri, 30 Aug 2024 07:22:01 +0000

Hello Devs!

Did you know 99 out of 100 developers who try to start a freelance business and make money outside of a job fail?

Yup, It sucks. The main reasons why they fail are:

They don't know how to select a niche.
They don't know how to create great offers.
They don't know how to bring traffic to their business.
They don't know how to sell their services.
And so on...

Times have changed, selling only web development services won't work unless you tie it up with either "health", "wealth", or "relationship".

Businesses don't want a website, they want a website that converts and brings more revenue.

Hi, I am Swastik. A software engineer developing software for companies and freelance clients for 4+ years now.

Over the years I have developed a 6-step framework for web developers to start a profitable freelance business in 90 days.

This is the exact framework that I and my close developer friend circle use.

Stop creating your Fiverr and Upwork profile.
Stop bidding for minimally paid gigs.
Stop trying to compete with thousands of commodity freelancers.

If you follow this system step by step and be consistent you won't believe what you can achieve in 3 months.

So, here I reveal the system.

Step 1: Skills Needed

To be honest you don’t need to know any crazy technologies. If you know how to build websites and landing pages, you are good to go.

No matter how you build it plain HTML-CSS, React, Next, WordPress, or anything else.

If you are not sure or don’t feel confident, start by learning NextJs, that’s what I use. If you know basic Js and React, it won’t be tough to learn.

Also, NextJs is the standard nowadays.

That’s why you should learn NextJs so your skills don’t hold you back.

Skill problem solved!

Step 2: Niche Selection

Niche is simply whom you serve as a freelancer. If you accept to work with every type of client under the sun, you'll soon become a commodity business and die.

But being a niche expert will allow you to charge for value and you won't be competing over price.

Use any AI tool for Niche selection research. I prefer Google's Gemini here because of its better ability to search the web.

Come up with a list of 8-10 niches for yourself and then Use the following prompt.

-- AI Prompt For Niche Selection Research --

I am starting a service business and want your help to decide on a niche.

I have listed a few niches, I want you to do some research and figure out the following 2 metrics for each one.

The 2 metrics are:
- What is the average order value in that niche?
- What is the demand for the services the niche provides?

Here are the niches [*these are my list of niches, insert your list here*]:
- Medical Spas
- Beauticians / Makeup Artists
- Packers and Movers
- Cleaning businesses
- Real Estate
- Dentists
- Dermatologists
- Pest control
- Gym

I want you to give a score to each niche I provide. Give a score based on Demand "1 for low, 2 for moderate, and 3 for high" and AOV "similar to demand". And then rank or sort the niches according to the score.

This will rank your list according to the 2 metrics we gave. Choose one from the top 3 niches.

Once you choose a niche, stick with it.

Step 3: Offer Creation

Your offer is the promise you are making to your clients.

Selling only web development services is difficult because everyone is doing that. You have to offer something that no one else is offering.

Don't just offer a website, offer a website that'll increase their conversion rate from 1% to 3-4%.
Don't just offer a landing page, offer a landing page that will 2x their revenue in 90 days.

You get the idea.

Make an Offer so good people feel stupid saying no. Watch my video where I went through this checklist and closed a client, you'll understand what I am talking about. [Video link at end of post]

But make sure to be practical and don't promise anything that you can't deliver.

Step 4: Traffic Source

Your offer doesn’t mean anything if no one knows about it. No matter how good of an offer you made.

You are probably here from my cold DM, content, or Ad. That’s how I bring traffic.

There are only 4 core ways to bring traffic and make people know about your stuff.

Warm outreach
Content
Cold outreach
Ads

The only purpose of traffic is to get leads and make strangers want to buy from you.

Watch the video and see how I brought traffic to freelance business.

Step 5: Sales

If your offer is really good, sales will happen on its own. And you’ll do just fine.

But if your offer is bad, you’ll have to put some effort into sales. And you can still do just fine.

Now imagine, what'll happen if you:

Have a great offer.
Are good at sales.

Sales is not forcing your clients to buy, but giving them as much value as possible until they are ready to buy.

Give them so much value upfront that they feel obligated to pay you.

Step 6: Service Delivery

Once you close a client.

Now the real work begins. Service delivery is the most important aspect of your freelance business. Because if you don’t deliver your promises your business will die fast and steady.

A great service delivery fulfills your promises and keeps getting repeat clients and referrals.

Follow this system and be consistent for the next 3 months. You'll thank me later.

If you found this article helpful. For more tips, strategies, and frameworks on monetizing your coding skills join the newsletter at Degreeless.Dev.

3-step process to break into tech in 180 days.

Swastik Yadav — Wed, 19 Jun 2024 09:59:49 +0000

As freshers worldwide scramble to make their first breakthrough in tech, one question remains:

How do you prove your worth as a fresher?

I have done this twice. I broke into tech again after a 1-year gap in my resume. I did it a couple of more times for my friends. So, let me tell you how.

But it won't be possible without a carefully devised plan.

I am sharing my tried and tested framework for breaking into tech with this article.

Everything is distilled into actionable steps to help you make your first breakthrough.

Let's get into it.

What are you doing wrong?

What most freshers are doing wrong is they apply to job postings where there are already hundreds of applicants.

Tell me this,
Where do you stand in that crowd without any professional experience?

So, here are the prerequisites to the main framework. Make sure to have these points in place first.

Stop applying to every job posting mindlessly.
Learn to create pixel-perfect designs with CSS.
Learn to make web pages interactive with JS.
Learn one JS framework/library, preferably ReactJs.

It's time to stand out, not to get lost among hundreds of resumes.

Your 3-step breakthrough roadmap

Build projects beyond todo apps.
Be the LinkedIn profile recruiters are looking for.
Learn to network and reach out.

Step #1: Build projects beyond todo apps.

As a fresher, you must show this to your potential employer. So, pay careful attention to building projects.

Build projects which clearly show your:

UI/CSS Skills
Frontend Skills
Handling 3rd party APIs and integrations Build projects beyond todo apps.

For reference, check the pinned projects on my GitHub profile.

Step #2: Be the LinkedIn profile recruiters are looking for.

If you ask me to choose only one platform to build my social presence as a developer, I will choose LinkedIn every single time.

LinkedIn is a goldmine of opportunities if used properly.

It's time to optimize and fix your LinkedIn profile. So let's make every aspect of your profile count.

Your banner

The LinkedIn banner is the most underutilized real estate by developers.

It is not to show the creative art or your NFT (leave that stuff for Twitter guys).

Your LinkedIn banner should give all your contact details to the visitor. Here is mine, for example.

Note: This is not how my profile is set up currently. I keep changing my profile. I will revert to these suggestions if I again start looking for a job.

Your headshot

The profile picture is the most straightforward section. Yet, so many devs get it wrong.

Avoid the following type of picture:

A cartoon version of you.
You looking sideways.
No selfie, please. Your headshot should have a white/blue/black background and a great smile. That's it.

Your tagline

Your tagline should be succinct and clearly state:

What you do. ex: JavaScript Developer
Avoid using words like "aspiring". You are already a developer if you can build a simple web page.
What technologies do you work with? Your profile won't show in search results without this.
Don't write Frontend or Backend because no one is searching for those keywords. Mention exactly what you work with.
You can mention an interesting project you are working on. Ex: Building a real-time feedback platform with socket.io.

Here is my tagline:

Your featured section

Most developers use it the wrong way by featuring some posts or articles.

This is where you showcase your projects. The featured section is where your portfolio goes.

I don't suggest showing your projects in the LinkedIn project section because the project section is visible at the end of the profile page. Instead, use the featured section.

Here is my featured section. I have live projects & GitHub codebase. Let's decode. Don't miss the Pro Tip.

Code samples, GitHub, live projects. Something that you have to show.
Recruiters want to know what you have already done.
If you have backend projects, share the code on GitHub.
If you have frontend projects, make sure to add screenshots of your UIs. Pro tips:

100DaysOfCode is not for LinkedIn. Position yourself as a confident developer. (Perception is reality)

Record a 30-second video and put it as the first thing in the featured section.

I haven't done this personally. But I will do it if I again start a job search.

In those 30 seconds, answer the most common interview question: "Tell me about yourself".

Now when a recruiter sees it, they will know about you more than they know about any other candidate.

Spoon-feed the recruiters.

Your About section

This is where you brag about your achievements, even the smallest of achievements.

Here also include relevant tech keywords. But do not overdo it. Overdoing it will kill your profile. Integrate keywords in the natural flow of writing.

This is my LinkedIn about section. Let's decode it.

See how I naturally integrated my technologies. (Highlighted in yellow)
Notice how I mentioned even small achievements. (Highlighted in green)
Explain something interesting about yourself. (Highlighted in light blue)
Avoid too much use of fluff words like "I am a passionate developer". Don't tell, show the passion in your work.

You may feel like you have no significant achievements. And it is normal, with more experience, you will have more achievements to talk about.

Here is what you need to do now if you aren't that experienced.

Sit down and reflect on your past experiences and projects. Write down every single achievement no matter how small they are. Then list the relevant ones on LinkedIn.

Ex: Created a RestAPI design, implemented the UI from Figma wireframe, etc.

Step #3: Learn to network and reach out.

LinkedIn is a great place to make connections and network with people that bring value to the conversation.

You never know where one conversation can lead you.
Here is how you should apply for job postings. This method is pure gold.

If you see a company’s job posting that you’re interested in.

Immediately go to LinkedIn, type the company’s name in the search bar, and hit enter.

Filter by people, and you will have a list of around 300 people from that company.

Start DMing these people.

You: “Hey, I saw you have a job posting up. So, like, who do I really need to talk to?”

They: “You need to get in touch with XYZ. He is managing the job posting and hiring.” (They will probably introduce you to the manager themselves. If they don’t, there is no harm in asking.)

You: “Oh okay, do you mind if I ask you to introduce me to him? Like over email or LinkedIn, anything works for me.”

They: “Yeah, sure.”

Introduction done, and boom. You have an interview lined up.

This method never fails. (Trust me) I have done this many times, and it works every single time. But please do not overdo this method, Use it in some situations only.

There you have it — an actionable, effective framework to make your breakthrough into tech.

Thanks for reading. For more tips, guides, and strategies on monetizing your coding skills follow me.

React Interview Task: Build a folder/file explorer UI.

Swastik Yadav — Thu, 28 Mar 2024 05:52:24 +0000

Frontend interviews are getting more and more challenging day by day.

Implementing a complex frontend feature/UI live in an interview call is no joke.

I encountered one such situation where I had to build a VS Code like folder/file explorer UI.

This post will discuss the question, thought process, and system design behind it. Finally, we will write code to solve it.

What are we building?

Live preview with code: https://stackblitz.com/edit/vitejs-vite-4bqecn?file=src%2FApp.jsx

Let's start by understanding the philosophy and system design and then we will start writing code.

Before we begin, I want to mention that this post is part of my weekly newsletter.

Where I build such complex frontend features and solve complex frontend interview questions every week.

If you want to learn with me, join the Newsletter.

Now, let's continue.

Philosophy

The basic philosophy behind building a "Folder/File explorer UI" is as follows:

List all the folders and files in the root directory.
Clicking on the folder name should expand to show all the files inside that folder.
Clicking on the folder again should collapse to hide all the files inside that folder.
Clicking on a file would do nothing in our case.

CSS will not be the focus of this task.

System Design

We will create a JSON object to mimic a VS code-like folder/file structure. This object will contain all the folders and their nested folders/files.

Alright, but there is a big question here. How do we identify which entry in the JSON object is a folder and which is a file?

Well, we can keep nested folders/files in an array of objects and add the flag isFoloder.

Here is our JSON object with all folders and files.

structure.js

const folderStructureData = {
  name: 'root',
  isFolder: true,
  items: [
    {
      name: 'index.html',
      isFolder: false,
    },
    {
      name: 'app',
      isFolder: true,
      items: [
        {
          name: 'app.js',
          isFolder: false,
        },
        {
          name: 'src',
          isFolder: true,
          items: [
            {
              name: 'main.jsx',
              isFolder: false,
            },
            {
              name: 'utils.js',
              isFolder: false,
            },
          ],
        },
        {
          name: 'app.css',
          isFolder: false,
        },
      ],
    },
  ],
};

export default folderStructureData;

Now we need to access this JSON and render the folders/files name in UI. So let's do that.

Let the coding begin.

We'll start by fetching JSON data and map over it in App.jsx. And at each iteration, we will check if the item is a folder or a file.

If it is a folder we will return <Folder /> component else <File /> component is returned.

App.jsx

import './App.css';

import Folder from './components/Folder';
import File from './components/File';

import folderStructureData from './structureData/structure.js';

function App() {
  return (
    <>
      {folderStructureData.items.map((item) => {
        return item.isFolder ? <Folder item={item} /> : <File item={item} />;
      })}
    </>
  );
}

export default App;

Now, let's define our <Folder /> and <File /> components.

components/Folder.jsx

export default function Folder({ item }) {
  return (
    <>
      <p
        style={{
          background: 'lightgray',
          padding: '2px',
          cursor: 'pointer',
        }}
      >
        &#x276D; {item.name}
      </p>
    </>
  );
}

components/File.jsx

export default function File({ item }) {
  return (
    <p
      style={{
        background: 'lightgray',
        padding: '2px',
      }}
    >
      &#9781; {item.name}
    </p>
  );
}

Awesome, this renders our folders and files on screen. But wait ideally, we should see a folder structure like the following on screen.

---- index.html (file)
---- app (folder)
-------- app.js (file)
-------- src (folder)
------------ main.jsx (file)
------------ utils.js (file)
-------- app.css (file)

But what we see right now is just index.html and app, but why?

This is where this task becomes a little bit challenging. Can you figure it out on your own? Try and then come back.

Ok, let's solve it.

So basically, we are iterating over top-level data only in App.jsx that's why it only shows top-level folder and file names on the screen. How do we iterate over the nested data? Like inside app and then inside src.

Well, we can manually do it for app and src but then it would fail if we change our JSON structure. Our solution should be such that it works automatically with any change in JSON structure.

Did you notice that our top-level and nested data both have the same data structure?

That design will allow us to recursively solve this problem. We will use the concept of recursion to solve this.
Recursion means calling a function within itself.

Ex:
function recurseEx() {
recurseEx();
}

Inside the Folder.jsx we will again map but this time over nested data and check for isFolder flag.

If isFolder is false File.jsx is returned, else Folder.jsx is returned from Folder.jsx itself.

Folder.jsx

import { useState } from 'react';
import File from './File';

export default function Folder({ item }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <>
      <p
        style={{
          background: 'lightgray',
          padding: '2px',
          cursor: 'pointer',
        }}
        onClick={() => setIsExpanded((prevState) => !prevState)}
      >
        &#x276D; {item.name}
      </p>
      <p
        style={{
          paddingLeft: '12px',
        }}
      >
        {isExpanded &&
          item.items.map((item) =>
            item.isFolder ? <Folder item={item} /> : <File item={item} />
          )}
      </p>
    </>
  );
}

Notice, that the Folder.jsx is returned from Folder.jsx itself, and that is recursion. With that now all our nested data is taken care of, no matter how deeply they are nested.

There is also an isExpanded state added, which just tracks if a folder is in expanded or collapsed state. And based on that the nested data of that folder is shown or hidden.

Now, try changing the JSON structure and our feature will still work. And that is awesome.

P.S:

This feature is not tough to build if you understand recursion. But I also know that recursion is not an easy concept to wrap our heads around.

And there are many more concepts like recursion. That's why I am building a resource that'll teach you such programming concepts with visual examples.

And don't worry it is not gonna cost you anything.

I am still working on that resource and am very close to launching it.

So, stay tuned by joining the Newsletter if you haven't already.

Thank you,

Comment down on which feature I should build next.

Adding dark mode to your app has never been this easy.

Swastik Yadav — Wed, 20 Mar 2024 08:04:47 +0000

Hello Devs,

Nowadays, one feature that you will see in almost all sites especially in blogs is theme switching specifically dark mode.

And that's what we are building today. [Dark Mode in NextJs page with Tailwind and Shadcn-UI]

So, let's dive in to build our third front-end feature.

What are we building?

Live preview with code: https://stackblitz.com/edit/stackblitz-starters-adalin?file=app%2Fpage.tsx

Before we start I just wanna mention that:

This post is the #3 issue of my newsletter.
Where I am building one complex front-end feature every week and breaking down the exact steps, philosophy, and system design behind it.
Join the newsletter to learn with me.

https://diaryofadev.ck.page/

Philosophy

First, let's understand the philosophy and basic system design behind adding dark mode to a web page.

As front-end engineers, we should provide our users with the best experience possible. Readability and simplicity are important. There is no point in creating the best animation in the world which leaves your user confused.

Remember, The goal is to be clear, not clever.

Dark mode provides relief to the user's eyes. You as a developer must be using the dark theme of VS-Code. Then why deprive your users of that experience?

System Design

You must have seen the color wheel.

The color wheel provides a complimentary color for each primary color. You will use the color wheel if you are building multiple themes on your page.

But for our purpose, we only care about two colors white (primary) and black (secondary). I have oversimplified the design by saying white (primary) and black (secondary) colors.

We will be using different shades of those colors using hue and saturation as you will see later.

We will predefine all our primary and their respective secondary colors and whenever the user switches to dark mode all we have to do is switch the primary and secondary colors being used in our code.

Let the coding begin.

Let's start by creating a new NextJs project using create-next-app. Create-next-app is equivalent to create-react-app but for NextJs.

npx create-next-app@latest next dark --typescript --tailwind

This will create a new NextJs project named nextDark with typescript and tailwind already configured for us. Now replace the default content in app/page.tsx with the following code.

page.tsx is a special file in NextJs that serves as the home page.

page.tsx

import { Button } from '@/components/ui/button';

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center p-24">
      <h1 className="text-2xl font-bold">NextJs Dark Mode</h1>
      <p>Issue #3 of the Newsletter.</p>
      <small className="my-4">
        I am building one complex frontend feature every week. Breaking down the
        exact thought process and system design behind it.
      </small>
      <a href="https://diaryofadev.ck.page" target="_blank">
        <Button>Join The Newsletter</Button>
      </a>
    </main>
  );
}

The button you see in the above code is not a regular button it is a shadcn-ui component. Shadcn is a UI components library. Let's add it to our project.

Run the following two commands in your terminal. Run them one by one.

npx shadcn-ui@latest init // answer few config questions, go with default ones.
npx shadcn-ui@latest add button

The first command installs shadcn-ui, its dependencies latest version. Sets up the project configuration like tailwind.config.ts and app/globals.css.

The second command add the button component in components/ui/button.tsx.

Ok, our home page is ready to go.

See the globals.css file, it is modified by shadcn-ui. It contains some interesting configurations.

globals.css

:root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

The class .dark defines the secondary color for each respective primary color. Check the global CSS file and explore the primary and their secondary colors for a while. This makes our job to switch to light/dark mode very easy.

Adding dark mode.

Install next-themes. Next-themes provides a wrapper to wrap the part of the application where we want theme switching. We will wrap up our entire application.

npm install next-themes

Create a theme provider (the wrapper). Create a new file theme-provider.tsx and paste the following code.

theme-provider.tsx

'use client';

import * as React from 'react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';

export function ThemeProvider({ children, ...props }) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Make sure to add "use client" at top of the file because this must be a client component not server component. Then we import ThemeProvider from "next-themes" and return it with children.

Next let's wrap the root layout with ThemeProvider. app/layout.tsx is again a special file in NextJs. The style and content in layout is applied to the entire app.

So, wrapping layout with ThemeProvider will add theme-switching to the entire app.

layouts.tsx

return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          <ModeToggle />
          {children}
        </ThemeProvider>
      </body>
    </html>
  );

Okay, now all we need to do is add a theme toggle button. Notice in the above code there is a component <ModeToggle />. Let's create that component and we will be done.

modle-toggle.jsx

'use client';

import * as React from 'react';
import { Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';

import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export function ModeToggle() {
  const { setTheme } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme('light')}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme('dark')}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme('system')}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

The above code adds a dropdown menu to switch between light, dark, and system. The dropdown is a shadcn-ui component. So let's add that component to our project.

Run the following command.

npx shadcn-ui@latest add dropdown-menu

This will add dropdown-menu component in component/ui/dropdown-menu.tsx.

Break down of few important things in mode-toggle.jsx:

setTheme sets the theme (light, dark, or system) in the provider so that it is accessible to the entire app.
The tailwindCSS of Sun and Moon elements.
- Sun (scale-100 dark:scale-0): Sun icon width becomes 0 when theme is dark so that it is not visible in dark mode.
- Moon (scale-0 dark:scale-100): Moon icon width becomes 100% when theme is dark so that is is visible in dark mode.
And vice versa.

Cool, now go ahead and try to switch the theme.

Congrats!

Oh wait, what? It is not working. Ya, it won't work because we have a little bug.

Gotcha

Right now the theme switching won't work because of a small bug.

See we are using tsx and jsx both in our application. But NextJs was initiated with typescript configurations so tailwind ignores our jsx files. Just add the js and jsx in tailwind config.

tailwind.config.ts

const config = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx,js,jsx}',
    './components/**/*.{ts,tsx,js,jsx}',
    './app/**/*.{ts,tsx,js,jsx}',
    './src/**/*.{ts,tsx,js,jsx}',
    ],

   ...
}

And that is it.

Now our theme switching is working perfectly fine. You can check the final project at the preview link provided at top.

Your users are gonna love you for giving them a dark mode.

Reply/comment to this email/post if you have any suggestion on which feature should I build next.

If you found this useful, join the newsletter for such posts every week.

Build a password strength indicator in ReactJs.

Swastik Yadav — Wed, 13 Mar 2024 07:07:19 +0000

Hello Devs,

This feature is the latest issue of my newsletter where I am building one complex frontend feature every week.

And share the breakdown of the thought process and design behind it.

Join the newsletter: https://diaryofadev.ck.page/

Today we are building a simple "Password Strength Indicator" in React.

So, let's dive in to build our second front-end feature.

What are we building?

Live Preview: https://stackblitz.com/edit/vitejs-vite-usrrut?file=src%2FApp.jsx

Let the coding begin.

If you have built anything in React previously, this one will be fairly simple for you.

I would suggest you go ahead and try to build this feature on your own first, then come back and check my solution.

First thing first, let's show an input element and a strength indicator text on the screen.

<input type="password" placeholder="Enter your password" />
<small>Password strength:</small>

Cool, now let's make it a controlled component by adding a state for the input value. Along with that, we will add a state to store the strength of the password.

const [password, setPassword] = useState("");
const [strength, setStrength] = useState("");

return (
  <input
    type="password"
    placeholder="Enter your password"
    value={password}
    onChange={(event) => setPassword(event.target.value)}
  />

  <small>Password strength: {strength}</small>
)

Now this is a controlled component with input being handled by a local state. We also added strength value in the strength indicator text.

But wait, How are we gonna calculate the strength of the password entered by the user?

First, let's decide what we consider as a strong password. A password is strong if it has the following features.

Minimum 8 characters.
Contains lowercase letters.
Contains uppercase letters.
Contains number.
Contains special characters.

So, let's write a function that will evaluate the strength of a given password based on the above points.

function evaluatePasswordStrength(password) {
  let score = 0;

  if (!password) return '';

  // Check password length
  if (password.length > 8) score += 1;
  // Contains lowercase
  if (/[a-z]/.test(password)) score += 1;
  // Contains uppercase
  if (/[A-Z]/.test(password)) score += 1;
  // Contains numbers
  if (/\d/.test(password)) score += 1;
  // Contains special characters
  if (/[^A-Za-z0-9]/.test(password)) score += 1;
}

The above function adds 1 to the score for each password feature available. The more the score stronger the password. To check for features like lowercase, uppercase, number, and special characters we are using regex.

Regex is a tool to identify patterns in a string. If you are not familiar with it just google and read the basics of it. It is not that tough. And most of the time your desired regex pattern is just a search away.

Score: 0-2 (Weak password)
Score: 3 (Medium password)
Score: 4-5 (Strong password)

Next, we determine and set the strength state based on the above points.

function evaluatePasswordStrength(password) {
  ....

  switch (score) {
    case 0:
    case 1:
    case 2:
    return "Weak";
  case 3:
    return "Medium";
  case 4:
  case 5:
    return "Strong";
  }
}

In the onChange callback where we set the password value, we will also set the strength state to the value that is returned from evaluatePasswordStrength function.

  <input
    ....
    onChange={(event) => {
      setPassword(event.target.value);
      setStrength(evaluatePasswordStrength(event.target.value));
    }}
  />

And, that is it. Our password strength indicator is ready.

There is a small addition we can make, but we won't do it here. I give it to you as a challenge to solve. You can check the solution in the final preview link.

Challenge

Add a feature to the strength indicator text so that it changes its color based on the strength.

Weak passwords shows in red color.
Medium password shows in orange color.
Strong password shows in green color.

Alright!

That was neat. I will bring more complex features to our future issues.

Reply/comment to this email/post, if you have any suggestions on which feature should I build in future issues.

If you enjoyed this issue, you will love other issues of building complex frontend features every week

Check Here: https://diaryofadev.ck.page/

Thank You!

Webpack, The clear and concise explanation.

Swastik Yadav — Fri, 26 Jan 2024 11:37:43 +0000

If you have been working with JS for a while, you must have came across webpack. Might have used it as well, but didn't actually know what it does.

At least for me it didn't made sense when I first tried it. I just copied & pasted config files from internet and somehow made it to work.

Infact that is the reason for tools like "create-react-app" to exist. Because it was too complex for beginners to setup a React app from scratch with webpack.

So, let's understand what's the deal with webpack.

We are going to build a small Product-Listing app and understand webpack in the proccess.

Initiating Product-Listing App.

Let's start by setting up our project folders.

mkdir productList
cd ./productList
mkdir public src

We will work with "src" and "pulic" folders later. For now we will initiate vanilla JS project.

npm init

The above command will ask few questions, just accept all default configs. Now we have a package.json file in our project.

Installing Dependencies

Run the following command in project directory. We will talk about each dependency later.

npm install faker html-webpack-plugin webpack webpack-cli webpack-dev-server

Adding entry HTML and JS files.

cd ./public
touch index.html
// This simply creates index.html file in public folder.

Inside the public/index.html all we need to do is add a root element.

<html>
  <body>
    <div id="root"></div>
  </body>
</html>

Now we add "index.js" inside src folder.

cd ./src
touch index.js
// This simply creates index.js file inside src.

Inside src/index.js import "faker" and console a fake productName. Faker just provides some fake data to work with. Nothing fancy here.

import faker from "faker";

const productName = faker.commerce.productName();

console.log(productName, "pn++");

Okay, now if we try to execute this file in terminal. We will get an error.
You can add this js file as script in index.html but that's not what we want. Neither that will be able to import faker from node_modules.

By the way we can execute the above file with "CJS require". But instead let's just make the "ESM import" work with webpack.

Webpack Configuration

Create a new file webpack.config.js in the root of project directory.

touch webpack.config.js

Now let's configure webpack and understand the installed packages.

// Require HtmlWebpackPlugin
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // mode will change to "production" in `webpack.prod.js`
    mode: "development",
    // port where our main.js will become available.
    devServer: {
        port: 8081,
    },
    plugins: [
        new HtmlWebpackPlugin({
            // Whatever file names coming out from webpack will be used as the entry point.
            // And will be added as script to the template (public/index.html).
            template: "./public/index.html",
        })
    ],
}

webpack-dev-server

WebpackDevServer takes main.js (output by webpack) and makes it available to the browser.

html-webpack-plugin

HtmlWebpackPlugin takes whatever file name webpack generates (main.js) and adds it as script in /public/index.html.

Change the start script in package.json.

//...rest of code...
"scripts": {
    "start": "webpack serve"
  }
//...rest of code...

Run the start script.

npm run start

Now the main.js is available on the browser. Open http://localhost:8081/main.js in browser. We can see the source code generated by webpack. If we search we will find our productList code and faker package as well in this file.

Hmm, nice. Now just open http://localhost:8081. This will serve index.html file with main.js added as script in html file.

Open console and see the productName appear there. Let's show productName on the screen. Make following changes in src/index.js.

import { faker } from "@faker-js/faker";

const rootElm = document.querySelector("#root");

function mount(elm) {
  let products = "";

  for(let i = 0; i < 3; i++) {
    const productName = faker.commerce.productName();
    products += `<div>${productName}</div>`;
  }

  elm.innerHTML = products;
}

mount(rootElm);

Checking http://localhost:8081 on browser should show product lists on the screen.

Alright, let's see some explanation around webpack.

Webpack Explanation

Normally we would have to load many different files on the browser. For ex, if our application uses multiple files and external libraries. We would have to load each file on the browser.

As a rule of thumb, we should not load many diff files on browser. And that's where webpack comes in.

Webpack combines/bundles all those files into single file which can be loaded on the browser.

main.js/bundle.js not only contains our src/index.js code but all other imported dependency code as well.

Webpack officially calls themselves a "module bundler". Not only scripts, but it helps you bundle styles and assets as well.

So, that is all for this post. Hopefully this was a good read for you.

Original Post: https://swastikyadav.com/webpack-the-clear-and-concise-explanation

Thank You!

5 JavaScript Project Ideas Beyond TODO Apps.

Swastik Yadav — Fri, 20 Oct 2023 08:18:22 +0000

Tired of building Todo apps?

✨ 5 JavaScript project ideas beyond TODO apps.

These projects will challenge you to get out of your comfort zone learn something new and implement it.

Let start!

1️⃣ Timeline Scrolling

Develop a web app that documents a series of historic events. Ideally, dates are separated evenly and make use of infinite scrolling.

For example, scrolling back to the 1980s is quick but scrolling back to the age of the dinosaurs is tedious.

2️⃣ Article Navigator

Provide a browser extension that outlines articles and shows a minimap of the page with scroll features.

The idea is to always have an accessible table of contents and quickly view the page structure without scrolling.

3️⃣ Digital Business Card

Develop a single-page app that is the equivalent of a business card.

Provide your contact information, social media links, and a short description of what you do.

Let the user decide to share it publically or only with selected people.

4️⃣ Pailgarism Checker

Display the similarities between two text inputs, or two files, and provide a score that states how similar they are.

Show the comparison in 2 files like how it is compared on GitHub.

5️⃣ Meme Platform

Use Giphy API to build your own searchable platform of memes.

If you found this post valuable, consider following on LinkedIn

Thank You!

From dropout to developer.

Swastik Yadav — Thu, 19 Oct 2023 04:13:53 +0000

2018
A college dropout, broke, in debt, completely clueless about life.

2023
A well-paid Software Engineer, helping others learn to code.

Here is what made it possible:

1/ Willingness To Learn

I was/am always willing to learn.

Don't see challenges as obstacles but an opportunity to learn new things.

Growth mindset, not fixed mindset.

2/ Building Social Presence

I had an active blog from the beginning, even when I was just learning.

Don't wait to learn everything before you show your skills to the world.

Have a blog from the start.

You won't believe how many opportunities I have received just because of my blog.

Building a social presence doesn't mean having 1000s of followers. You are just putting your work out in the world.

(My blog: https://swastikyadav.com)

3/ Law Of Average

The more you do something, more are the chances of you getting the desired result.

A friend of mine (whom I taught to code) literally gave 500+ interviews before he finally got selected.

Each failure takes you closer to success.

4/ Community

There were times when I felt like giving up but being in a community of dedicated learners helped me keep going.

Collaboration not Competition.

–––––––––––––––––––––––

Was it easy? Not at all.
If there is a secret that I learned through my experience then it is this:

Consistency + Intensity

–––––––––––––––––––––––

Thanks a lot for reading.

If you liked this

Follow me on X (Twitter) and LinkedIn

See you next time with more valuable life and developer lessons.

Swastik Yadav

9 reasons why you should learn to code in the age of no-code tools & gain an unfair advantage.

Swastik Yadav — Fri, 07 Oct 2022 08:04:22 +0000

Every month a new no-code tool pops-ups in the market, just like a new JavaScript library or framework.

3 Years ago when I was learning to code (I'm still learning).

I use to wonder if no-code tools will ever replace web-developers. And today I do have an answer.

And the answer is "Never".

No-code tools are great and all, quick to launch and market. Lately many people started to think that no-code means no more coding and developers are obsolete now.

But the truth is exact opposite.

Here are the 9 reasons to learn programming & gain unfair advantage even in the age of no-code tools.

Here is the video on this topic

1. Add-ons / Plugins

How do you create addons and plugins.

Programming knowledge is required to create addons and plugins which run these platforms. Be a creator of these addons not just a consumer.

2. Development Methodology

Code or no-code doesn't matter without the right development methodology.

You need the right development methodology to create something meaningful regardless of code or no-code. And the best way to learn development methodology is to learn to code.

Agile, Scrum, Lean, or Waterfall. Just name it.

3. Security and stability

Your business is at risk.

All your and your project data is integrated with a 3rd party tool. Higher the layer of integrations, higher the level of security risk.

What if they misuse it, what if the tool goes outdated or shuts down.

4. Developer Value

No-code tools make developers / programmers more valuable.

It may seem that no-code tool is here to replace developers, but the truth is that they increases the value of a developer. Because, Now you realize that no-code cann't create what a highly efficient team of developers can.

And, from this comes our next point.

5. Customization

No-code tools are limited in terms of building highly customizable and large-scale platform.

These tools are good to create landing pages, and basic web apps. But they have limitations beyond that point.

Migrations is really tough. What if later on you realize that a specific tool is not fulfilling your needs and you need to migrate. It is not easy to do so.

There again, only a highly skilled developer can rescue you.

6. Learning curve

No-code tools have their own learning curve.

You need to learn and invest enough time to use these solutions efficiently. Some of these tools may take you a week to properly learn and star using.

Well, you can learn and get started with ReactJs over a weekend.

7. No-code tools are machine, but you are not

No-code tools are just machines.

They cann't interact with a client and understand their pain points to build a tailored solution for them. But you can, and that's what makes you invaluable and irreplaceable as a human developer.

No machine can replace humanly interactions.

8. Learn to think

Learning to code teaches you how to think.

When you learn to code, your perpective toward the world changes. You start looking at everything with a more logical approach.

You become a problem solver.

9. No-code is not really no-code

No-code tools are not really no-code.

No-code tools are build on top of code. So, there is no such thing as no-code. It is just layer of UIs to hide the code implementation.

At last, all that matters is code.

At the end of the day, no-code tools are just tools. Tools will come and go, but HTML, CSS, and JS are here to stay.

So, learn them well.

And, that is the true source of developer's value.

That's it for this post, I hope you found this useful, and if so, please show your support by joining the weekly newsletter: 8020 Newsletter.

Master and learn JavaScript like never before: https://8020lessons.in

Understand call, apply, and bind functions in JavaScript like never before.

Swastik Yadav — Fri, 23 Sep 2022 10:18:37 +0000

In this post, we'll take a detailed look at how call, apply, and bind work in JavaScript.

JavaScript's call(), apply(), and bind() functions are often misunderstood. In this video, we'll clear up the confusion once and for all.

We'll discuss the differences between the three, and when you would want to use each one. We'll also provide examples to help you understand how they work.

By the end of this post, you'll have a deep understanding of how these functions work, and be able to use them in your own code.

So, let's get started.

Now, let's start for real.

Let's say we have an object with name and greet function.

const obj = {
  name: "Swastik",
  greet(age) {
    console.log(`Hello ${this.name}, age: ${age}`);
  }
}

obj.greet(23); // console -> Hello Swastik, age: 23

Calling the greeet function consoles "Hello Swastik". The **"this"** keyword refers to the context of greet() function.

In other words **"this"** keywords for greet() function refers to the object (obj) in which it was defined.

Now, let's say you need to change the context of greet() function, means you need to change where the "this" keyword refers in greet() function from obj to obj1.

Let's define obj1.

const obj1 = {
  name: "Yadav"
}

What we want to achieve is that when we call greet() function it should console "Hello Yadav" instead of "Hello Swastik".

This can be achieved with call(), apply(), and bind() method in JavaScript.

call()

"call" method changes the context of a given function to the context that we specify. So here we are changing the context of greet from obj to obj1.

obj.greet.call(obj1, 24); // console -> Hello Yadav, age: 24

First argument is the new context we want, and all comma separated arguments are for greet function.

apply()

"apply" method is exactly similar to "call method", the only difference being that call takes argument of greet as comma separated and apply takes them as an array.

obj.greet.apply(obj1, [24]); // console -> Hello Yadav, age: 24

bind()

"bind" is also exactly similar to call and apply, and here is the difference.

call and apply executes the fuction right away.
bind returns a new function binded with new "this" keyword, which can be called later.

const bindYadav = obj.greet.bind(obj1, 25);
bindYadav(); // console.log -> Hello Yadav, age: 25

That's it for this post, I hope you found this useful, and if so, please show your support by joining the weekly newsletter: Newsletter.