DEV Community: Samit Kapoor

Prompt Engineering 101: Master the Art of Asking AI the Right Way

Samit Kapoor — Sat, 05 Jul 2025 17:00:33 +0000

Lately, I've been diving into building AI-powered web applications to boost my own productivity. One thing has become crystal clear: the barrier to entry for building anything has dropped dramatically. In this AI age, anyone can create, learning new skills is faster than ever, and information is at our fingertips.

However, as we move forward, quality will be the ultimate differentiator. Half-baked products won't cut it. To truly stand out and retain users, quality is paramount. So, how can you level up your prompt engineering skills to consistently get high-quality responses from AI? Let's explore some key techniques to help you hit that sweet spot.

Use AI to Write Prompts (Yes, Really!)

Okay, this might sound a little meta, but hear me out: use AI to help you write better prompts. It might seem obvious, or maybe even a bit unnecessary, but it can seriously level up your results.

The clearer your prompts are, the better the AI will understand what you're asking for. Unless you're a professional writer (and let's be honest, most of us aren't!), using AI to refine or even completely rewrite your prompts can make a huge difference. Think of it as having an AI assistant dedicated to making your requests crystal clear.

For example:

Let's say you're trying to figure out how to add a progressive blur effect. You might start with a prompt like this:

how to add progressive blur

The problem with this prompt is that it's missing crucial context. Are you trying to add this effect in Figma? Framer? Or are you trying to implement it in a React project? What language are you using?

If you feed this vague prompt to an AI and ask it to improve it, you might get something like this:

I want to implement a progressive blur effect on images in my React project. Provide code examples and explanations for how to achieve this using CSS and JavaScript. Assume I am using a functional component approach and have basic knowledge of React hooks.

See how much more specific the refined prompt is? By providing details about the framework (React), the technologies (CSS and JavaScript), and your existing knowledge, you're much more likely to get a helpful and relevant response.

Zero Shot, One Shot & Few Shot Approach

When it comes to prompt engineering, you'll often hear the terms "zero-shot," "one-shot," and "few-shot." What's the deal with all these "shots"?

Zero-Shot: This is when you ask the AI a question or give it a task without providing any examples. The AI's gotta rely on its own brainpower here.
One-Shot: This is the middle ground where you give the AI one example to learn from. Think of it as a quick study guide.
Few-Shot: This is when you do provide the AI with a few examples of the type of output you're looking for. This helps the AI understand the vibe you're going for.

It's often the case that you'll get better results with a few-shot approach, especially when you're trying to get the AI to generate content in a specific format.

Example:

Let's say you want the AI to write a social media post. With a zero-shot prompt, you might simply ask:

Write a tweet about the benefits of prompt engineering.

The AI will likely generate something, but it might not be very engaging or tailored to your specific needs.

With a few-shot prompt, you could provide an example like this:

Here are a few example tweets about prompt engineering:
- Prompt engineering is the secret weapon for unlocking the full potential of AI! 🚀 #PromptEngineering #AI
- Want better AI results? It all starts with better prompts. Learn the art of prompt engineering! 💡 #AI #PromptHacking
- Stop wasting time on bad AI outputs! Master prompt engineering and get the results you deserve. 💪 #ArtificialIntelligence
Now, write another tweet about the benefits of prompt engineering, following the same style and format.

By providing these examples, you're giving the AI a clear understanding of the desired tone, length, and use of hashtags.

The Tradeoff:

By giving the AI examples, you're also kind of putting it in a box. It'll see your examples and try to copy that style, which can limit its creativity. It's like saying, "Hey, be creative, but only this creative." So, keep that in mind! If you want something truly original, zero-shot might be the way to go.

A/B Testing

Okay, this might seem obvious, but it's important. If you're not A/B testing your prompts, you're leaving a ton of potential on the table.

Since there's no official "Prompt Engineering for Dummies" guide, A/B testing is how you figure out what works and what doesn't. Basically, you give the AI multiple prompts for the same desired result and see which one performs better.

Example:

Let's say you're trying to get the AI to write a compelling product description for a new noise-canceling headphone. You could try these two prompts:

Prompt A: "Write a product description for noise-canceling headphones."
Prompt B: "Write a persuasive and benefit-driven product description for 'Sony' noise-canceling headphones, highlighting their superior noise cancellation, comfortable design, and long battery life. Target busy professionals who work from home."

Run both prompts and compare the results. Prompt B is much more specific and provides context about the target audience and key features. You'll likely get a much better product description from Prompt B.

Measuring Your Results: How to Know What's Winning

So, you've run your A/B tests, but how do you actually know which prompt is better? Here are a few things to consider:

Relevance: Does the output actually address the prompt? Does it stay on topic?
Quality: Is the writing clear, concise, and grammatically correct?
Engagement: Is the output engaging and interesting to read? Would it capture someone's attention?
Usefulness: Is the output actually useful for its intended purpose? (e.g., does the product description effectively sell the product?)
Subjectivity: Sometimes, it just comes down to your gut feeling. Which output do you personally like better?

Why This Matters (And Why We Don't Do It Enough):

We're so used to chatting with AI, giving it one prompt, then tweaking it with followup messages. But we almost never start a fresh chat with a completely different prompt. That's a mistake!

The best way I've found to really nail this is to use my own product (I built an AI tool). I keep using it, tweaking the prompts, and seeing what happens. It's a win-win because I'm not only improving my prompts, but I'm also making my product better at solving my own problems.

what fine tuning prompts does to a chat history 😅 — Samit Kapoor (@samitkapoorr)

Use XML tags

If you're not using them, then using XML tags in your prompts can be a game-changer maybe.

Think of XML tags as a way to give your prompts structure. And as we know, better structure = better understanding for the AI. And prompt engineering is all about hitting that sweet spot where the AI consistently gives amazing results.

How It Works:

XML tags allow you to clearly define different sections or elements within your prompt. This can help the AI understand the relationships between different pieces of information and generate more coherent and relevant responses.

Example:

Suppose you're building an AI wrapper that generates UI. You might start with a plain English description, but find it's not enough to enforce the desired behavior. Let's see how XML tags can level things up.

Version 0 (Plain English Description):

You are a helpful AI assistant that generates UI code. Be concise and use modern styling.

While this might give the AI a general idea, it's not very specific or enforceable.

Version 1 (Prompt with XML Tags):

<core_identity>
  You are a UI code generation assistant called "UI-Gen", designed to create clean, modern UI components based on user requests.
</core_identity>

<general_guidelines>
  - ALWAYS generate code that is compatible with React.
  - ALWAYS use Tailwind CSS for styling.
  - NEVER include comments in the generated code.
  - ALWAYS be concise and efficient.
</general_guidelines>

By using XML tags, you're giving the AI a much more structured and enforceable set of instructions. You're clearly defining its core identity and providing specific guidelines for its behavior. This can lead to more consistent, predictable, and high-quality results.

Read other AI app's prompts

If you're obsessed with an AI application and you love the outputs it gives, try reading the prompts that are powering their application.

Now, of course, prompts are their super power, so they keep them a secret. But there's this github repo that you can checkout for yourself, it provides AI prompts to big names in AI like v0, cursor, lovable, cluely, cursor, etc.

Link to GitHub repo

Now, these may not provide you direct information on what to do to improve your prompts, but you can pick up a few insights just by reading through them. Apart from this, there are tons of open source AI projects, you can read their prompts as well.

Your Prompt Engineering Journey Starts Now

So, there you have it: Prompt Engineering 101. We've covered a bunch of stuff, from using AI to write better prompts to A/B testing and even sneaking a peek at other AI apps' prompts.

The key takeaway here is that prompt engineering is a skill, and like any skill, it takes practice. You gotta experiment, try new things, and see what works for you.

Hi, I’m Samit, a software engineer and freelancer passionate about building real world projects. If you’re looking to collaborate or just want to say hi, check out my portfolio. Let’s connect

3 Simple Text Animations That You Can Build Using Framer Motion

Samit Kapoor — Sat, 28 Jun 2025 15:52:14 +0000

Let's face it: animations make websites more interesting. They're great for grabbing attention and guiding people around the page. Almost all the AI SaaS websites landing pages will have them.

The best part is that you don't have to be a wizard to implement them. In this article, I'm going to show you 3 simple text animations that you can build using framer motion.

1. Rainbow Text

Think of it like this: instead of a single, solid color, your text has a gradient. And this gradient isn't static, it's constantly changing! The color at the end of the current gradient seamlessly flows into the beginning of the next, creating a continuous, mesmerizing rainbow effect.

Let's build this step by step:

Set up your component: We'll start by creating a React component and adding some text. Instead of a fixed color, we'll give it an initial gradient.

import React, { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';

type RainbowTextProps = {
  className?: string;
  children?: ReactNode;
};

const RainbowText = ({ className = '', children }: RainbowTextProps) => {
  return (
    <motion.span
      initial={{
        backgroundImage: 'linear-gradient(90deg, #FF4D4D 0%, #FF944D 100%)'
      }}
      className={cn('text-transparent bg-clip-text', className)}
    >
      {children}
    </motion.span>
  );
};

export default RainbowText;

What's going on here?

We're importing motion from framer-motion. This is what allows us to animate the text.
We're using initial to set the starting gradient for the text.
text-transparent bg-clip-text are tailwindcss classes that make the text transparent and clip the background to the text (so the gradient shows through).

Important Note: If you have trouble understanding the above code, I'd recommend pausing here and checking out the basics of the Framer Motion.

Create an array of gradients: We need to make the gradient colors change over time, creating that flowing rainbow effect. To do this, we'll introduce a colors prop and create an array of linear gradients. We make sure the color at the end of the current gradient seamlessly flows into the beginning of the next.

...
const RainbowText = ({
  className = '',
  children,
  colors = [
    '#FF4D4D',
    '#FF944D',
    '#FFC14D',
    '#E8FF4D',
    '#6DFF4D',
    '#4DFFA1',
    '#4DFFFF',
    '#4DAAFF',
  ],
  duration = 2
}: RainbowTextProps) => {
  const linearGradients = [];
  for (let i = 0; i < colors.length - 1; i++) {
    linearGradients.push(`linear-gradient(90deg, ${colors[i]} 0%, ${colors[i + 1]} 100%)`);
  }
...

Bring it all together: Now just pass on this linearGradients array to backgroundImage style in animate prop of the span to complete the animation.

Full implementation:

import React, { ReactNode } from 'react';
import { cn } from '@/lib/utils';
import { motion } from 'framer-motion';

type RainbowTextProps = {
  className?: string;
  children?: ReactNode;
  colors?: string[];
  duration?: number;
};

const RainbowText = ({
  className = '',
  children,
  colors = [
    '#FF4D4D',
    '#FF944D',
    '#FFC14D',
    '#E8FF4D',
    '#6DFF4D',
    '#4DFFA1',
    '#4DFFFF',
    '#4DAAFF',
    '#4D6DFF',
    '#6D4DFF',
    '#A14DFF',
    '#D14DFF',
    '#FF4DAA',
    '#FF4D6D',
    '#FF4D4D',
    '#FF944D'
  ],
  duration = 2
}: RainbowTextProps) => {
  const linearGradients = [];
  for (let i = 0; i < colors.length - 1; i++) {
    linearGradients.push(`linear-gradient(90deg, ${colors[i]} 0%, ${colors[i + 1]} 100%)`);
  }
  return (
    <motion.span
      initial={{ backgroundImage: linearGradients[0] }}
      animate={{ backgroundImage: linearGradients }}
      transition={{
        duration: duration,
        ease: 'linear',
        repeat: Infinity
      }}
      className={cn('text-transparent bg-clip-text', className)}
    >
      {children}
    </motion.span>
  );
};

export default RainbowText;

and Voila! there's your first text animation.

Wavy Text

Think of it like this: Every character in the text is animating on its own, and each character bounces up and down but they don't all start at the same time, there's a delay to when they start bouncing which creates a wave.

Let's build this step by step:

Setup your component: Start by initializing the component, defining the necessary props, and rendering the text.

type WavyTextProps = {
  text: string;
  className?: string;
};

const WavyText = ({ text, className = '' }: WavyTextProps) => {
  return <div className={`flex flex-wrap overflow-visible p-4 ${className}`}>{text}</div>;
};

Make each character an individual element: Since I told you each character is animating on its own, we have to break the text and render each character separately like so

<div className={`flex flex-wrap overflow-visible p-4 ${className}`}>
      {text.split('').map((char, index) => {
        return <motion.span key={index}>{char === ' ' ? '\u00A0' : char}</motion.span>;
      })}
</div>

Add bouncing properties to each character and bring it all together

Full implementation:

import { motion } from 'framer-motion';

type WavyTextProps = {
  text: string;
  className?: string;
};

const WavyText = ({ text, className = '' }: WavyTextProps) => {
  return (
    <div className={`flex flex-wrap overflow-visible p-4 ${className}`}>
      {text.split('').map((char, index) => {
        return (
          <motion.span
            key={index}
            initial={{ y: -15 }}
            animate={{ y: [0, -15] }}
            transition={{
              type: 'spring',
              stiffness: 100,
              damping: 20,
              delay: index * 0.1,
              repeat: Infinity,
              repeatType: 'reverse'
            }}
          >
            {char === ' ' ? '\u00A0' : char}
          </motion.span>
        );
      })}
    </div>
  );
};

export default WavyText;

What's going on here:

We set the initial ‎y value to -15, so each character starts 15 pixels above its resting position.
The ‎animate prop moves each character between 0 and -15 pixels, creating the bouncing motion.
The spring transition adds realistic physics, making each bounce feel natural.
The delay, multiplied by the character’s index, staggers the animation and creates the wave effect.

Blur Text

Think of it like this: Each character starts out slightly blurred and shifted downward from its final position. As the animation plays, each character sharpens into focus and smoothly rises to its resting place.

Let's build this step by step:

So, the first two steps are actually the same as the Wavy Text, let's build from there:

import { motion } from 'framer-motion';

type BlurTextProps = {
  text: string;
  className?: string;
};

const BlurText = ({ text, className }: BlurTextProps) => {
  return (
    <div className={`flex flex-wrap overflow-visible ${className}`}>
      {text.split('').map((char, index) => (
        <motion.span key={index} className="inline-block">
          {char === ' ' ? '\u00A0' : char}
        </motion.span>
      ))}
    </div>
  );
};

export default BlurText;

Now, let’s add the animation: each character will start blurred and slightly lower than its final position, then animate into focus and rise up to its resting place. We’ll also stagger the animation for each character to create a smooth, sequential effect.

Full implementation:

import { motion } from 'framer-motion';

type BlurTextProps = {
  text: string;
  className?: string;
};

const BlurText = ({ text, className = '' }: BlurTextProps) => {
  return (
    <div className={`flex flex-wrap overflow-visible ${className}`}>
      {text.split('').map((char, index) => (
        <motion.span
          key={index}
          initial={{ y: 10, filter: 'blur(10px)' }}
          whileInView={{ y: 0, filter: 'blur(0px)' }}
          transition={{
            duration: 0.2,
            delay: index * 0.1,
            ease: 'backOut'
          }}
          className="inline-block"
        >
          {char === ' ' ? '\u00A0' : char}
        </motion.span>
      ))}
    </div>
  );
};

export default BlurText;

What's going on here:

Each character starts with a ‎y value of 10 (10 pixels below its final position) and a heavy blur applied.
The ‎whileInView prop animates each character upward to its resting position and removes the blur, making the text crisp and clear.
The transition uses a small duration and a staggered delay based on the character’s index, so each letter animates one after another, creating a smooth reveal effect.

Why do we use the `whileInView` prop here, but the `animate` prop in Wavy Text?

The animate prop triggers the animation immediately when the component renders, regardless of whether the text is visible on the screen. In contrast, the whileInView prop starts the animation only when the text actually comes into the user's viewport. For the blur text effect, using animate could cause the animation to play off-screen, so users might miss it entirely. By using whileInView, we ensure the animation runs at the right moment when the user can actually see it.

If you enjoyed these animations and want to discover even more, check out my open source animated library, stackbits.dev, for a collection of ready-to-use animation components!

Hi, I’m Samit, a software engineer and freelancer passionate about building real world projects. If you’re looking to collaborate or just want to say hi, check out my portfolio. Let’s connect!

How Bloom Filters Help Tech Giants Manage Massive Caches

Samit Kapoor — Sat, 21 Jun 2025 10:59:37 +0000

Ever wondered how tech giants like Facebook, Google, and Akamai, manage their massive caches?

With millions of users and countless searches, how do they figure out what to store in their cache and what not to store in their cache?

How do they quickly find out if an item is a frequently searched item or not?

This is where bloom filters come into play.

What are Bloom filters?

According to the definition, "A Bloom filter is a space-efficient probabilistic data structure used to test set membership."

In layman's terms, a Bloom filter is a clever data structure that allows you to check if an item is present or not present in a set.

Bloom Filters use several independent hash functions and an array of fixed size containing only 0s and 1s

[0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0]

How does it work?

Let's take an example to understand how it works.

For this example, let's assume that there are 3 hash functions and the length of the bit array is 10.

Suppose a user comes on Facebook and searches for a word, let's say "Party".
Now Facebook first needs to figure out if search results for the word "Party" are in their cache or not. So Facebook consults its Bloom filter.
The word "Party" is passed through all the independent hash functions resulting in indices in the bit array.

h1("Party") = 2
h2("Party") = 5
h3("Party") = 1

Next we examine the bits at these positions in the array. Suppose our bit array currently looks like this:

array: [0, 1, 1, 0, 1, 0, 1, 0, 0, 0]
index:  0, 1, 2, 3, 4, 5, 6, 7, 8, 9

The bits at 2, 5, 1 are 1, 0, 1 respectively.

Since not all the bits are set (bit at index 5 is 0), we can be certain the "Party" is not present in cache.
If all the bits were set to 1, it would indicate that "Party" might be present in the cache.

Bloom filters doesn't guarantee that the item will be present in the data set, but it guarantees that the item will not be present in the data set.

The example above demonstrates how to check if an item is present in the cache, but how can we determine whether a searched item is frequently requested?

How Do Bloom Filters Help Manage and Update the Cache?

Let’s build on our earlier example:

Suppose the word "Party" was not found in the cache because the bit at index 5 was unset. When we set this bit, the next search for "Party" will indicate a possible presence in the cache, allowing for a quick lookup.

However, when millions of users are making thousands of requests per second, this approach runs into a problem. If we set bits for every search, the Bloom filter’s bit array will quickly fill up with 1s, reducing its effectiveness and causing frequent false positives.

To address this, systems often use multiple Bloom filters (or layers of bit arrays). Here’s how it works:

Bloom filter 1: [0, 1, 1, 0, 1, 0, 1, 0, 0, 0]
Bloom filter 2: [0, 1, 0, 1, 1, 0, 1, 1, 0, 0]
.
.
.
Bloom filter n: [1, 0, 0, 0, 1, 0, 1, 1, 0, 1]

Each time "Party" is searched, we update a different layer or bit array.
For example, "Party" might appear present in the first Bloom filter, but absent in the second. This indicates it has been searched before, but not often enough to be considered “frequently searched.”
Only when "Party" is found to be present in all layers do we treat it as a frequently accessed item and consider storing or updating it in the cache.

This layered approach helps distinguish between items that are searched occasionally and those that are truly popular, ensuring that the cache is used efficiently and only for items with sustained demand.

False Positives

A false positive occurs when the Bloom filter suggests that an item might be present in the cache, but in reality, it isn’t. As discussed earlier, Bloom filters doesn't guarantee that the item will be present in the data set, but it guarantees that the item will not be present in the data set.

This happens because multiple different items can set the same bits in the bit array. So, when you query for an item and all its corresponding bits are set to 1, it’s possible those bits were set by other items, not the one you’re searching for.

Why is this acceptable?

This tradeoff is fundamental to Bloom filters. In many system design scenarios, it’s acceptable to occasionally perform an unnecessary cache lookup (due to a false positive), as this is far less costly than searching the entire database for every request. The Bloom filter helps minimize expensive database operations, even if it sometimes leads to extra cache lookups.

Final thoughts

Bloom filters might seem simple, but their ability to deliver fast, space efficient, and probabilistic checks makes them incredibly powerful for large scale systems. From reducing unnecessary database lookups to optimizing cache usage, they quietly power some of the biggest tech infrastructures behind the scenes.

Hi, I’m Samit, a software developer and freelancer passionate about building real world projects. If you’re looking to collaborate or just want to say hi, check out my portfolio. Let’s connect!

Understanding Query Cost in SQL

Samit Kapoor — Sat, 14 Jun 2025 11:23:15 +0000

Recently, I've been delving into system design, aiming to uncover what happens beneath the surface—how systems operate, where bottlenecks occur, and how we can optimize for speed, reliability, and security.

Every SQL query comes with a performance cost. Some operations are lightweight, while others can significantly slow down your application. Because each database query can directly affect your server's responsiveness, it's crucial to understand what makes certain queries more expensive than others.

In this article, we'll break down the factors that contribute to SQL query costs and explore how you can make smarter choices to keep your systems fast and efficient.

What determines a Query cost?

When you run a SQL query, several factors work together to determine how “expensive” that operation is for your database. Query cost refers to the resources like CPU, memory, disk I/O, and network bandwidth—things that your database engine must use to execute a given command. Understanding these factors can help you write more efficient queries and design better systems.

1. Data Volume: The more data a query has to scan or process, the higher the cost. For example, searching through millions of rows without an index will take much longer than querying a small, well-indexed table.

2. Index Usage: Indexes can dramatically speed up read operations by letting the database find data without scanning every row. However, maintaining indexes also adds overhead to write operations like INSERT, UPDATE, and DELETE.

3. Query Complexity: Complex queries with multiple JOINs, subqueries, aggregations, or sorting operations require more processing power and memory. The more logic the database has to execute, the higher the cost.

4. Locking and Concurrency: When multiple queries try to access or modify the same data simultaneously, the database may need to lock certain rows or tables. This can increase latency and resource usage, especially for write-heavy workloads.

5. Hardware and Configuration: The underlying hardware (CPU, RAM, disk speed) and database configuration (buffer sizes, cache settings) also play a role in how efficiently queries are executed.

6. Network Overhead: If your database and application servers are on different machines, network latency and bandwidth can add to the overall query cost when transferring large result sets.

In short, query cost is a combination of how much data is touched, how the data is accessed, and how complex the query logic is, all influenced by the environment in which the database runs.

Let's look at SQL Commands

`SELECT` Command

The SELECT command allows you to retrieve data from one or more tables in your database.

What happens under the hood?

When you execute a SELECT query, the database engine parses your request and determines the most efficient way to fetch the data. If your query is well-optimized and uses indexes, the engine can quickly locate the relevant rows. Otherwise, it may need to perform a full table scan, reading every row to find matches—a much more resource-intensive process. The query planner also decides the order of operations, how joins are executed, and whether to use temporary storage for sorting or aggregations.

Expensive patterns:

Full table scans: Occur when there’s no usable index for the WHERE clause, forcing the database to read every row.
Complex joins: Joining large tables without proper indexing can lead to massive intermediate result sets and slow performance.
Subqueries and nested SELECTs: These can multiply the amount of data processed, especially if not correlated efficiently.
ORDER BY and GROUP BY on large datasets: Sorting and grouping require additional memory and processing, which can become costly at scale.

Examples:

Suppose you want to find all users with a specific email domain:

SELECT * FROM users WHERE email LIKE '%@example.com';

If there’s no index on the email column, the database must scan every user row to check the condition, making this query expensive for large tables.

Adding an index on the email column can significantly reduce the cost, allowing the database to quickly locate matching rows.

Now suppose you want to list all orders along with customer names for customers from a specific city:

SELECT orders.id, customers.name, orders.total
FROM orders
JOIN customers ON orders.customer_id = customers.id
WHERE customers.city = 'New York';

If there are no indexes on customers.city or orders.customer_id, the database must scan both tables and compare every possible pair to find matches. This results in a costly operation, especially as the tables grow larger. Additionally, if orders and customers are both large, the intermediate result set can consume significant memory and processing time.

Adding an index on customers.city allows the database to quickly filter relevant customers. Similarly, indexing orders.customer_id speeds up the join operation. With proper indexes, the database can efficiently match only the necessary rows, dramatically reducing the query cost.

`INSERT` Command

The INSERT statement is used to add new rows of data into a table.

What happens under the hood?

When you execute an INSERT, the database engine first checks if the data types and constraints (like NOT NULL, UNIQUE, or FOREIGN KEY) are satisfied. If the table has any indexes, the engine updates them to include the new data. For tables with triggers or default values, those are also processed during the operation. Each insert is logged for durability and potential rollback, which can add overhead, especially in systems with heavy write activity.

Expensive patterns:

Bulk inserts without batching: Inserting a massive number of rows in a single transaction can overwhelm memory and transaction logs, causing slowdowns or even failures.
Tables with many indexes: Every index must be updated when new data is inserted, which increases the time and resources required for the operation.
Constraint checks: Validating foreign keys or unique constraints for each row can become costly, particularly in large or highly related tables.

Examples

Adding a single new user to the users table:

INSERT INTO users (name, email, city) 
VALUES ('Alice', 'alice@example.com', 'New York');

This operation is straightforward and typically fast, especially if the table has only a few indexes and constraints.

Now suppose you want to add multiple orders for a customer, and each order must reference an existing customer in the customers table (enforced by a foreign key constraint):

INSERT INTO orders (customer_id, order_date, total)
VALUES 
  (101, '2025-06-14', 150.00),
  (101, '2025-06-15', 200.00),
  (101, '2025-06-16', 175.00);

Here, the database must check that customer_id 101 exists in the customers table for each row and update any relevant indexes. If the orders table has several indexes or triggers, or if you’re inserting thousands of rows at once, the operation can become much more resource-intensive and slower.

Using transactions and batching can help manage the cost of such complex inserts.

Batching Example:

async function batchInsertOrders(db, orders, batchSize = 1000) {
  for (let i = 0; i < orders.length; i += batchSize) {
    const batch = orders.slice(i, i + batchSize);
    const values = [];
    const params = [];

    batch.forEach((order, idx) => {
      // For each order, push the values and build the parameterized query
      values.push(`($${idx * 3 + 1}, $${idx * 3 + 2}, $${idx * 3 + 3})`);
      params.push(order[0], order[1], order[2]);
    });

    const query = `
      INSERT INTO orders (customer_id, order_date, total)
      VALUES ${values.join(', ')}
    `;

    await db.query('BEGIN');
    await db.query(query, params);
    await db.query('COMMIT');
  }
}

`UPDATE` Command

The UPDATE statement allows you to modify existing records in a table.

What happens under the hood?

When an UPDATE command runs, the database engine locates the rows that match your WHERE clause, locks them to prevent conflicting changes, checks for constraint violations, applies the new values, and updates any relevant indexes. Each change is logged for durability and possible rollback, which adds overhead, especially with large or complex updates.

Expensive patterns:

Updating large numbers of rows: Running an UPDATE without a selective WHERE clause can affect every row in the table, leading to significant I/O and locking overhead.
Updating indexed columns: When you modify a column that’s part of one or more indexes, the database must update those indexes for each changed row, increasing the operation’s cost.
Complex WHERE conditions: If your WHERE clause uses non-indexed columns or involves complex logic, the database may need to scan the entire table to identify matching rows.
Cascading updates and triggers: If your table uses foreign keys with cascading updates or has triggers that fire on update, each affected row can cause additional operations, further increasing cost.

Examples

Suppose you want to update the city for a single user based on their email address:

UPDATE users
SET city = 'San Francisco'
WHERE email = 'alice@example.com';

If there’s an index on the email column, the database can quickly find and update the relevant row. This is a lightweight operation with minimal impact on performance.

Now, imagine you need to update the status of all orders placed before a certain date and with a total greater than $500:

UPDATE orders
SET status = 'archived'
WHERE order_date < '2025-01-01'
  AND total > 500;

This query may affect many rows, especially in a large table. If the order_date or total columns aren’t indexed, the database must scan the entire table to find matches, making the operation much more expensive. Additionally, if the status column is indexed, the index must be updated for every changed row, adding further cost.

To make this update more efficient, you can add indexes on the columns used in the WHERE clause—order_date and total. This allows the database to quickly locate only the relevant rows instead of scanning the entire table. For very large tables, consider batching the updates to reduce locking and transaction log pressure.

Tips for optimizing Query Cost

Use Indexes Wisely: Add indexes to columns that are frequently used in WHERE clauses, JOIN conditions, and ORDER BY statements. However, avoid over-indexing, as each index adds overhead to INSERT, UPDATE, and DELETE operations.
Write Selective Queries: Always aim to filter data as much as possible in your queries. Use specific WHERE clauses to limit the number of rows processed.
Avoid SELECT *: Only retrieve the columns you need, rather than selecting all columns from a table. This reduces the amount of data transferred and processed.
Batch Write Operations: For large INSERT, UPDATE, or DELETE operations, process data in smaller batches to reduce locking, transaction log usage, and potential timeouts.
Keep Transactions Short: Long-running transactions can hold locks and block other operations. Commit your changes as soon as possible.
Optimize Joins: Use appropriate join types and make sure joined columns are indexed. Avoid joining large tables without filters or indexes.
Use Proper Data Types: Choose the most efficient data types for your columns to minimize storage and speed up processing.

Hi, I’m Samit, a software developer and freelancer passionate about building real world projects. If you’re looking to collaborate or just want to say hi, check out my portfolio. Let’s connect!

--legacy-peer-deps vs --force: Understanding npm's conflict resolvers

Samit Kapoor — Sat, 07 Jun 2025 13:42:56 +0000

If you've ever been stuck while installing a package in a Node.js project and found yourself using --legacy-peer-deps or --force without really knowing what they do then, you're not alone.

These flags often appear when there are conflicts in peerDependencies, but what exactly do they mean, and which one should you use?

Let’s break it down.

The Problem: Dependency Conflicts in npm

Dependency conflicts happen when different packages in your project require incompatible versions of the same dependency.

For example, one package might need react@17 while another expects react@18. Since there's no clean way to install multiple versions of the same package simultaneously, npm throws an error.

These conflicts usually indicate that your project's dependency tree is either fragile, outdated, or includes libraries that haven’t been updated to support newer versions of their peers.

To bypass these errors, npm provides two commonly used flags:

--legacy-peer-deps
--force

Let's understand them one by one.

`--legacy-peer-deps`

When you use --legacy-peer-deps, here's what it means:

Ignore the peer dependency conflicts.
Doesn't attempt to automatically install peer dependency.
Avoid breaking the dependency tree.

Use this when:

You're using older packages that haven't updated yet.
You want to avoid forcing incompatible versions together.

Example:

npm i some-package --legacy-peer-deps

`--force`

When you use --force, here's what it means:

Forcefully install the package even if the tree is already broken.
Potentially lead to unstable project.
Overrides dependency conflicts, peer mismatches, etc.

Use this when:

You're just testing out things quickly.
You know what you're doing and can resolve conflicts later if required.

Example:

npm i some-package --force

Which one should you choose?

Use --legacy-peer-deps when you're facing peer dependency issues with older libraries.
Avoid --force unless you're experimenting or absolutely sure of what you're doing.

Hi, I’m Samit, a software developer and freelancer passionate about building real world projects. If you’re looking to collaborate or just want to say hi, check out my portfolio. Let’s connect!

Understanding React's Declarative UI Through a Copy Button Example

Samit Kapoor — Sat, 31 May 2025 11:58:56 +0000

I was building a simple Copy button. The kind that copies some text to the clipboard and briefly shows a “Copied!” message for 1 second before reverting to its original label.

I already knew how to implement it the “React way” using useState to manage the button’s text. But out of curiosity, I decided to try a more direct approach using vanilla JavaScript’s DOM manipulation by changing innerText manually.

That small decision led me down an unexpected path and helped me better understand React’s declarative nature. Let’s explore what happened and why it’s an important lesson for anyone working with React.

The Imperative Attempt

Here's what I tried doing. Instead of relying on React state, I tried change the value of innerText inside the onClick handler.

<button
  onClick={async (e) => {
    navigator.clipboard.writeText(text);
    e.currentTarget.innerText = 'Copied!';
    await new Promise((resolve) => setTimeout(resolve, 1000));
    e.currentTarget.innerText = text;
  }}
>
  {text}
</button>

This seems like it should work. When the button is clicked:

The text gets copied to the clipboard.
I change the innerText value of the button to 'Copied!'.
After a second the innerText value of the button is changed back to what it was.

But in reality button's innerText value changed to 'Copied!' but it never changed back to text value.

Why it doesn't work?

It didn't work simply because React didn't know that I manipulated the DOM.

The issue lies in React's declarative rendering model. The UI is a reflection of component's state and props. When you write:

<button>{text}</button>

You're telling React "The content of this button should always be whatever the value of text is".

React uses virtual DOM to keep track of what UI should look like and compare it with the real DOM to figure out what needs to be changed.

So when I tried to change the value of innerText back to text after 1 second... it failed because React had already re-rendered that component in between due to stricter mode in development. By the time the timeout ran DOM node has already been replaced and that's why it gets stucked to 'Copied!' only.

Vanilla JS DOM manipulation in React is an anti pattern and this is why it isn't advised, they may get silently ignored or break when DOM is rebuilt.

Using `useState`

Instead of manually updating the DOM, we use useState to register updates.

import { useState } from 'react';

const CopyButton = ({ text }) => {
  const [displayText, setDisplayText] = useState(text);

  const handleClick = async () => {
    await navigator.clipboard.writeText(text);
    setDisplayText('Copied!');
    setTimeout(() => setDisplayText(text), 1000);
  };

  return <button onClick={handleClick}>{displayText}</button>;
}

export default CopyButton

The button's text is controlled by displayText, a React state variable. When the button is clicked:

We write to the clipboard.
We update the state to 'Copied!', triggering a React re-render.
After 1 second, we reset the state back to the original text, triggering another re-render.

React uses the Virtual DOM to efficiently update the UI with each state change.

Since React is in charge of rendering, the UI always stays in sync with the component’s logic, no surprises, no manual innerText issues, and no bugs due to stale DOM nodes.

Hi, I'm Samit. A Software Developer and a freelancer who’s always on the lookout for exciting, real world projects to build and contribute to. I love hearing from people, whether it’s to collaborate, share ideas, or work together.

If you're looking to hire a passionate developer or even if you just want to say hi, feel free to check out my portfolio and reach out. I'd love to connect!

Streaming Downloads from S3 in React and Node.js (The Right Way)

Samit Kapoor — Sat, 24 May 2025 10:20:52 +0000

Recently, I was asked to add a button on a frontend dashboard that would allow users to bulk download Excel reports for multiple users. Having never implemented this before, my initial approach was to download all the files from S3 on the backend, convert them to base64 strings, send them as an array to the frontend, and then convert those base64 strings back into files for download on the user's machine.

It seemed simple enough but is not at all scalable.

Think about it:

What if there are thousands of users whose reports need to be downloaded?
What if each report is large in size?
What if multiple users initiate the download at the same time?

This approach would quickly become a bottleneck, putting unnecessary load on the backend server, increasing memory usage, and ultimately hurting performance.

That’s when I discovered a better way, streaming file downloads directly from S3 to the frontend.

In this article, I’ll walk you through how to implement this properly using Node.js on the backend and React.js on the frontend, so users can download large files efficiently without choking your server.

How Does It Work?

This is the theory part, feel free to skip ahead to the implementation if you're already familiar with how streaming works.

Here’s a simplified overview of the process:

The user clicks a button on the frontend to initiate a bulk download.
A request is sent from the frontend to the backend API endpoint.
The backend connects to AWS S3 and requests the file(s), creating a ReadableStream from the S3 response.
This stream is piped directly to the HTTP response, which sends the file data in chunks to the frontend as it arrives.
On the frontend, the browser receives this data and converts it into a downloadable file, without needing to load the entire file into memory.

Why Is This Better?

Reduced Server Load: The backend doesn't store or buffer the entire file. It simply acts as a proxy, streaming the data directly from S3 to the client. This means far less memory and CPU usage on your server.
Handles Large Files Gracefully: Whether you're downloading a 1MB file or a 1GB report, the process is the same, data flows in chunks and doesn't overwhelm the server. The only limiting factor is the user's network speed and local storage.
Scales with Multiple Users: Since each user's system handles their own download, the backend doesn’t need to manage multiple large file buffers simultaneously. The load is distributed naturally across client machines.

Backend Implementation

On the backend, we create a ZIP archive of all the requested files from S3 and stream it directly in the response without storing anything temporarily on the server.

import archiver from 'archiver';
import { getAwsClient } from './aws.js'; // Add your own import

const downloadFiles = async (req, res) => {
  const { files } = req.body;
  const AWS = getAwsClient();
  const s3 = new AWS.S3();

  res.setHeader('Content-Type', 'application/zip');
  res.setHeader('Content-Disposition', 'attachment; filename=files.zip'); 

  const archive = archiver('zip', {
    zlib: { level: 9 }, // Best compression
  });

  archive.on('error', (err) => {
    console.error('Archive error:', err);
    res.status(500).send('Internal Server Error');
  });

  archive.pipe(res); // Connect zip stream to the HTTP response

  for (const file of files) {
    const { file: key } = file;

    const s3Stream = s3
      .getObject({
        Bucket: process.env.S3_BUCKET_NAME, // Make sure this is defined
        Key: key,
      })
      .createReadStream();

    archive.append(s3Stream, { name: fileName });
  }

  await archive.finalize(); // Triggers the streaming download
};

We use archiver to zip files on the fly.
Files are streamed from S3 directly, not buffered or saved temporarily.

Frontend Implementation

On the frontend, we send a request to the backend to start the bulk download. The backend streams the zipped file, which we receive as a Blob and trigger the browser to download it directly.

import request from './axios/request'; // Replace with your actual axios instance

export const downloadAllReports = async () => {
  try {
    // Send POST request to initiate bulk download
    const res = await request.post(
      '/bulk-download',
      { files: ['file1.pdf', 'file2.jpg'] }, // List your files here
      {
        responseType: 'blob', // Important: tells axios to handle response as Blob
      }
    );

    // Create a Blob from the response data
    const blob = new Blob([res.data], { type: 'application/zip' });

    // Create a temporary URL for the Blob object
    const url = URL.createObjectURL(blob);

    // Create a hidden anchor element and trigger the download
    const a = document.createElement('a');
    a.href = url;
    a.download = 'report.zip'; // Filename for the downloaded file
    document.body.appendChild(a);
    a.click();

    // Clean up by removing the anchor and revoking the object URL
    a.remove();
    URL.revokeObjectURL(url);
  } catch (err) {
    console.error('Download failed:', err);
  }
};

Conclusion

Streaming file downloads is a powerful technique to handle large or multiple files efficiently without overloading your backend server. By leveraging streams, you can:

Reduce server memory and CPU usage
Enable scalable downloads for many users simultaneously
Provide a smooth download experience even for large files

If you’re building any app that involves bulk file downloads or large reports, consider using streaming to keep your system fast and scalable.

If you're looking to hire a passionate developer or even if you just want to say hi, feel free to check out my portfolio and reach out. I'd love to connect!

How to Customize Tailwind CSS in Next.js 15 Without tailwind.config.js?

Samit Kapoor — Sun, 18 May 2025 09:31:27 +0000

Tailwind CSS v4 and Next.js 15 introduce a new way of customizing your design tokens and themes, without even touching a tailwind.config.js file. If you’re used to defining your custom colors, fonts, and spacing inside the config file, this new @theme inline approach might feel unfamiliar at first but it’s incredibly powerful.

In this post, I’ll walk you through How to customize your Tailwind setup using @theme inline

🧪 Why `tailwind.config.js` Is Optional in Next.js 15

Starting with Tailwind CSS v4, the team is moving toward a zero-config setup. When you're working in a modern framework like Next.js 15, Tailwind automatically configures itself via PostCSS and globals.css, meaning you don’t need a tailwind.config.js file unless you're doing something advanced like adding plugins.

With the new @theme directive, you can define custom design tokens inline in your CSS file (usually globals.css), which Tailwind will pick up and compile at build time.

✍️ How to Use `@theme inline` in Next.js 15

Here’s how you can define custom colors, fonts, and other variables in globals.css using @theme inline:

/* app/globals.css */

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: #66BB6A;
  --color-error: #d90000;
  --font-chillax: 'Chillax-Variable', sans-serif;
}

Then you can use these values in your utility classes just like built-in tokens:

<div className="bg-primary text-foreground font-chillax">
  Hello from your custom Tailwind setup!
</div>

Here are some of the available theme variables that you can use!

Namespace	Utility Classes
`--color-*`	Color utilities like `bg-red-500`, `text-sky-300`, and many more
`--font-*`	Font family utilities like `font-sans`
`--text-*`	Font size utilities like `text-xl`
`--breakpoint-*`	Responsive breakpoint variants like `sm:*`
`--spacing-*`	Spacing and sizing utilities like `px-4`, `max-h-16`, and many more
`--shadow-*`	Box shadow utilities like `shadow-md`

Check the full list here

🚀 Final Thoughts

Tailwind CSS v4 and Next.js 15 are simplifying frontend development by making configuration less painful and more in line with modern web standards. Using @theme inline, you can now:

Customize colors, fonts, spacing directly in CSS
Get full IntelliSense support in your editor
Avoid bloated config files for simple setups

If you're building your next project with Next.js 15, give this approach a try, you might not even miss your tailwind.config.js.

React or Next.js: What to use and When?

Samit Kapoor — Sat, 10 May 2025 09:12:22 +0000

As a developer who’s been working in React for years, I didn’t expect to fall so hard for Next.js. But once I made the switch, I found myself saying, “Let’s just Next.js everything.”

It started with a side project, I tried next.js and I was hooked. The monorepo-friendly architecture, file based routing, and built-in server-side capabilities really enhanced my developer experience. From that point on, every new project began with npx create-next-app

But while Next.js is powerful, it’s not always the right choice. Here are a few real life lessons I’ve learned from switching from React to Next.js:

When to choose React?

1. Client-heavy applications? React might be your best bet.

I’ve found myself struggling in Next.js when building apps that are heavily dependent on client side interactions, like dashboards that don’t care much about SEO and load most of their data via APIs after render. In such cases, the server side magic of Next.js can sometimes get in the way, especially when managing state across dynamic routes or dealing with hydration mismatches.

2. Backend already deployed? Keep it simple with React.

If you’re only building the frontend and your backend lives elsewhere, React might be the easier and better choice. Next.js shines the most when it handles both frontend and backend logic like when I’m setting up API routes directly in the project. But if I only need to build frontend I would go with React.

When to choose Next.js?

1. SEO? Go with Next.js.

It’s not that React is bad for SEO, it’s just that Next.js gives you an extra edge. By generating HTML on the server before it hits the browser, Next.js helps web crawlers index your content more effectively.

I’ve seen improved page rankings and faster content discovery on projects where SEO was critical.

2. Monorepo-friendly and production-ready out of the box.

One of the things that made me fall in love with Next.js was how easy it is to scale. The file-based routing, API routes, middleware, and even app directory structure make it feel more cohesive and manageable, especially in a monorepo setup.

React doesn’t impose structure, which can be freeing or frustrating, depending on the size of the project.

🧭 Routing: Manual vs Magic

This was one of the first things that blew my mind.

In React, I was always setting up react-router-dom, mapping routes manually, and managing nested routes through config or wrappers. It worked, but it always felt like setup I had to do before actually building anything.

In Next.js, you just drop a file in your app/ directory and it becomes a route. Done. Need dynamic routes? Just use brackets like [id].tsx.

It feels like the framework wants you to go fast.

The best part? Clean URLs and layouts come naturally, and you can even create shared layouts without boilerplate. That was a game changer.

🚀 Performance: Built-in Wins

Another thing that made me "Next.js everything" was how much performance tuning I didn’t have to do.

With React, I’d often reach for tools like React.lazy, Suspense, Webpack plugins, manual chunking, or image optimization libraries.

With Next.js, many of those concerns are handled for you:

✅ Automatic code splitting.
🖼️ Built-in image optimization with next/image
🌍 Static content served via CDN
✨ Automatic font optimization

So, Should You Next.js Everything?

Not necessarily. React is still great and in many cases, it’s exactly what you need.

But if you’re building a full-stack app, care about performance and SEO, or want a better developer experience out of the box, Next.js makes a compelling case.

For me, Next.js is my go-to for new projects but there are still times when React.js is the better fit, depending on the project’s needs.

If you're looking to hire a passionate developer or even if you just want to say hi, feel free to check out my portfolio and reach out. I'd love to connect!

Understanding onMouseEnter, onMouseOver, and onMouseMove in React

Samit Kapoor — Sat, 03 May 2025 15:56:01 +0000

Recently, I was building an animated tabs component for my website, something similar to the animated tab switcher found on Vercel’s dashboard (below)

I was using Framer Motion’s layout animations to animate a background highlight that follows the active tab. Each tab was a div, and I added onMouseEnter and onMouseLeave event listeners to track which tab was currently highlighted. Simple enough, right?

It worked... until I started moving my mouse quickly between the tabs.

Sometimes, especially when I moved the mouse at a high speed, none of the tabs appeared to be hovered. The highlight vanished. It was as if my mouse had exited all the elements, even though it was clearly moving over them.

That behavior didn’t make sense.

So I dug in. And that’s when I stumbled upon the differences between onMouseEnter, onMouseOver, and onMouseMove. Not only that, I also learned that the way these events behave can vary slightly depending on the HTML element involved.

I solved the issue by replacing each div with an li. This tiny change stabilized the behavior, likely because li elements come with lighter default styles. But I’ll get to that in a minute.

`onMouseEnter` vs `onMouseOver` vs `onMouseMove`

At first glance, these two seem interchangeable. They both fire when your cursor enters an element. But there’s a key difference:

`onMouseEnter`

Fires only once when the pointer enters the target element.
Does not bubble. If a child element is hovered, it won’t trigger again.
Great for handling overall entry into a component.

`onMouseOver`

Fires every time the pointer enters the target element or any of its children.
Does bubble, which means it can fire multiple times as the cursor moves over nested elements.

`onMouseMove`

Fires every time the pointer moves within the bounds of an element.
Can be used for fine-grained tracking e.g., cursor position, hover animations, tooltips.

In my case, using any of the above would implement the behaviour I wanted but onMouseEnter was the most efficient since I only wanted to track when cursor enters a tab.

So... Why Did Replacing `div` with `li` Fix It?

This is where it gets interesting.

While all HTML elements can technically behave the same when styled properly, semantic HTML elements (like li, button, a, etc.) often have:

Fewer browser-default styles (compared to a div)
Simpler box models
Clearer accessibility and interaction expectations

In this specific case:

li elements are designed to be part of a list, meaning their rendering and hit-box behavior is more consistent in list-like structures.
The lighter layout overhead of li might make mouse transitions more predictable, reducing the chance of your cursor skipping out of bounds momentarily at high speed.

This difference isn’t always obvious, but it can have a real impact, especially when animations and fast pointer movements are involved.

How to Choose the Right Event

Use Case	Recommended Event
Trigger once on entering parent	`onMouseEnter`
Trigger on entering any child	`onMouseOver`
Track real-time pointer motion	`onMouseMove`

Final Thoughts

If your hover-based UI is acting flaky, especially when animations or child elements are involved, don’t immediately blame your logic. The event type and the element used can both significantly affect behavior.

Sometimes, solving bugs isn’t about changing the code, it’s about choosing the right tags and understanding what’s really going on under the hood.

If you're working with interactive elements like tabs, consider:

Using semantic HTML (li, button, etc.)
Pairing onMouseEnter with onMouseMove for better tracking
Avoiding deep nesting that could confuse bubbling events like onMouseOver

If you're looking to hire a passionate developer or even if you just want to say hi, feel free to check out my portfolio and reach out. I'd love to connect!

How to Make Your Website Link Look Amazing on Social Media?

Samit Kapoor — Sat, 26 Apr 2025 10:27:16 +0000

When you share the link to your project on social media platforms like Twitter, Peerlist, LinkedIn, and others, having a preview banner(like the one shown above) can significantly increase the chances of users clicking on it. A good looking preview not only grabs attention but also improves the visibility of your link, driving more traffic to your project.

In this article, I'll explain how social media link previews work and how you can easily make your website links look amazing when shared online.

How Does It Work?

When you paste a link on social media, the platform doesn’t just display the raw URL. Instead, it tries to fetch extra information from the website to create a more engaging preview.

But how does it know what title, description, or image to show?

That's where Open Graph meta tags (originally introduced by Facebook) and Twitter Card meta tags come into play.

These are special HTML tags that you add inside the <head> section of your webpage. They tell social media platforms exactly what content to display when someone shares your link, including the page title, description, and a thumbnail image.

Without these tags, platforms will either guess the information or just show a plain link without any visuals.

By setting up the right meta tags yourself, you take full control over how your website appears, making it look clean, professional, and much more clickable.

Basic Tags You Need

To set up a beautiful link preview, you mainly need to add a few meta tags inside the <head> of your HTML page. Here are the important ones:


<!-- Open Graph Meta Tags -->
<meta property="og:title" content="Your Website Title Here" />
<meta property="og:description" content="A short description about your website or page." />
<meta property="og:image" content="https://yourwebsite.com/your-preview-image.png" />
<meta property="og:url" content="https://yourwebsite.com/" />
<meta property="og:type" content="website" />

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Website Title Here" />
<meta name="twitter:description" content="A short description about your website or page." />
<meta name="twitter:image" content="https://yourwebsite.com/your-preview-image.png" />

You can also include more information about your website!
Read here to know more: Twitter, OpenGraph

How Long Does It Take for Changes to Reflect?

After you update or add Open Graph and Twitter Card meta tags, it’s important to know that changes might not show up instantly everywhere.

Most social media platforms cache the preview information the first time they see a link. This means if you shared your link before setting the correct meta tags, platforms like X, LinkedIn, or Facebook might continue showing the old preview for some time.

In general, once you force a re-crawl using their official tools, changes should reflect within a few minutes to an hour.

Here are some tools to see how your website will look in preview: Facebook, LinkedIn

Final Thoughts

Adding proper preview banners to your website is a small but powerful improvement that can make a big difference in how your project is perceived online.

It helps your link stand out, grabs more attention, and can drive more traffic to your site.

Now that you know how it works, take a few minutes to set it up for your own website.

If you found this article helpful, feel free to share it with someone who might need it too. 🚀

If you're looking to hire a passionate developer or even if you just want to say hi, feel free to check out my portfolio and reach out. I'd love to connect!

How I won Peerlist x Aceternity UI animation challenge: My problem solving approach

Samit Kapoor — Sun, 20 Apr 2025 17:50:08 +0000

Click here to see my submissions
Click here for the repository

🎯 What is the UI Animation Challenge?

The UI Animation Challenge was a 5-day design-to-code event hosted by Peerlist in collaboration with Aceternity UI. Each day, participants were given an animated UI component and were challenged to bring it to life.

There were six winners in total:

One prize winner received access to the highly acclaimed UI Animation course by Emil Kowalski.
Five additional winners received a lifetime subscription to Aceternity UI Pro

I participated in the challenge and won a lifetime subscription to Aceternity UI Pro. In this article, I’ll walk you through my problem solving approach for each of the five daily challenges, how I interpreted the prompts, made design decisions, and tackled technical hurdles along the way.

Day 1 – Fluid Menu Animation

🔗 View the challenge
🎯 View my submission

💭 Initial Thoughts

The moment I saw the reference video, it was clear that it was gooey animation. I'd heard of them before, but never actually tried building one myself. Honestly, I had no idea how it worked under the hood or how the icons were blending into each other like that.

Still, it felt doable if broken down into smaller steps. The animation made sense to me, all the icons seemed to be hidden behind the main menu button and then popped out vertically when the menu was opened. So the plan was to stack them all in the same spot using absolute positioning, and then animate them along the Y axis when triggered.

🛠️ Building It

I started off by designing each icon button, just simple circles with a background color and full border radius. A toggle state was added to track whether the menu was open or closed, and from there, the layout for the open state was built. I used motion and AnimatePresence from framer-motion to animate the transition between state

That part was pretty straightforward and felt familiar.

The tricky bit was the actual gooey effect. Since I hadn’t done it before, I went straight to the internet to get an idea of how it works. Turned out, it could be done using SVG filters like feGaussianBlur and feColorMatrix, which let elements blend and stretch into each other.

After applying the filter and messing around with the values a bit, the gooey look started to come together. It was super satisfying to see it work, especially considering I started off not knowing how to even approach it.

Day 2 – Dynamic Status Indicator

🔗 View the challenge
🎯 View my submission

💭 Initial Thoughts

Out of all the challenges, this one felt like the easiest. It was pretty straightforward, and I’d already worked on similar entry and exit animations using framer-motion in the past. I could tell what was happening behind the scenes just by watching the reference video a couple of times.

🛠️ Building It

The component had three states: loading, success, and error. I started by building the UI for each state separately. Then, I set up a setInterval to automatically switch between the status.

To animate the transitions between the different states, I used AnimatePresence from framer-motion. But early on, I ran into a weird issue the component would slightly distort during transitions. That’s when I discovered that AnimatePresence supports different modes, and switching to wait mode fixed the glitch. In this mode, the next element waits for the current one to fully exit before entering, which ended up making the transition much smoother.

Once everything was working, I was pretty happy with the result and submitted it.

I looked at it again later and realized I had missed two important details:

The direction of the text animation is actually different depending on the state.
- “Analyzing Transaction” (loading) enters from the left, suggesting progress or motion.
- “Transaction Safe” (success) comes in from the right, giving it a sense of completion or arrival.
The width of the container animated during state changes, which I completely overlooked.

Looking back, I think I was a bit too confident while building this one. Since I already felt comfortable with the concept, I might’ve rushed through it and didn’t pay close enough attention to the finer details. It’s wild how much nuance there can be in animations that seem super simple at first glance.

Day 3 – Animated Checkbox

🔗 View the challenge
🎯 View my submission

💭 Initial Thoughts

This one was a bit tricky. I could tell right away that the checkbox border animation was some sort of path animation, most likely done using SVG, but I had no real experience implementing one before. I did understand how to handle the text animation when an item is marked complete, so I figured I’d start there and build things up gradually - same mindset as Day 1. Just take it step by step, learn what’s needed along the way, and eventually the full component would come together.

🛠️ Building It

I kicked things off by setting up a basic todo list UI, similar to the prompt. Got a list of checkboxes, and added a simple animated strikethrough for the text when a task was marked as done.

Then came the tricky part: the border animation on the checkbox itself. I headed on to the internet and came across this article by Cassie Evans, which explained how stroke-dasharray and stroke-dashoffset work together to create path animations.

Using that, I created an SVG rect and animated its stroke to draw around the checkbox using framer-motion. Once I figured out how the stroke lengths corresponded to the path, it all clicked into place.

But looking back, I missed 1 detail here too:

The checkbox text actually shakes horizontally when clicked. I completely missed it in the excitement of figuring out path animations.

By this point, I knew I had to step up for the last two challenges. I had already missed three small details across the first three days. If I wanted to stand out and win something, I needed to slow down a bit and focus harder going forward.

Day 4 – Animated Toggles

🔗 View the challenge
🎯 View my submission

💭 Initial Thoughts

This one needed the most focus so far. I really had to study the animation closely to figure out what was going on. Also, great timing , I happened to be on a road trip with my family that day, building this from the back seat of a moving car.

After watching the reference video a few times, I realized there was a background div behind the toggles that slides depending on which button is clicked. What made it tricky was how smooth the whole transition felt. When you click “Premium,” the heading seems to slide down while the “Monthly · Annual” options come up, it gives the illusion of the whole component zooming in. I also noticed there was likely a fade involved to help sell the motion.

🛠️ Building It

I started small again, just built a basic toggle UI with no animations or active states. Then I added the sliding background div to indicate the selected option. Once that was working, I created a separate component for the active “Premium” state and wired it up with AnimatePresence to handle entry and exit transitions.

I spent quite a bit of time here tweaking values to make sure the motion felt seamless and unified, like it was all part of one animation instead of separate moving parts. I also made a conscious effort not to rush this one, especially after missing some details in the earlier challenges.

I ended up submitting it later in the day after getting home from the trip and giving it a proper final review. Personally, I think this was my strongest submission of the week.

Day 5 – Shared Layout Tabs

🔗 View the challenge
🎯 View my submission

💭 Initial Thoughts

This was hands down the toughest challenge of the week. I had done something a bit similar before using Hero animations in Flutter, so I had a rough idea of what was going on, but I didn’t really know how to approach it in the React + Framer Motion.

The individual views were simple to build. It was the smooth transition between them that had me scratching my head. Once again, I was back in familiar territory: unsure how to do it, but confident I could figure it out step by step.

🛠️ Building It

I started by laying out the basic structure, added the heading, animated tab bar, and built out each view without worrying about transitions at first. I wanted to make sure everything looked good statically before diving into animations.

Once I was happy with the layout, I went down learning how to animate between views. That’s when I discovered framer-motion’s layout animations, and I found this article which explained the concept really well.

After reading through it and experimenting a bit, things started to click. I took my time with this one, no rushing, and paid extra attention to the little details I had missed earlier in the week. Finally, I submitted the component and wrapped up the challenge.

Felt like the perfect way to end the week, learning something completely new and actually getting it to work!

Looking Back

This challenge was honestly one of the most fun and rewarding things I’ve done in a while. I had an absolute blast learning new concepts, pushing myself out of my comfort zone, and figuring things out as I went. I don’t think I’ve ever felt this challenged creatively and technically and that’s exactly what made it so exciting.

It’s a solid reminder that consistent challenges like this are a great way to level up. I’m definitely going to make it a habit to take on more of these, just to keep learning, building, and improving as a developer.

Can’t wait to participate in more challenges like this in the future!

If you're looking to hire a passionate developer or even if you just want to say hi, feel free to check out my portfolio and reach out. I'd love to connect!

DEV Community: Samit Kapoor

Prompt Engineering 101: Master the Art of Asking AI the Right Way

Use AI to Write Prompts (Yes, Really!)

Zero Shot, One Shot & Few Shot Approach

A/B Testing

Use XML tags

Read other AI app's prompts

Your Prompt Engineering Journey Starts Now

3 Simple Text Animations That You Can Build Using Framer Motion

1. Rainbow Text

Wavy Text

Blur Text

Why do we use the whileInView prop here, but the animate prop in Wavy Text?

How Bloom Filters Help Tech Giants Manage Massive Caches

What are Bloom filters?

How does it work?

How Do Bloom Filters Help Manage and Update the Cache?

False Positives

Why is this acceptable?

Final thoughts

Understanding Query Cost in SQL

What determines a Query cost?

Let's look at SQL Commands

SELECT Command

INSERT Command

UPDATE Command

Tips for optimizing Query Cost

--legacy-peer-deps vs --force: Understanding npm's conflict resolvers

The Problem: Dependency Conflicts in npm

--legacy-peer-deps

--force

Which one should you choose?

Understanding React's Declarative UI Through a Copy Button Example

The Imperative Attempt

Why it doesn't work?

Using useState

Streaming Downloads from S3 in React and Node.js (The Right Way)

How Does It Work?

Why Is This Better?

Backend Implementation

Frontend Implementation

Conclusion

How to Customize Tailwind CSS in Next.js 15 Without tailwind.config.js?

🧪 Why tailwind.config.js Is Optional in Next.js 15

✍️ How to Use @theme inline in Next.js 15

🚀 Final Thoughts

React or Next.js: What to use and When?

When to choose React?

1. Client-heavy applications? React might be your best bet.

2. Backend already deployed? Keep it simple with React.

When to choose Next.js?

1. SEO? Go with Next.js.

2. Monorepo-friendly and production-ready out of the box.

🧭 Routing: Manual vs Magic

🚀 Performance: Built-in Wins

So, Should You Next.js Everything?

Understanding onMouseEnter, onMouseOver, and onMouseMove in React

onMouseEnter vs onMouseOver vs onMouseMove

onMouseEnter

onMouseOver

onMouseMove

So... Why Did Replacing div with li Fix It?

How to Choose the Right Event

Final Thoughts

How to Make Your Website Link Look Amazing on Social Media?

How Does It Work?

Basic Tags You Need

How Long Does It Take for Changes to Reflect?

Final Thoughts

How I won Peerlist x Aceternity UI animation challenge: My problem solving approach

🎯 What is the UI Animation Challenge?

Day 1 – Fluid Menu Animation

💭 Initial Thoughts

🛠️ Building It

Day 2 – Dynamic Status Indicator

💭 Initial Thoughts

🛠️ Building It

Day 3 – Animated Checkbox

💭 Initial Thoughts

🛠️ Building It

Why do we use the `whileInView` prop here, but the `animate` prop in Wavy Text?

`SELECT` Command

`INSERT` Command

`UPDATE` Command

`--legacy-peer-deps`

`--force`

Using `useState`

🧪 Why `tailwind.config.js` Is Optional in Next.js 15

✍️ How to Use `@theme inline` in Next.js 15

`onMouseEnter` vs `onMouseOver` vs `onMouseMove`

`onMouseEnter`

`onMouseOver`

`onMouseMove`

So... Why Did Replacing `div` with `li` Fix It?