DEV Community: Praveen Sripati

[Boost]

Praveen Sripati — Wed, 23 Jul 2025 06:42:51 +0000

Praveen Sripati

Jul 20 '25

Introducing Nexus: A Polished Dashboard Built with Vite, React, and Shadcn/ui

#devchallenge #frontendchallenge #css #javascript

Comments 18

2 min read

Introducing Nexus: A Polished Dashboard Built with Vite, React, and Shadcn/ui

Praveen Sripati — Sun, 20 Jul 2025 15:20:01 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

For this challenge, I built "Nexus", a modern, single-page intranet dashboard designed to be a company's digital heartbeat. My goal was to create a clean, intuitive interface that masterfully balances high-efficiency productivity with vibrant community engagement, directly addressing the core challenge of information overload in the modern workplace.

The layout is a responsive two-column design featuring a main content area and a right sidebar for tools and events. Nexus provides a central hub for company news, team events, and essential tools, all while fostering a positive culture through features like a "Kudos" feed.

Demo

You can experience the live application and view the complete source code at the links below.

Live Demo URL: https://nexus-drab-ten.vercel.app/

GitHub Repository: https://github.com/praveen-sripati/nexus

Journey

My journey in building Nexus was a fantastic deep dive into creating a polished application using a modern frontend stack: React, Vite, TypeScript, Tailwind CSS, and shadcn/ui.

The Process & Key Decisions

From the start, I began by setting up the project with Vite for a blazing-fast development experience. The choice of TypeScript was deliberate to ensure type safety and code quality from the ground up.

For the UI, the combination of Tailwind CSS and shadcn/ui was a game-changer. Tailwind's utility-first approach made it easy to implement the responsive two-column layout, while shadcn/ui provided beautifully designed, accessible components like Cards, Buttons, and Dropdown Menus, which saved a huge amount of time.

A Choice I'm Proud Of: The Custom Theme Provider

One of the first features I implemented was a light/dark mode theme switcher. Instead of reaching for a library like next-themes, I decided to build it from scratch. This was a great learning experience and something I'm particularly proud of.

Ultimately, this project was a rewarding challenge that took me from a detailed concept to a complete, deployed, and polished application.

Thanks to DEV and Axero for the opportunity.

Made with ❤️ by Praveen Sripati

DEV Username: @praveen-sripati

The Passwordless Future: A Security Upgrade or a Costly Mistake?

Praveen Sripati — Fri, 11 Jul 2025 08:05:32 +0000

For decades, we’ve relied on complex passwords to guard our digital lives. But let’s be honest: they’re often weak, reused, and a pain to remember. Enter passwordless authentication, a modern solution promising a future free from P@$$w0rd123!. But is it actually safer?

So, What is Passwordless Authentication?

It’s any method that verifies who you are without asking for a secret you have to remember. Instead, it relies on something unique you have or something unique you are.

Biometrics: Uses your unique physical traits like a fingerprint scan or facial recognition.
Magic Links & OTPs: Sends a one-time login link or code to your trusted email or phone.
Hardware Keys: Relies on a physical USB or NFC device that you plug in or tap to approve a login.
Authenticator Apps: Generates a constantly changing, time-sensitive code on your smartphone.

What Does This Look Like in Code?

Ever wondered what happens behind the scenes? While the full cryptographic process is complex, the basic flow is surprisingly straightforward. Here’s a simplified peek at how a browser and a server might interact during a “passkey” registration using the WebAuthn API.

Client-Side

This code asks the server for a challenge, then tells the browser to use that challenge to create a new passkey, which triggers your device’s built-in security like Face ID or a fingerprint scan.

// 1. Get a unique challenge from the server
const challenge = await fetch('/register-challenge').then(res => res.json());

// 2. Ask the browser's API to create a new passkey
//    This prompts the user for their fingerprint, face, etc.
const credential = await navigator.credentials.create({
  publicKey: challenge
});

// 3. Send the newly created credential to the server for verification
await fetch('/register-verify', {
  method: 'POST',
  body: JSON.stringify(credential),
});

Server-Side

The server generates the challenge, and then later verifies the credential sent back from the browser to ensure it’s valid before saving it for the user.

// Endpoint to provide the secure challenge
app.get('/register-challenge', (req, res) => {
  const challenge = generateSecureRandomChallenge();
  req.session.challenge = challenge; // Store challenge to verify later
  res.json({ challenge });
});

// Endpoint to verify the new credential and save it
app.post('/register-verify', (req, res) => {
  const { credential } = req.body;
  const storedChallenge = req.session.challenge;

  // Verify the credential against the stored challenge
  if (isCredentialValid(credential, storedChallenge)) {
    // If valid, save the user's public key for future logins
    savePublicKeyForUser(credential.publicKey);
    res.json({ status: 'ok' });
  }
});

Notice what’s missing? A password. The browser and your device handle the secure creation of the credential. This fundamental shift is what makes the system so powerful.

The Good vs. The Bad: A Quick Rundown

Passwordless methods offer a huge leap forward, but it’s not a perfect system. Here are the pros and cons in a nutshell.

The “Good” 👍

Makes Phishing Nearly Impossible: Hackers can’t steal a password that doesn’t exist.
Eliminates Brute-Force Attacks: Guessing millions of password combinations becomes obsolete.
Offers a Smoother User Experience: Logging in is faster, easier, and much less frustrating.
Provides Stronger Security by Default: Most methods are inherently multi-factor, boosting safety.

The “Bad” 👎

Poses a Lost Device Risk: Losing your phone could mean losing your primary login key.
Creates Implementation Hurdles: Shifting legacy systems to passwordless can be complex for businesses.
Raises Biometric Privacy Concerns: Your unique biological data needs to be stored securely.
Varies in Strength: A simple email link is less secure than a dedicated hardware key.

Is It Really Safer?

Yes, the consensus among security experts is that a well-implemented passwordless system is far more secure than traditional passwords. It tackles the single biggest vulnerability: human error.

For a truly secure passwordless future, we need to focus on:

Iron-Clad Account Recovery: You must have a secure way to get back in if you lose your device.
A Layered, Multi-Factor Approach: Combining methods, like a fingerprint scan to approve a passkey, is key.
Clear User Education: Users need to understand how to protect their new digital keys.

While we haven’t ditched every single password just yet, the shift is happening fast. The future of your digital identity is shaping up to be more secure, and thankfully, a lot less forgettable.

Micro-Frontends Explained: Is It Time to Break Up Your Monolith?

Praveen Sripati — Wed, 02 Jul 2025 20:35:54 +0000

Have you heard the buzz? It seems like everyone in the tech world is talking about “micro-frontends.” It’s a term that gets thrown around in team meetings and on tech blogs, often hailed as the future of web development. But what does it actually mean? Is it just hype, or is it a revolutionary approach you should be considering?

Let’s break it down in simple terms, ditch the complex jargon, and use some visuals to understand why so many are making the switch — and if it’s the right move for you.

What is a Monolithic Front-End?

Imagine your entire website’s front-end is like one giant, solid block. All the pieces — the user profiles, the product pages, the checkout process — are tightly coupled together in a single codebase.

This is a monolithic architecture. It’s a single, unified codebase for the entire user interface.

What is a Micro-Frontend?

Now, imagine breaking that giant block into smaller, independent cubes. Each cube is its own mini-application (like the search bar or shopping cart), but they all connect and work together to form the complete structure.

This is a micro-frontend architecture. You’re splitting a large front-end into smaller, manageable pieces.

Why Micro-Frontends (The Pros)

Faster, Independent Teams: Small teams can own a specific feature (e.g., the search bar, the shopping cart). They can develop, test, and deploy their feature without waiting for other teams. This means faster updates and innovation.

Freedom to Choose Technology: One team can use React, another can use Vue, and a third can use Angular — all within the same application. This allows teams to use the best tool for their specific job and makes it easier to try new technologies.

Easier to Scale: As your company grows, you can easily add more teams to work on new features without creating a complex, tangled codebase.

Improved Fault Isolation: If one micro-frontend has a bug or fails, it doesn’t take down the entire website. The rest of the application can continue to function.

Simpler Codebases: Each micro-frontend has a smaller, more focused codebase, making it easier for developers to understand, maintain, and update.

Why You Might Want to Wait (The Cons)

Increased Complexity: You now have multiple codebases, multiple deployment pipelines, and the challenge of making them all work together seamlessly.

Maintaining a Consistent Look and Feel: Ensuring that all the different parts of your application look and feel like a single, cohesive product requires strong communication and a shared design system.

Potential for Larger Bundle Sizes: If not managed carefully, having multiple frameworks and duplicated dependencies can lead to slower load times for the user.

More Operational Overhead: Managing the infrastructure for multiple small applications can be more challenging than for a single large one.

So, Should You Switch?

Consider micro-frontends if:

You have a large, complex application.
You have multiple teams that need to work independently.
You are struggling with slow development cycles and deployment bottlenecks.

You might want to stick with a monolith if:

You have a small to medium-sized application.
You have a small development team.
The complexity of managing a distributed system outweighs the benefits for your project.

References to deep dive:

Books

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter! https://x.com/praveen_sripati

Map, Set, Go! A Quick Guide to Modern JavaScript Data Structures

Praveen Sripati — Fri, 27 Jun 2025 13:30:17 +0000

A quick guide to choosing the right data structure over plain Objects and Arrays.

`Map` vs. `Object`

Think of a Map as a perfect dictionary.

With a regular JavaScript Object, the "words" (keys) you look up can only be simple text (strings). This is limiting.

A Map is better because the keys can be anything—a number, a boolean, or even another object. It remembers the exact key you used. It also reliably keeps everything in the order you inserted it.

Use Map when you need more than just string keys, care about insertion order, or require frequent additions and deletions.

`Map` - Quick Reference

// --- Creation ---
const myMap = new Map([
  ['key1', 'value1'],
  [123, 'value2']
]);

// --- Set / Add ---
myMap.set('newKey', 'newValue');
myMap.set({ id: 1 }, 'metadata'); // Object as a key

// --- Get ---
myMap.get('newKey'); // 'newValue'
myMap.get(123);      // 'value2'

// --- Check Existence ---
myMap.has('key1'); // true

// --- Delete ---
myMap.delete(123); // true

// --- Size ---
myMap.size; // 2

// --- Iterate ---
for (const [key, value] of myMap) {
  console.log(key, value);
}

// --- Clear ---
myMap.clear();

`Set` vs. `Array`

Think of a Set as a members-only guest list.

On a guest list, each person is unique; you can’t be on the list twice. The main purpose is to quickly check if someone is on the list.

A Set does exactly this: it only stores unique values. If you try to add something that's already there, it's simply ignored. Its main strength is being incredibly fast at checking for an item with .has(), much faster than searching through a large array.

Use Set when you need to store a collection of unique values and perform fast membership checks.

`Set` - Quick Reference

// --- Creation / Remove Duplicates ---
const myArr = [1, 2, 2, 3, 4, 4];
const mySet = new Set(myArr); // Set(4) { 1, 2, 3, 4 }

// --- Add ---
mySet.add(5);
mySet.add(1); // Ignored, 1 already exists

// --- Check Existence ---
mySet.has(3); // true
mySet.has(99); // false

// --- Delete ---
mySet.delete(4); // true

// --- Size ---
mySet.size; // 4

// --- Iterate ---
for (const value of mySet) {
  console.log(value);
}

// --- Clear ---
mySet.clear();

// --- Convert back to Array ---
const uniqueArray = [...mySet]; // [1, 2, 3, 5]

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter! https://x.com/praveen_sripati

How I Built a Multi-Theme System using New Tailwind CSS v4 & React

Praveen Sripati — Wed, 25 Jun 2025 08:08:36 +0000

It all started with a simple, familiar goal: I wanted to add a dark mode to my new React application. It’s practically a requirement these days. But as I started digging into the latest tools, specifically the Vite-powered React and the newly released Tailwind CSS v4, I realized I was thinking too small.

What if I could go beyond just a light and dark theme? What if users could choose their own accent colors? A deep blue, a vibrant green, maybe even a warm orange?

This post is the story of that journey. I’ll walk you through how I built a flexible, multi-theme system that’s not only powerful but also surprisingly elegant, thanks to the new CSS-first approach in Tailwind v4.

Tailwind v4’s New Philosophy

My first surprise was that the old way of thinking about Tailwind — heavy on the tailwind.config.js file—has fundamentally changed. With Tailwind v4 and its Vite plugin, the configuration becomes incredibly minimal. The real power has moved directly into my CSS file.

The hero of this new approach is a tool that’s been in our browsers all along: CSS Custom Properties (Variables).

Instead of defining colors in a JavaScript object, I could now define them as native CSS variables. This felt right. It meant my theming logic would live where it belongs — in the CSS — and could be dynamically controlled by my React application.

Laying the Foundation:

Everything starts in src/index.css. This single file became the heart of the entire theming system.

First, I added a professional-grade font, “Inter,” from Google Fonts to give the UI a clean, modern feel.

Then, I defined all my theme colors inside a @layer base block.

/* src/index.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import "tailwindcss";

@layer base {
  /* 1. Default (Light) Theme */
  :root {
    --background: #FFFFFF;
    --foreground: #020817;
    --card: #FFFFFF;
    --card-foreground: #020817;
    --primary: #1E40AF;
    --primary-foreground: #EFF6FF;
    --muted: #F1F5F9;
    --muted-foreground: #64748B;
    --border: #E2E8F0;
  }

  /* 2. Dark Theme */
  .dark {
    --background: #020817;
    --foreground: #F8FAFC;
    --card: #0F172A;
    /* ...and so on for all dark mode variables */
  }

  /* 3. Accent Themes */
  .theme-green {
    --primary: #16A34A;
    --primary-foreground: #F0FDF4;
  }
  .dark.theme-green {
    --primary: #22C55E;
    --primary-foreground: #052E16;
  }
}

The logic here is:

:root holds the default (light theme) variables.
The .dark class overrides these variables when it's applied to the <html> tag.
Other classes like .theme-green can be applied alongside .dark or .light to specifically change the --primary colors, giving me an independent accent system.

The final piece of the CSS puzzle was connecting these variables to Tailwind. This is done with the @theme directive. It tells Tailwind, "Hey, when you see bg-primary, I want you to use my --primary variable."

/* src/index.css (at the bottom) */
@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-primary: var(--primary);
  --color-muted: var(--muted);
  --color-border: var(--border);
}

The `useTheme` Hook

With my CSS engine ready, I needed a way to control it from my React app. I created a custom hook, useTheme, to act as the central brain for all theme-related logic.

Its jobs are simple but crucial:

Keep track of the current theme (light/dark) and accent color in a React state.
Read the user’s last choice from localStorage so the theme persists.
Apply or remove the correct classes (.dark, .theme-green) on the <html> element whenever the state changes.

// src/hooks/useTheme.js
import { useState, useEffect } from 'react';

export const useTheme = () => {
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');
  const [accent, setAccent] = useState(() => localStorage.getItem('accent') || 'theme-blue');

  useEffect(() => {
    const root = window.document.documentElement;

    // Handle light/dark mode
    root.classList.remove('light', 'dark');
    root.classList.add(theme);
    localStorage.setItem('theme', theme);

    // Handle accent color
    root.classList.remove('theme-blue', 'theme-green'); // Add any other themes here
    root.classList.add(accent);
    localStorage.setItem('accent', accent);

  }, [theme, accent]);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  const changeAccent = (newAccent) => {
    setAccent(newAccent);
  };

  return { theme, toggleTheme, accent, changeAccent };
};

This hook gave me a clean API — toggleTheme() and changeAccent()—that I could use anywhere in my app.

Building an Interface

Finally, I wanted to build a UI that truly showcased the power of this system. I designed a simple “Appearance” settings page. Instead of basic buttons, I created custom, interactive components.

The ThemeOption component is a clickable card that shows a color swatch of the theme and a checkmark when it’s selected.

Here’s a glimpse of the final App.jsx, where I put everything together:

// src/App.jsx
import { useTheme } from './hooks/useTheme';
import { ThemeOption } from './components/ThemeOption';
// ... other imports

function App() {
  const { theme, toggleTheme, accent, changeAccent } = useTheme();

  return (
    <div className="min-h-screen bg-background text-foreground ...">
      <div className="text-center mb-12">
        <h1 className="text-5xl font-extrabold ...">Appearance</h1>
        <p className="mt-3 text-lg text-muted-foreground ...">
          Customize the look and feel of your interface.
        </p>
      </div>

      <div className="rounded-lg border border-border bg-card ...">
        {/* Theme Mode Setting */}
        <div className="...">
          {/* ... UI for toggling light/dark mode ... */}
        </div>

        {/* Accent Color Setting */}
        <div className="...">
          <h3 className="text-xl font-semibold ...">Accent Color</h3>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
            <ThemeOption
              themeName="Blue"
              accentColor="#60A5FA"
              isSelected={accent === 'theme-blue'}
              onSelect={() => changeAccent('theme-blue')}
            />
            <ThemeOption
              themeName="Green"
              accentColor="#22C55E"
              isSelected={accent === 'theme-green'}
              onSelect={() => changeAccent('theme-green')}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

The result was a clean, responsive, and intuitive settings page where users can instantly see their changes reflected across the entire application.

App Screenshots

Final Thoughts

By leveraging native CSS variables, I created a theming system that is not only scalable and maintainable but also incredibly performant. If you’re starting a new project, I highly encourage you to explore this workflow. It might just change the way you think about styling your applications.

The combination of Vite’s speed, React’s component model, and Tailwind v4’s CSS-first approach makes building complex, dynamic user interfaces more enjoyable than ever.

You can check out the full source code on my GitHub here 👇:

https://github.com/praveen-sripati/tailwind-theme-app

Thanks for reading, and feel free to ask any questions in the comments!

Happy theming!

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter! https://x.com/praveen_sripati

I Stole This Awesome Ripple Effect from Ant Design (And You Can Too!).

Praveen Sripati — Mon, 23 Jun 2025 22:15:41 +0000

You know how some websites just feel nice to use? It’s often the little things. I was on the Ant Design website the other day and noticed their theme toggle. When you click it, it doesn’t just flash — it creates this awesome ripple effect that starts right from your mouse click! I thought that was super cool and decided I had to try building it myself.

So, here’s a quick rundown of how I did it with React, Tailwind CSS, and the new View Transitions API.

Step 1: Getting the Basics Down

First things first, I needed a simple theme toggle that actually worked. I made a new component called ThemeToggle.jsx to handle everything.

Inside, I used a useState hook to keep track of whether the theme was 'light' or 'dark'. Then, I used a useEffect hook to watch that state. Whenever the theme changed, it would add or remove the .dark class from the main <html> tag. That's how Tailwind's dark mode knows what to do!

Here’s what that first version looked like:

// In ThemeToggle.jsx
import React, { useState, useEffect } from 'react';
import { Sun, Moon } from 'lucide-react';

const ThemeToggle = () => {
  // Check localStorage to see if the user had a theme set already
  const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'light');

  // This effect runs whenever the theme changes
  useEffect(() => {
    const root = document.documentElement;
    if (theme === 'dark') {
      root.classList.add('dark');
    } else {
      root.classList.remove('dark');
    }
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? <Sun /> : <Moon />}
    </button>
  );
};

export default ThemeToggle;ty

Step 2: Using View Transitions

Okay, so the toggle worked, but it was still just a sudden flash. This is where the View Transitions API comes in. It’s built to make changes to the page look smooth, and it’s surprisingly easy to use.

All I had to do was wrap my theme-changing line (setTheme(...)) inside document.startViewTransition(). Just like this:

// Inside the ThemeToggle component...
const handleThemeToggle = (event) => {
  const newTheme = theme === 'light' ? 'dark' : 'light';

  // If the browser is old and doesn't support the API, just do it the old way
  if (!document.startViewTransition) {
    setTheme(newTheme);
    return;
  }

  // Wrap our state change in the transition function!
  document.startViewTransition(() => {
    setTheme(newTheme);
  });
};

Just by adding that, the ugly flash was gone! The browser automatically replaced it with a nice, gentle fade. It was already a huge improvement, but I still wanted that ripple.

Step 3: Making the Ripple!

To get the ripple effect, we need to handle the animation.

Turn Off the Default Animation: The browser’s default fade animation would clash with my ripple, so I had to turn it off. I just added a small <style> tag in my main App.jsx file to do this. Putting it there makes sure it's loaded and ready to go from the start.

// In App.jsx
<style>
{`
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }
`}
</style>

2. Create the Ripple Animation: The startViewTransition function gives you a promise called .ready that lets you know when it's time to start your own animation.

First, I grabbed the x and y coordinates from the mouse click.
Then, I figured out how big the ripple needed to be to cover the whole screen.
Finally, I used the Web Animations API (element.animate()) to animate a clip-path from a tiny circle at the click point to a giant one that fills the screen. And I wrapped it in requestAnimationFrame() to make sure it runs super smoothly without any glitches.

Here’s the final click handler with all the logic:

// Inside ThemeToggle.jsx
const handleThemeToggle = (event) => {
  const newTheme = theme === 'light' ? 'dark' : 'light';

  if (!document.startViewTransition) {
    setTheme(newTheme);
    return;
  }

  const x = event.clientX;
  const y = event.clientY;
  const endRadius = Math.hypot(
    Math.max(x, window.innerWidth - x),
    Math.max(y, window.innerHeight - y)
  );

  const transition = document.startViewTransition(() => {
    setTheme(newTheme);
  });

  transition.ready.then(() => {
    requestAnimationFrame(() => {
      document.documentElement.animate(
        {
          clipPath: [
            `circle(0px at ${x}px ${y}px)`,
            `circle(${endRadius}px at ${x}px ${y}px)`,
          ],
        },
        {
          duration: 500,
          easing: 'ease-in-out',
          pseudoElement: '::view-transition-new(root)',
        }
      );
    });
  });
};

Final output:

And That’s It!

It’s pretty amazing how you can use a few modern web tools to turn a boring feature into a really cool interaction. The View Transitions API is super powerful, and it’s definitely worth checking out for other things, too. Hope this helps you add a little extra flair to your own projects!

Happy Coding!

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter! https://x.com/praveen_sripati

The Hidden Risk in Installing Dependencies (And How to Avoid It)

Praveen Sripati — Thu, 19 Jun 2025 14:31:08 +0000

It was a Tuesday afternoon, and the pressure was on. We were in the final sprint of a major feature release, and I had just one piece of the puzzle left: a small, seemingly simple data formatting task. I remembered a utility library I’d used on a personal project a while back. It was perfect — a quick, one-line solution to my problem. Feeling the deadline breathing down my neck, I did what any developer in a hurry would do. I npm intstalled a random formatter package without a second thought, implemented the function in minutes, and pushed my code. A small victory. Or so I thought.

The next morning, our entire build pipeline was broken. After a frantic investigation, we found the culprit. The simple library I installed had a messy web of its own dependencies. One of these, an old and unmaintained sub-package, conflicted directly with a core library in our application, bringing everything to a halt.

That hasty install cost us a morning of productivity and delayed our feature release. That chaotic day transformed my approach. Now, I see npm install as the final step in a crucial evaluation process. Here’s the checklist I developed from that "dependency hell" experience to ensure a new package is a helping hand, not a hidden landmine.

1. Security

Assess whether the package introduces any security risks to your application.

Scan for Vulnerabilities: Use tools like npm audit or Snyk to check for known security holes in the package and its dependencies.
Review Source Activity: Check the repository for recent, legitimate commits to ensure it’s not hijacked or abandoned.
Evaluate Dependencies: Understand that the package’s own dependencies are also being added to your project, each carrying potential risk.

2. Maintenance & Community

Verify that the package is actively supported and will be viable long-term.

Check Recent Activity: Look for recent updates and releases; a package that hasn’t been updated in over a year is a red flag.
Review Open Issues: A high number of unresolved issues and a lack of maintainer responses can signal an abandoned project.
Gauge Community Size: A strong community on platforms like GitHub or Stack Overflow indicates a reliable and trusted package.

3. Documentation

Ensure you can understand and implement the package correctly and efficiently.

Look for Clear Examples: Good documentation provides practical, copy-paste-ready examples for common use cases.
Check for Completeness: A comprehensive API reference is crucial for understanding all the package’s capabilities.
Confirm It’s Up-to-Date: The documentation should correspond to the latest version of the package to avoid confusion.

4. Dependencies

Be aware of what other packages are being installed transitively.

Mind the Dependency Count: A package with minimal dependencies is often preferable as it reduces complexity and potential conflicts.
Analyze the Dependency Tree: Use tools to visualize the entire dependency chain you are about to add to your project.
Watch for Bloat: Avoid packages that bring in large, unnecessary libraries that can swell your application’s size.

5. Licensing

Confirm that you are legally permitted to use the package in your project.

Identify the License: Quickly find the package’s license (e.g., MIT, Apache 2.0, GPL) in its repository.
Ensure License Compatibility: Verify that the package’s license works with your project’s own license and business model.
Check for Commercial Use: If your project is commercial, confirm the license doesn’t restrict its use for profit.

6. Performance & Size

Evaluate the impact the package will have on your application’s speed and resource usage.

Check Bundle Size: For web development, use tools like BundlePhobia to see how much the package will slow down user load times.
Consider Performance Overhead: Assess if the package’s operations are computationally expensive and could create bottlenecks.
Evaluate Resource Consumption: For backend services, consider the potential memory and CPU impact on your servers.

7. Compatibility

Make sure the package will integrate smoothly with your existing tech stack.

Verify Environment Support: Confirm the package works with your version of Node.js, your target browsers, or your operating system.
Check Framework Integration: If you use a framework like React or Angular, ensure the package is designed to be compatible.
Anticipate Conflicts: Be aware of potential clashes with other libraries you are already using in your project.

In the end, building robust software isn’t about avoiding tools, but about choosing them wisely. The pressure to move fast can lead to costly mistakes when we treat package installation as a triviality. By taking just a few moments to run through this checklist, you shift from reactively fixing problems to proactively preventing them. This small investment of time up front pays massive dividends, protecting your project’s stability, security, and long-term health, and solidifying your role as a truly diligent and professional engineer.

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter! https://x.com/praveen_sripati

How I Built an AI That Interviews You using Google Gemini API and Node.js

Praveen Sripati — Sun, 15 Jun 2025 22:20:44 +0000

It all started on a random Saturday afternoon. I was playing around with the Google Gemini API, curious to see what these large language models were really capable of. I wasn’t trying to solve a grand problem or build a startup; I was just having fun and wanted to see if I could make it do something interesting.

My first thought was simple: “Could I get this thing to ask me questions?” I fed it a prompt for “JavaScript interview questions,” and the response was surprisingly good. That’s when the idea sparked. What if I could wrap a simple UI around this? What if I could build a little web app where an AI could interview me on any topic I wanted?

What began as a weekend experiment quickly spiraled into one of the most engaging and educational personal projects I’ve ever tackled. In this post, I’ll walk you through how my “just for fun” idea evolved into a full-blown AI Interviewer app.

The Big Idea

The concept was simple. I wanted a web app where I could:

Enter any technical topic (from “React Hooks” to “SQL Joins” to “Docker Networking”).
Have an AI ask me a series of relevant, high-quality questions on that topic.
Crucially, get a different set of questions every single time to keep me on my toes.
At the end, receive a detailed, AI-generated report card on my performance.

The final result is a sleek, dark-mode app that does exactly this, and I’m incredibly proud of how it turned out.

The Tech Deep Dive

I decided to build the entire application using JavaScript. This allowed me to move quickly and maintain a single language across the entire project.

Frontend: I went with plain, “vanilla” HTML, CSS, and JavaScript. This was a deliberate choice to keep the frontend light and to really focus on the core logic and UI/UX.
Backend: I chose Node.js with the Express.js framework. It’s fast, lightweight, and perfect for building the API that would act as the bridge between my frontend and the AI’s brain.
The AI: The magic comes from the Google Gemini API. I needed a powerful language model that could not only generate questions but also understand my nuanced instructions for creating the final feedback report.

Tuning the AI for Creativity

One of the first problems I hit was repetition. The AI would give me the same great questions for “JavaScript” every single time. The key to solving this was adjusting the AI’s temperature—its "creativity" dial.

In my server.js file, I configured the Gemini model with a high temperature to ensure it would generate unique responses for every request.

// Import the Google AI client
const { GoogleGenerativeAI } = require('@google/generative-ai');
const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);

// Define a generation config with a high temperature for unique responses
const generationConfig = {
  temperature: 0.9,
};

// Initialize the model WITH the new generation configuration
const model = genAI.getGenerativeModel({
  model: "gemini-1.5-flash",
  generationConfig: generationConfig, // Pass our new config here
});

Setting temperature: 0.9 tells the model to take more risks and be more creative, which was the secret to getting fresh, non-repetitive questions every time.

Instructing the AI

I quickly learned that working with an LLM isn’t as simple as just asking a question. You have to become a “prompt engineer.” The real art is in crafting the perfect set of instructions to get the exact output you need.

For the final feedback report, I wanted a beautiful, interactive accordion. This meant I had to instruct the AI to format its entire response in a very specific HTML structure. My final prompt for the analysis looks something like this:

// A simplified look at the prompt sent to the AI
const prompt_text = `
You are a helpful and experienced tech interview coach.
Your entire response MUST be a single block of HTML content suitable for placing inside a <div>.

1.  Begin with a "<div>" with the class "overall-summary".
2.  After the summary, provide a series of accordion items using this exact HTML structure:
    <div class="accordion-item">
      <button class="accordion-header">...</button>
      <div class="accordion-content">...</div>
    </div>

IMPORTANT: Do not include any tags like <html>, <style>, or <script>.

Here is the interview data: ...
`;

Getting this prompt right took more trial and error than any other part of the project!

Safely Rendering AI-Generated HTML

My biggest struggle was handling the AI’s response on the frontend. Sometimes, the AI would “helpfully” wrap its perfect HTML inside Markdown code blocks, or even worse, include its own <style> and <script> tags! This would break my UI completely.

My initial attempts to clean this with simple string replacement were flaky. This led me to the real, industry-standard solution: using the browser’s built-in DOMParser.

This was a game-changer. My final JavaScript code in the script.js finishInterview function now safely parses and validates the response before it ever touches the live page.

// script.js
async function finishInterview() {
  display.loadingText.textContent = 'Analyzing your performance...';
  switchScreen('loading-screen');
  try {
    const response = await fetch(ANALYZE_ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ topic: interviewTopic, qa_list: interviewData }),
    });
    if (!response.ok) throw new Error(`Server responded with status: ${response.status}`);

    const result = await response.json();

    // THIS IS THE FINAL, ROBUST PARSING AND VALIDATION LOGIC
    if (result && result.analysis && typeof result.analysis === 'string') {
      const cleanedHtml = result.analysis.replace(/^```
{% endraw %}
html\s*|
{% raw %}
```$/g, "").trim();
      const parser = new DOMParser();
      const doc = parser.parseFromString(cleanedHtml.trim(), 'text/html');

      // Sanity Check: Does the AI response contain the HTML we actually want?
      if (doc.querySelector('.accordion-item') || doc.querySelector('.overall-summary')) {
        const desiredElements = doc.body.childNodes;
        display.feedbackContent.innerHTML = ''; // Clear previous content
        desiredElements.forEach((node) => {
          display.feedbackContent.appendChild(node.cloneNode(true));
        });
        setupAccordion();
      } else {
        // This block runs if the AI sends back garbage (like just ```
{% endraw %}
html
{% raw %}
```)
        throw new Error('The AI returned an empty or invalid response.');
      }
    } else {
      throw new Error('Received invalid or empty analysis string from server.');
    }
  } catch (error) {
    console.error('Analysis failed:', error);
    display.feedbackContent.innerHTML = `<p class="error">Sorry, the AI was unable to provide feedback for this interview. Please try again with more detailed answers.</p>`;
}

This defensive approach ensures that no matter what the AI sends back, my application will never crash or display a broken UI.

Final Result

Final Thoughts

Building the AI Interviewer was an incredible learning experience. It taught me the practical realities of integrating with large language models, the importance of robust error handling, and the art of prompt engineering. If you’re a developer looking for a project that touches on every part of the modern tech stack, I can’t recommend building your own AI-powered tool enough.

You can check out the full source code on my GitHub here 👇:

https://github.com/praveen-sripati/ai-interviewer

Thanks for reading, and happy coding!

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter!
Follow @x

Practical Prompt Engineering with Google Gemini and Node.js

Praveen Sripati — Sat, 14 Jun 2025 09:27:19 +0000

Welcome back, developers! If you’ve just come from my previous post on As a Developer, Struggling with AI Prompts? Master AI Prompt Engineering Now, you’ve got the foundational knowledge down. You understand why clear instructions, context, and iterative refinement are crucial for getting desired responses from AI.

Now, it’s time to get our hands dirty. This post is your practical guide, a “codebook” filled with specific Node.js examples demonstrating how to apply those prompt engineering principles using the Google Gemini API. We’ll set up our environment and then dive into various techniques, showing you exactly how to craft effective prompts and integrate AI responses into your applications.

Let’s build!

Getting Started: Gemini & Node.js Setup

First things first, you’ll need a Google Cloud Project with the Gemini API enabled and an API key.

Enable the Gemini API: Head over to the Google AI Studio or the Google Cloud Console. Follow the steps to create an API key for the Gemini API.
Install the SDK: Open your terminal and run:

npm install @google/generative-ai dotenv

@google/generative-ai: This is the official Google Gemini Node.js SDK.
dotenv: A handy package to securely load your API key from a .env file.

3. Create a .env file: In the root of your project, create a file named .env and add your API key like so:

API_KEY=YOUR_GEMINI_API_KEY

Remember: Never commit your API keys directly into your source code!

4. Your Base Node.js Code: Create a file (e.g., gemini-codebook.js) and paste the following setup. This callGeminiApi function will be our wrapper for all the examples that follow.

// gemini-codebook.js
require('dotenv').config(); // Load environment variables

const { GoogleGenerativeAI } = require('@google/generative-ai');

const API_KEY = process.env.API_KEY;

if (!API_KEY) {
    console.error("API_KEY not found in .env file. Please create a .env file with API_KEY=YOUR_GEMINI_API_KEY");
    process.exit(1);
}

const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-pro" }); // Using gemini-pro for text tasks

/**
 * Calls the Google Gemini API with a given prompt and optional model parameters.
 * @param {string} prompt The text prompt to send to the AI.
 * @param {object} modelParams Optional parameters for the AI model (e.g., temperature, maxOutputTokens).
 * @returns {Promise<string>} The text response from the Gemini API.
 */
async function callGeminiApi(prompt, modelParams = {}) {
    try {
        const generationConfig = {
            temperature: modelParams.temperature || 0.7, // Default temperature
            maxOutputTokens: modelParams.maxOutputTokens || 2048, // Default max tokens
            // Add other parameters like topP, topK if needed here
        };

        console.log("\n--- Gemini API Call ---");
        console.log(`Prompt sent:\n'${prompt}'`);
        console.log(`Model Parameters: ${JSON.stringify(generationConfig)}`);

        const result = await model.generateContent(prompt, generationConfig);
        const response = await result.response;
        const text = response.text();

        console.log(`\nGemini Response:\n${text}`);
        return text;

    } catch (error) {
        console.error("Error calling Gemini API:", error);
        // Log more details if available, like error.response.candidates
        return `Error: ${error.message}`;
    }
}

Now, let’s explore individual prompt engineering techniques with runnable Node.js code snippets. You can add each of these async function blocks to your gemini-codebook.js file and then call them one by one in your main execution flow.

1. Clear and Specific Instructions:

Context: When I need to distill a large chunk of information into a digestible format, I ensure my prompt is incredibly direct about the desired output. This prevents the AI from giving me a lengthy essay when I just need the highlights.

async function exampleClearSpecificInstructions() {
    console.log("\n## 1. Clear and Specific Instructions (Summarization)");
    const longArticle = `Artificial intelligence (AI) has rapidly advanced in recent years, transforming various industries and aspects of daily life. From sophisticated natural language processing models that can generate human-like text to advanced computer vision systems capable of recognizing objects and faces, AI's capabilities continue to expand. However, along with its immense potential, AI also presents significant challenges, including ethical considerations, job displacement, and the need for robust regulatory frameworks. The future of AI hinges on addressing these concerns while harnessing its power for societal benefit.`;
    const promptSummary = `Summarize the following text about AI advancements in exactly 3 concise bullet points.
Text: "${longArticle}"
`;
    await callGeminiApi(promptSummary);
}

// To run this specific example, uncomment the line below:
// exampleClearSpecificInstructions();

2. Defining Output Format:

Context: In development, receiving structured data is paramount. If the AI’s response isn’t consistently formatted, it breaks my application. I explicitly ask for JSON so I can easily parse it into a JavaScript object.

async function exampleDefiningOutputFormat() {
    console.log("\n## 2. Defining Output Format (JSON Example)");
    const promptJson = `
Generate a JSON object for a hypothetical user profile.
The object should have the following keys: 'username' (string), 'id' (number), 'email' (string), and 'is_active' (boolean).
Example Data: Username 'dev_master', ID 12345, Email 'dev@example.com', Active status true.
`;
    const jsonResponse = await callGeminiApi(promptJson);
    try {
        const parsedJson = JSON.parse(jsonResponse);
        console.log("\nParsed JSON:", parsedJson);
        console.log(`Username: ${parsedJson.username}, ID: ${parsedJson.id}`);
    } catch (e) {
        console.error("Failed to parse JSON response:", e);
    }
}

// To run this specific example, uncomment the line below:
// exampleDefiningOutputFormat();

3. Few-Shot Prompting:

Context: When I need code or highly specific text output, simply asking isn’t always enough. I provide an example of the desired format — in this case, a JSDoc-commented function — to guide the AI to match that exact style. I also use a lower temperature here to reduce creativity and increase adherence to the pattern.

async function exampleFewShotPrompting() {
    console.log("\n## 3. Few-Shot Prompting (Code Generation Style)");
    const promptFewShotCode = `
Generate a simple JavaScript function for calculating the area of a rectangle.
Here's an example of how you should format the function:

// Example function for calculating circle area
/**
 * Calculates the area of a circle.
 * @param {number} radius The radius of the circle.
 * @returns {number} The area of the circle.
 */
function calculateCircleArea(radius) {
  return Math.PI * radius * radius;
}

// Now, generate the function for rectangle area:
`;
    await callGeminiApi(promptFewShotCode, { temperature: 0.3 }); // Lower temp for more predictable code
}

// To run this specific example, uncomment the line below:
// exampleFewShotPrompting();

4. Role-Playing / Persona:

Context: I often need explanations tailored for different audiences. By assigning a persona (e.g., “senior DevOps engineer”), I instruct the AI to adopt a specific tone and knowledge level, ensuring the explanation is appropriate and easy for the target audience to understand.

async function exampleRolePlayingPersona() {
    console.log("\n## 4. Role-Playing / Persona (Technical Explainer)");
    const promptPersona = `
You are a senior DevOps engineer explaining Docker containers to a junior developer.
Explain what Docker is and why it's useful for deploying applications, using simple, clear language.
`;
    await callGeminiApi(promptPersona);
}

// To run this specific example, uncomment the line below:
// exampleRolePlayingPersona();

5. Chain-of-Thought (CoT) Prompting

Context: For complex problems, especially those involving logic or calculations, I don’t just want the answer; I want to see the reasoning. Asking the AI to “show your step-by-step calculations and reasoning” improves the accuracy of the final result and helps me debug if the answer is off.

async function exampleChainOfThought() {
    console.log("\n## 5. Chain-of-Thought (CoT) Prompting (Problem Solving)");
    const promptCoT = `
A train leaves station A at 10:00 AM traveling at 60 km/h.
Another train leaves station B at 11:00 AM traveling at 80 km/h towards station A.
The distance between station A and station B is 400 km.
At what time will the two trains meet? Show your step-by-step calculations and reasoning clearly.
`;
    await callGeminiApi(promptCoT);
}

// To run this specific example, uncomment the line below:
// exampleChainOfThought();

6. Using Delimiters for Clarity

Context: When my prompts become lengthy, containing instructions, input data, and formatting requirements, they can get messy. Using clear delimiters like XML-like tags helps the AI distinguish between different parts of the prompt, ensuring it understands exactly what to do with each section.

async function exampleDelimitersForClarity() {
    console.log("\n## 6. Using Delimiters for Clarity (Multi-part Request)");
    const rawData = `Product: Laptop, Price: 1200, Category: Electronics, Stock: 50
Product: Keyboard, Price: 75, Category: Peripherals, Stock: 200
Product: Mouse, Price: 30, Category: Peripherals, Stock: 300`;

    const promptDelimited = `
<instructions>
Process the provided product data.
For each product, extract its name, price, and stock.
Then, generate a short summary for products with stock less than 100.
</instructions>

<data>
${rawData}
</data>

<output_format>
List the low-stock products in markdown bullet points, formatted as "Product Name (Stock: X)".
</output_format>
`;
    await callGeminiApi(promptDelimited);
}

// To run this specific example, uncomment the line below:
// exampleDelimitersForClarity();

Next Steps: Integrate and Iterate!

You’ve now got a practical set of examples for applying prompt engineering principles with the Google Gemini API in Node.js. The key from here is integration and iteration.

Integrate: Think about where AI can enhance your existing applications. Can it summarize user feedback, generate product descriptions, or provide real-time code suggestions?
Iterate: As you use these prompts in real-world scenarios, you’ll inevitably find room for improvement. Continue to test, evaluate, and refine your prompts based on the AI’s responses and your application’s needs.

Prompt engineering is an evolving skill, and the more you practice, the more intuitive it becomes. Go forth and build amazing things with AI!

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter!
Follow @x

Stop Wasting Time: Master AI Prompt Engineering Now

Praveen Sripati — Fri, 13 Jun 2025 12:57:55 +0000

When I’m sitting down to integrate an AI into an application, I follow a pretty consistent mental checklist. It’s all about guiding the AI, step by step.

1. Know Your AI (and Its Quirks)

Before I even type my first prompt, I try to understand the AI model itself. Is it a language model, an image generator, or something else? What kind of data was it trained on? Knowing its strengths (and more importantly, its weaknesses) helps me set realistic expectations. I also dig into the API documentation to see what parameters I can tweak — things like temperature (how creative or "safe" the response is) or max_tokens (how long the response can be). These are my knobs and dials for fine-tuning.

Treat your AI like a junior developer: give it clear instructions, context, and examples, and it’ll surprise you with what it can achieve.

2. Be Crystal Clear and Super Specific

This is the golden rule I live by. Vague prompts are a recipe for unpredictable results. I always ask myself: “Am I telling the AI exactly what I want?”

Explicit Instructions: Instead of “Write about climate change,” I’d write, “Summarize the key environmental impacts of climate change in 3 concise bullet points for a general audience.” See the difference? I’m telling it what to do, what topic, how many points, and for whom.
Define Output Format: If I need JSON, I ask for JSON. If I need Markdown, I specify Markdown. This is crucial for me because I’m usually processing the AI’s output programmatically. I’ll often say something like, “Provide a JSON object with name, age, and city fields."
Set Constraints: Need a short response? I’ll add “under 100 words.” No jargon? I’ll explicitly state, “Do not use technical jargon.”

The best prompts aren’t just questions; they’re precise contracts with the AI.

3. Provide Context and Examples

AI models aren’t mind-readers. The more context I give them, the better they perform.

Contextual Information: If I’m building a customer support bot, I’ll start the prompt with something like, “You are a customer support agent for a software company. The user is experiencing a login error with code ‘AUTH-001’.” This sets the stage.
Few-Shot Prompting: This is a powerful technique. I include a few input-output examples directly in my prompt. For instance, if I want a specific translation style, I’ll show it:

Translate English to French: 
English: Hello 
French: Bonjour 

English: Thank you 
French: Merci 

English: Good morning 
French: ---

This teaches the AI the pattern I expect.

Think of few-shot prompting as giving the AI a quick, personalized training session — right inside your prompt.

4. Leverage Advanced Techniques

For more complex tasks, I pull out some of my more advanced tricks:

Chain-of-Thought (CoT): If I need the AI to reason or solve a multi-step problem, I’ll ask it to “think step by step” or “show your reasoning.” This makes its process transparent and often leads to more accurate answers. For example, “Solve this math problem. Show your step-by-step reasoning: (10 + 5) * 2.”
Role-Playing: Sometimes, I need the AI to adopt a specific persona. If I need a technical explanation, I’ll tell it, “Act as a senior software engineer.” This helps the AI use appropriate language and knowledge.
Delimiters: For longer prompts with different sections (instructions, context, input), I use clear separators like ###, ---, or even XML-like tags (, ). This helps the AI understand the structure of my prompt.

Chain-of-Thought isn’t just about getting the right answer; it’s about making the AI’s logic traceable and debuggable.

5. My Iterative Workflow (Test, Refine, Repeat!)

This is where the rubber meets the road. Prompt engineering is almost never a one-shot deal.

Draft: I start with a simple prompt.
Test: I send it to the AI API and look at the response.
Evaluate: Did it meet my expectations? Is the format right? Is the content accurate?
Refine: Based on the evaluation, I tweak the prompt. Maybe I need to add more context, clarify an instruction, or change a parameter like temperature.
Repeat: I keep going back to step 2 until I’m satisfied. It’s an ongoing process of trying, learning, and improving.

Prompt engineering is less about finding the magic words and more about embracing the iterative loop.”

6. Mind the Ethics and Bias

As a developer, I also keep ethical considerations in mind. AI models can inherit biases from their training data, so I try to craft prompts that encourage fair, inclusive, and unbiased responses. I also think about safety guardrails to prevent the AI from generating inappropriate or harmful content.

While understanding these principles is crucial, I know that for developers, seeing code in action makes all the difference. That’s why I’ve put together a dedicated follow-up post. In Practical Prompt Engineering with Google Gemini and Node.js, I dive deep into practical Node.js examples using the Google Gemini API, showing you exactly how to implement these techniques in your applications. Head over there to start building!

Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter!
Follow @x

DEV Community: Praveen Sripati

[Boost]

Introducing Nexus: A Polished Dashboard Built with Vite, React, and Shadcn/ui

Introducing Nexus: A Polished Dashboard Built with Vite, React, and Shadcn/ui

What I Built

Demo

Journey

The Process & Key Decisions

A Choice I'm Proud Of: The Custom Theme Provider

The Passwordless Future: A Security Upgrade or a Costly Mistake?

So, What is Passwordless Authentication?

What Does This Look Like in Code?

Client-Side

Server-Side

The Good vs. The Bad: A Quick Rundown

The “Good” 👍

The “Bad” 👎

Is It Really Safer?

Micro-Frontends Explained: Is It Time to Break Up Your Monolith?

What is a Monolithic Front-End?

What is a Micro-Frontend?

Why Micro-Frontends (The Pros)

Why You Might Want to Wait (The Cons)

So, Should You Switch?

References to deep dive:

Books

Map, Set, Go! A Quick Guide to Modern JavaScript Data Structures

Map vs. Object

Map - Quick Reference

Set vs. Array

Set - Quick Reference

How I Built a Multi-Theme System using New Tailwind CSS v4 & React

Tailwind v4’s New Philosophy

Laying the Foundation:

The useTheme Hook

Building an Interface

App Screenshots

Final Thoughts

I Stole This Awesome Ripple Effect from Ant Design (And You Can Too!).

Step 1: Getting the Basics Down

Step 2: Using View Transitions

Step 3: Making the Ripple!

Final output:

And That’s It!

The Hidden Risk in Installing Dependencies (And How to Avoid It)

1. Security

2. Maintenance & Community

3. Documentation

4. Dependencies

5. Licensing

6. Performance & Size

7. Compatibility

How I Built an AI That Interviews You using Google Gemini API and Node.js

The Big Idea

The Tech Deep Dive

Tuning the AI for Creativity

Instructing the AI

Safely Rendering AI-Generated HTML

Practical Prompt Engineering with Google Gemini and Node.js

Getting Started: Gemini & Node.js Setup

1. Clear and Specific Instructions:

2. Defining Output Format:

3. Few-Shot Prompting:

4. Role-Playing / Persona:

5. Chain-of-Thought (CoT) Prompting

6. Using Delimiters for Clarity

Next Steps: Integrate and Iterate!

Stop Wasting Time: Master AI Prompt Engineering Now

1. Know Your AI (and Its Quirks)

2. Be Crystal Clear and Super Specific

3. Provide Context and Examples

4. Leverage Advanced Techniques

5. My Iterative Workflow (Test, Refine, Repeat!)

6. Mind the Ethics and Bias

`Map` vs. `Object`

`Map` - Quick Reference

`Set` vs. `Array`

`Set` - Quick Reference

The `useTheme` Hook