DEV Community: Priyanka-Chettri

Before I Built with AI, I Wanted to Understand What Was Underneath

Priyanka-Chettri — Sun, 09 Aug 2026 13:58:48 +0000

As I started learning Applied AI, I realized I didn't want to jump straight into LLM APIs, RAG, agents, and prompting without understanding what was underneath.

So I went back to the basics.

From Machine Learning to Deep Learning

Traditional machine learning often relied on humans to decide which features were important.

For example, for digit recognition, we might manually identify:

edges
curves
strokes
shapes

Neural networks changed this approach.

Instead of manually defining all the features, a neural network can learn useful representations from the data.

A simple network looks like:

Input → Hidden Layers → Output

Each neuron uses weights and biases, and during training the model adjusts these parameters to reduce its error.

The cost function tells us how wrong the prediction is.

Backpropagation helps determine how each parameter contributed to that error, and gradient descent updates the parameters in a direction that reduces the cost.

Why Deep Learning?

When we stack many layers, we get deep neural networks.

The interesting part is that different layers can learn increasingly complex representations:

Pixels → Edges → Shapes → Parts → Object

This ability to automatically learn representations from raw data became one of the major strengths of deep learning.

From Deep Learning to Generative AI

A neural network doesn't have to be supervised. It can be trained using supervised, unsupervised, self-supervised, or reinforcement learning.

Modern AI heavily relies on self-supervised learning.

For example:

"The capital of France is ___"

Target → Paris

The text itself provides the training target. This makes it possible to learn from enormous amounts of data without manually labeling everything.

Then came Transformers, which introduced the idea of attention—allowing models to learn relationships between different parts of a sequence efficiently.

Large Transformers trained on massive datasets became foundation models.

When these models are trained to work with language at enormous scale, we get Large Language Models (LLMs).

And when models can use what they've learned to generate new text, code, images, audio, or video, we call it Generative AI.

The Mental Model

This isn't a perfectly linear hierarchy, but this is the mental map that helped me:

Machine Learning
↓
Neural Networks
↓
Deep Learning
↓
Transformers
↓
Self-Supervised Learning
↓
Foundation Models
↓
LLMs
↓
Generative AI

The goal isn't to become an ML researcher before becoming an Applied AI Engineer.

For me, the goal is simpler:

Understand what problem each concept solved, so that when I build on top of AI models, I know what I'm actually building on.

That's the foundation I'm starting my Applied AI journey with.

The React Pattern That Changed How I Build Reusable Components

Priyanka-Chettri — Thu, 09 Oct 2025 10:33:07 +0000

While building components for a design system, I initially followed an existing pattern that was already in place- they all had a consistent pattern. I didn’t know what it was called, but I loved how scalable and flexible it felt.

Later, I realized… this approach had a name — the Compound Component Pattern

Let me explain with a simple example 👇

Imagine we have a Flyout Button that, when clicked, opens a menu with a list.

Now, in a typical setup, if we want the Flyout to appear over a specific component, we’d probably pass a prop like toggle from the parent and control it there.
That works — but what if we want to use this Flyout anywhere in the app, with any icon, and in multiple combinations?

That’s where the Compound Pattern comes into play.

🧩 How to Identify When to Use It

If there’s a shared state between two or more components, that shared state lives in the parent component
You want flexibility and reusability without passing props down multiple levels
You’d rather use React Context to manage state than prop drilling

Then you’re probably looking at a perfect use case for the Compound Design Pattern.

A component with compound pattern in action looks like this

<Flyout>
  <Flyout.Toggle>
    <Icon name="more" />
  </Flyout.Toggle>
  <Flyout.Menu>
    <Flyout.Item>Profile</Flyout.Item>
    <Flyout.Item>Settings</Flyout.Item>
    <Flyout.Item>Logout</Flyout.Item>
  </Flyout.Menu>
</Flyout>

Here, each sub-component (Toggle, Menu, Item) communicates through a shared context, not props.
This makes the component incredibly reusable, readable, and extensible — a win for design systems.

This pattern truly changed how I think about building components in React.
Once you start using the Compound Pattern, you realize it’s not just about cleaner code — it’s about creating a language for your UI.

𝐖𝐡𝐚𝐭 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐢𝐦𝐩𝐥𝐞 𝐓𝐨-𝐃𝐨 𝐥𝐢𝐬𝐭 𝐢𝐧 𝐑𝐞𝐚𝐜𝐭 𝐜𝐚𝐧 𝐭𝐞𝐚𝐜𝐡 𝐲𝐨𝐮 𝐚𝐬 𝐚 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫🎯

Priyanka-Chettri — Sun, 29 Sep 2024 10:03:50 +0000

Creating a to-do in React appears simple. However, as you introduce add on features, it opens a whole new door to explore and understand concepts. Here's how this project can enhance your understanding.

✅ 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭 𝐒𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐞: Break tasks into manageable chunks with reusable components.
✅ 𝐏𝐫𝐨𝐩𝐬 & 𝐃𝐚𝐭𝐚 𝐅𝐥𝐨𝐰: Pass data seamlessly between parent and child components.
✅ 𝐂𝐨𝐧𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥 𝐑𝐞𝐧𝐝𝐞𝐫𝐢𝐧𝐠: Show or render components based on a condition ( example of to do: If the edit mode is on then place an input field).
✅ 𝐄𝐯𝐞𝐧𝐭 𝐇𝐚𝐧𝐝𝐥𝐢𝐧𝐠 : Understand how to handle clicks, typing, and more. On delete button click how can you delete the to-do?
✅ 𝐑𝐞𝐚𝐜𝐭 𝐡𝐨𝐨𝐤𝐬: Understand when to use useState and useEffect.

Once you've built a basic to-do application, it's time to level up by adding features that make your app more robust and user-friendly.

✅ 𝐈𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭 𝐋𝐨𝐜𝐚𝐥 𝐒𝐭𝐨𝐫𝐚𝐠𝐞: With every change in the to-dos store the input into a local storage. Use useEffect to update the local storage.
✅ 𝐈𝐦𝐩𝐫𝐨𝐯𝐞 𝐒𝐭𝐚𝐭𝐞 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭 𝐰𝐢𝐭𝐡 𝐂𝐨𝐧𝐭𝐞𝐱𝐭 𝐀𝐏𝐈: To avoid prop drilling if any and manage state more effectively, implement the React Context API. Understanding Context API solidifies your base.
✅ 𝐎𝐩𝐭𝐢𝐦𝐢𝐬𝐞 𝐰𝐢𝐭𝐡 𝐑𝐞𝐚𝐜𝐭 𝐒𝐭𝐚𝐭𝐞 𝐌𝐚𝐧𝐚𝐠𝐞𝐦𝐞𝐧𝐭 𝐋𝐢𝐛𝐫𝐚𝐫𝐢𝐞𝐬: As your application grows, you might notice unnecessary re-renders, especially when working with multiple components and features. Libraries like Recoil, Redux, or Zustand can help manage state efficiently and prevent re-renders.

By adding these features, you're not only enhancing functionality but also learning critical concepts like local storage, context-based state management, and optimising rendering behaviour, which are essential for building scalable React applications.

Accent Colors for Checkboxes and Radios

Priyanka-Chettri — Wed, 05 Jun 2024 12:17:05 +0000

Utilize accent-* utilities to modify the accent color of elements, ideal for customizing the appearance of checkboxes and radio buttons by replacing the browser's default color.

Here, I have given accent color accent-pink-500, you can customize the color according to your need.This comes handy if you want to customize the look of your check boxes and radio buttons according to your theme.

The code for it is given below:

<div class="mx-auto my-auto border h-[100px] w-[300px] rounded-md flex justify-center items-center gap-4 shadow-lg">
<label class="font-semibold font-serif">Accent Color</label>
<input type="checkbox" class="accent-pink-500 " id="checkbox" >
</div>

Thanks for reading!

Unveiling the Magic of hover, focus and active variants in Tailwind CSS.

Priyanka-Chettri — Tue, 28 May 2024 07:43:15 +0000

💡𝐏𝐫𝐨 𝐓𝐢𝐩: Make your UI elements pop with Tailwind CSS! Use 𝐡𝐨𝐯𝐞𝐫, 𝐟𝐨𝐜𝐮𝐬, and 𝐚𝐜𝐭𝐢𝐯𝐞 variants to enhance user experience and engagement. Your designs will thank you!

Dive into this demo to see them in action!
Ready to give it a try? Check out the code below and start
experimenting! 👇

➡️ Snippet of "hover" variant applied to a button.

➡️ Snippet of a "focus" variant applied to a button

➡️ Snippet of an "active" variant applied to a button

Overcoming Tight Coupling In OOPs With Effective Solutions

Priyanka-Chettri — Mon, 08 Apr 2024 20:14:28 +0000

Familiar with "tight coupling" in OOPs? It's a common issue where classes become overly interdependent, making code changes cumbersome and error-prone. Imagine updating one class and having to revise multiple others due to tight dependencies.

This is how a tightly coupled code looks like:

Here, the direct instantiation of Engine class within the constructor of Car class creates a strong dependency between the two classes.

The problem encountered in the above code can be solved using Dependency injection in Spring and by promoting the use of Interfaces.

METHOD 1: Dependency injection using constructor injection

Problem ❌: Tight coupling occurs when one class directly instantiates another class, using the “new” keyword

Solution 💡: Use Dependency injection to pass dependency from external sources, highly used in Spring . In the below figure the engine object is being passed as the parameter to the constructor from an external source.

METHOD 2: Using interfaces

Problem ❌: Classes depending on concrete implements rather than interfaces, causes tightly coupled relationship between them. To say, if the type of engine to be used by a car is changed the whole code has to be re written again.

Solution 💡: Use interfaces instead of using concrete classes, this gives more flexibility to a code.

Follow Me for such contents!
Happy Learning :)