
# Beyond 'Write me a function': Mastering Prompt Engineering for Software Development

If you're like most developers, you've probably used ChatGPT or Claude to help write code, debug issues, or generate documentation. Maybe you've had some amazing results. Maybe you've also had some frustratingly useless ones.

The difference? **How you prompt.**

After completing Dr. Jules White's _Prompt Engineering for ChatGPT_ course on Coursera, I realized I'd been leaving massive productivity gains on the table. This isn't about replacing developers—it's about becoming a better one by knowing how to communicate effectively with AI tools.

Let me share what actually works.

## The Core Problem: We're Treating AI Like Google

Most developers approach AI the same way they approach Stack Overflow: ask a quick question, hope for a good answer, maybe copy-paste some code.

**That's the wrong mental model.**

AI tools are more like pair programming with a junior dev who has read the entire internet but needs clear direction. The better your instructions, the better the output.

## The Five Patterns That Changed My Workflow

Dr. White's course breaks down prompt engineering into actionable patterns. Here are the ones that made the biggest impact on my daily work:

### 1. **Persona Pattern: Give AI a Role**

Instead of generic prompts, tell the AI _who_ it should be.

**Before:**

```
Write unit tests for this React component
```

**After:**

```
You are a senior front-end engineer specializing in React Testing Library
and Jest. Write comprehensive unit tests for this component that cover:
- All user interactions
- Edge cases
- Accessibility concerns
- Performance implications

[paste component code]
```

The difference? The AI now knows the context, expected depth, and quality bar. I've used this pattern for everything from code reviews to architecture discussions.

### 2. **Template Pattern: Create Reusable Structures**

This one's gold for documentation and repetitive tasks.

**Example for API Documentation:**

```
Create API documentation using this template:

## Endpoint: [name]
**Method:** [HTTP method]
**Path:** [route]

### Purpose
[What this endpoint does]

### Request Parameters
[Table of parameters with type, required/optional, description]

### Response Format
[JSON structure with explanations]

### Example Request
[Code example]

### Example Response
[Code example]

### Error Codes
[Possible errors and meanings]

Now document this endpoint: [paste code]
```

I've built templates for:

- Pull request descriptions
- Technical design docs
- Bug reports
- Code review feedback
- Migration plans

Save them in your notes. Reuse them constantly.

### 3. **Recipe Pattern: Multi-Step Instructions**

When you need AI to follow a specific process, lay out the steps explicitly.

**For refactoring legacy code:**

```
Follow these steps to refactor this Angular component to React:

1. Identify all state management and list it
2. Map Angular lifecycle hooks to React equivalents
3. Convert the template to JSX, preserving all logic
4. Identify any Angular-specific services and suggest React alternatives
5. Add TypeScript types for all props and state
6. Suggest testing strategy for the converted component

Component code:
[paste code]
```

This pattern works incredibly well for debugging, migration planning, and optimization tasks.

### 4. **Reflection Pattern: Make AI Double-Check Itself**

Add this to the end of complex prompts:

```
After providing your solution, reflect on:
- What assumptions did you make?
- What edge cases might break this?
- What would a senior engineer critique about this approach?
- Are there performance implications I should know about?
```

This single addition has caught so many subtle bugs and architectural issues before they hit my codebase.

### 5. **Few-Shot Learning: Show Examples**

For style-specific needs, show the AI what you want.

**For code style consistency:**

```
I need you to write TypeScript following this exact style:

Example 1:
// Show your preferred pattern

Example 2:
// Show another example

Now write a [description] following the same patterns.
```

This is especially useful for maintaining consistency across a codebase or matching team conventions.

## Real-World Applications in My Daily Work

Here's how I actually use these patterns at Dick's Sporting Goods:

### **Sprint Planning Prep**

```
You are a technical lead reviewing a feature request. Analyze this requirement
and provide:

1. Technical complexity assessment (1-5 scale with reasoning)
2. Potential technical risks or unknowns
3. Dependencies on other systems or teams
4. Suggested breakdown into smaller tasks
5. Questions to ask the product owner

Requirement: [paste story]
```

### **Code Review Assistance**

```
Review this pull request as a senior front-end engineer focusing on:
- Performance implications for a high-traffic e-commerce site
- Accessibility issues
- Potential race conditions or edge cases
- Redux best practices
- Opportunities for reusability

[paste diff]
```

### **Documentation Generation**

```
Using the template I provided earlier, generate comprehensive documentation
for this utility function. Focus on real-world use cases a front-end developer
would encounter in an e-commerce platform.

[paste code]
```

## The Prompts I Keep in My Notion

I maintain a database of prompt templates in Notion for quick access:

- **Code Review Checklist** - Catches common issues before I even submit PRs
- **Technical Design Doc Generator** - Structures my architecture thinking
- **Debug Assistant** - Walks through systematic debugging steps
- **Performance Analysis** - Analyzes bundle size, render performance, etc.
- **Refactoring Planner** - Maps out safe refactoring strategies

Each template is a combination of persona, recipe, and reflection patterns.

## Advanced Technique: Chain of Thought Prompting

For complex problems, explicitly ask the AI to show its reasoning:

```
Explain your thought process step-by-step as you solve this problem:

Problem: [describe complex architectural decision]

Walk me through:
1. How you're breaking down the problem
2. What trade-offs you're considering
3. Why you're choosing one approach over another
4. What you'd do differently at different scales
```

This is incredibly valuable for learning and for validating architectural decisions.

## What Doesn't Work (Lessons Learned)

**❌ Vague prompts:** "Make this better" or "Optimize this code"

- AI needs specific criteria for "better"

**❌ Assuming context:** AI doesn't know your codebase, team conventions, or business rules

- Always provide relevant context explicitly

**❌ One-and-done prompts:** Expecting perfect output on the first try

- Iterate. Refine. Provide feedback.

**❌ Blind copy-paste:** Not reviewing or understanding the output

- AI makes mistakes. You're still the engineer.

## The Mindset Shift

The biggest takeaway from Dr. White's course wasn't a specific technique—it was a mindset shift:

**AI is a thought partner, not a code generator.**

Use it to:

- Explore architectural options
- Challenge your assumptions
- Generate test cases you didn't think of
- Document your decisions
- Learn new patterns and approaches

The best code I write with AI assistance is code I fully understand and could have written myself—AI just helped me get there faster and with fewer blind spots.

## Start Small, Build Habits

Don't try to revolutionize your workflow overnight. Start with:

1. **Pick one pattern** - I'd suggest the Persona Pattern
2. **Choose one repetitive task** - Documentation, code reviews, whatever drains your time
3. **Create a template** - Refine it over a week or two
4. **Save it** - Make it easily accessible
5. **Iterate** - Improve based on results

After a month, you'll wonder how you worked without it.

## Resources & Next Steps

- **Dr. Jules White's Course:** [Prompt Engineering for ChatGPT on Coursera](https://www.coursera.org/learn/prompt-engineering)
- **Prompt Engineering Guide:** [promptingguide.ai](https://www.promptingguide.ai/)

## Final Thought

I've been writing code for over 10 years. AI hasn't made me obsolete—it's made me more effective. The developers who thrive in the next decade won't be the ones who resist AI or blindly depend on it.

They'll be the ones who learn to wield it like a precision tool.

And that starts with better prompts.

---

_What's your experience with AI-assisted development? What patterns have you found effective? I'd love to hear about it—connect with me on [LinkedIn](https://linkedin.com/in/holden-monroe)._


Learn how to level up your AI-assisted development with proven prompt engineering techniques from Dr. Jules White's course

Beyond 'Write me a function': Mastering Prompt Engineering for Software Development


React Server Components (RSC) represent one of the most significant shifts in React's architecture since hooks. Let's explore what they are, why they matter, and how to use them effectively.

## What Are Server Components?

Server Components are React components that render exclusively on the server. Unlike traditional server-side rendering (SSR), which sends HTML and then hydrates it on the client, Server Components never send their code to the browser.

```tsx
// app/UserProfile.tsx
// This is a Server Component by default in Next.js 13+
async function UserProfile({ userId }: { userId: string }) {
  // This database call happens on the server
  const user = await db.user.findUnique({ where: { id: userId } });

  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  );
}
```

## Key Benefits

### 1. Zero Bundle Impact

Server Components don't add to your JavaScript bundle. That expensive data-fetching library? Use it freely in Server Components without worrying about bundle size.

### 2. Direct Backend Access

Access databases, file systems, and other server-only resources directly in your components. No need for API routes as an intermediary.

### 3. Automatic Code Splitting

React automatically splits Server and Client Components, sending only what's needed to the browser.

## When to Use Server vs Client Components

**Use Server Components for:**

- Data fetching
- Accessing backend resources
- Keeping sensitive information on the server
- Reducing client-side JavaScript

**Use Client Components for:**

- Interactivity (onClick, onChange, etc.)
- Browser APIs (localStorage, geolocation)
- State management (useState, useContext)
- Effects (useEffect)

## Real-World Example

Here's a practical example combining both:

```tsx
// app/dashboard/page.tsx (Server Component)
import { AnalyticsChart } from "./AnalyticsChart";

async function DashboardPage() {
  // Fetch data on the server
  const analytics = await fetchAnalytics();

  return (
    <div>
      <h1>Dashboard</h1>
      {/* Pass data to Client Component */}
      <AnalyticsChart data={analytics} />
    </div>
  );
}

// app/dashboard/AnalyticsChart.tsx (Client Component)
("use client");

import { useState } from "react";
import { LineChart } from "recharts";

export function AnalyticsChart({ data }: { data: AnalyticsData }) {
  const [timeRange, setTimeRange] = useState("7d");

  return (
    <div>
      <select value={timeRange} onChange={(e) => setTimeRange(e.target.value)}>
        <option value="7d">Last 7 days</option>
        <option value="30d">Last 30 days</option>
      </select>
      <LineChart data={data} />
    </div>
  );
}
```

## Common Pitfalls

### 1. Trying to Use Client-Only Features

```tsx
// ❌ This won't work in a Server Component
function ServerComponent() {
  const [count, setCount] = useState(0); // Error!
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// ✅ Use 'use client' directive
("use client");
function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

### 2. Passing Non-Serializable Props

Server Components can only pass serializable props to Client Components. No functions, class instances, or Date objects.

```tsx
// ❌ Can't pass functions
<ClientComponent onClick={() => console.log('hi')} />

// ✅ Define the handler in the Client Component
<ClientComponent />
```

## Conclusion

React Server Components fundamentally change how we think about React applications. By default-ing to server rendering and selectively opting into client interactivity, we can build faster, more efficient applications.

The mental model shift takes time, but the benefits—especially in performance and developer experience—make it worthwhile for modern React development.


Deep dive into React Server Components, understanding when to use them, and how they fit into modern React architecture

React Server Components: A Practical Guide


TypeScript has become essential for building scalable React applications. Let's explore some advanced patterns that go beyond basic typing.

## Discriminated Unions for Component Props

One of the most powerful patterns for React components is using discriminated unions to create type-safe prop variants.

```typescript
type ButtonProps =
  | {
      variant: 'primary'
      onClick: () => void
      href?: never
    }
  | {
      variant: 'link'
      href: string
      onClick?: never
    }

function Button(props: ButtonProps) {
  if (props.variant === 'primary') {
    // TypeScript knows onClick exists here
    return <button onClick={props.onClick}>Click me</button>
  }

  // TypeScript knows href exists here
  return <a href={props.href}>Link</a>
}

// ✅ Valid
<Button variant="primary" onClick={() => {}} />
<Button variant="link" href="/about" />

// ❌ TypeScript error - can't mix props
<Button variant="primary" href="/about" />
```

## Generic Components

Generic components provide flexibility while maintaining type safety.

```typescript
interface SelectProps<T> {
  options: T[];
  value: T;
  onChange: (value: T) => void;
  getLabel: (option: T) => string;
  getValue: (option: T) => string;
}

function Select<T>({
  options,
  value,
  onChange,
  getLabel,
  getValue,
}: SelectProps<T>) {
  return (
    <select
      value={getValue(value)}
      onChange={(e) => {
        const selected = options.find(
          (opt) => getValue(opt) === e.target.value
        );
        if (selected) onChange(selected);
      }}
    >
      {options.map((option) => (
        <option key={getValue(option)} value={getValue(option)}>
          {getLabel(option)}
        </option>
      ))}
    </select>
  );
}

// Usage with full type inference
type User = { id: number; name: string };

<Select
  options={users}
  value={selectedUser}
  onChange={setSelectedUser}
  getLabel={(user) => user.name} // TypeScript infers 'user' is User
  getValue={(user) => user.id.toString()}
/>;
```

## Utility Types for Props

Create reusable utility types to enhance component prop definitions.

```typescript
// Make certain props required
type RequireProps<T, K extends keyof T> = T & Required<Pick<T, K>>;

interface FormProps {
  onSubmit?: (data: FormData) => void;
  onError?: (error: Error) => void;
  onSuccess?: () => void;
}

// Require onSubmit
type RequiredFormProps = RequireProps<FormProps, "onSubmit">;

// Exclude props
type Modify<T, R> = Omit<T, keyof R> & R;

interface ButtonBaseProps {
  variant: "primary" | "secondary";
  size: "small" | "medium" | "large";
  disabled?: boolean;
}

// Override the variant prop
type IconButtonProps = Modify<
  ButtonBaseProps,
  {
    variant: "icon";
    icon: React.ReactNode;
  }
>;
```

## Conditional Types for Component Variants

Use conditional types to create intelligent component APIs.

```typescript
type InputProps<T extends 'text' | 'number'> = {
  type: T
  value: T extends 'number' ? number : string
  onChange: (value: T extends 'number' ? number : string) => void
}

function Input<T extends 'text' | 'number'>(props: InputProps<T>) {
  return (
    <input
      type={props.type}
      value={props.value}
      onChange={(e) => {
        const val =
          props.type === 'number'
            ? Number(e.target.value)
            : e.target.value
        props.onChange(val as any) // Type assertion needed here
      }}
    />
  )
}

// ✅ Type-safe usage
<Input type="number" value={42} onChange={(val: number) => {}} />
<Input type="text" value="hello" onChange={(val: string) => {}} />

// ❌ TypeScript errors
<Input type="number" value="hello" onChange={(val: number) => {}} />
```

## Type-Safe Event Handlers

Create type-safe event handler utilities.

```typescript
type EventHandler<T = Element, E = Event> = (
  event: E & { currentTarget: T }
) => void;

type ChangeHandler<T = HTMLInputElement> = EventHandler<
  T,
  React.ChangeEvent<T>
>;

type ClickHandler<T = HTMLButtonElement> = EventHandler<T, React.MouseEvent<T>>;

// Usage
const handleChange: ChangeHandler = (event) => {
  // event.currentTarget is fully typed as HTMLInputElement
  console.log(event.currentTarget.value);
};

const handleClick: ClickHandler<HTMLAnchorElement> = (event) => {
  // event.currentTarget is typed as HTMLAnchorElement
  console.log(event.currentTarget.href);
};
```

## Strict Null Checks with Optional Chaining

Combine TypeScript's strict null checks with optional chaining for safer code.

```typescript
interface User {
  profile?: {
    address?: {
      city?: string;
    };
  };
}

function UserCity({ user }: { user: User }) {
  // ✅ Safe access with optional chaining
  const city = user.profile?.address?.city ?? "Unknown";

  // ❌ Without strict null checks, this could crash
  // const city = user.profile.address.city

  return <div>City: {city}</div>;
}
```

## Conclusion

These advanced TypeScript patterns help build more maintainable and type-safe React applications. While they may seem complex at first, they become invaluable as your codebase grows.

The key is finding the right balance—use advanced types where they add value, but don't over-engineer simple components. TypeScript should enhance your development experience, not hinder it.


Explore advanced TypeScript patterns that improve type safety, developer experience, and code maintainability in React applications

Advanced TypeScript Patterns for React


Core Web Vitals have become crucial metrics for both user experience and SEO. Let's explore practical strategies to optimize each metric.

## Understanding the Core Web Vitals

Google's Core Web Vitals consist of three key metrics:

1. **Largest Contentful Paint (LCP)**: Loading performance
2. **First Input Delay (FID)**: Interactivity (replaced by INP in 2024)
3. **Cumulative Layout Shift (CLS)**: Visual stability

## Optimizing LCP (Largest Contentful Paint)

**Goal: Under 2.5 seconds**

### 1. Optimize Images

The largest contentful paint element is often an image. Here's how to optimize:

```tsx
import Image from "next/image";

function Hero() {
  return (
    <div className="hero">
      <Image
        src="/hero.jpg"
        alt="Hero image"
        width={1920}
        height={1080}
        priority // Preload above-the-fold images
        placeholder="blur" // Show blur-up effect
        blurDataURL="data:image/jpeg;base64,..." // Tiny base64 preview
      />
    </div>
  );
}
```

### 2. Use Resource Hints

```tsx
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {/* Preconnect to external domains */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />

        {/* Preload critical resources */}
        <link
          rel="preload"
          href="/fonts/inter.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="anonymous"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}
```

### 3. Optimize Server Response Time

```typescript
// Use caching headers
export async function GET(request: Request) {
  const data = await fetchData();

  return new Response(JSON.stringify(data), {
    headers: {
      "Content-Type": "application/json",
      "Cache-Control": "public, max-age=3600, s-maxage=86400",
    },
  });
}
```

## Optimizing FID / INP (Interactivity)

**Goal: Under 200ms for FID, under 200ms for INP**

### 1. Code Splitting

```tsx
import dynamic from "next/dynamic";

// Lazy load heavy components
const AnalyticsDashboard = dynamic(
  () => import("@/components/AnalyticsDashboard"),
  {
    loading: () => <DashboardSkeleton />,
    ssr: false, // Don't render on server if not needed
  }
);

function Dashboard() {
  return (
    <div>
      <Header />
      <AnalyticsDashboard />
    </div>
  );
}
```

### 2. Optimize Event Handlers

```tsx
import { useCallback } from "react";
import { debounce } from "lodash";

function SearchInput() {
  // Debounce expensive operations
  const handleSearch = useCallback(
    debounce((query: string) => {
      // Expensive search operation
      performSearch(query);
    }, 300),
    []
  );

  return (
    <input
      type="search"
      onChange={(e) => handleSearch(e.target.value)}
      placeholder="Search..."
    />
  );
}
```

### 3. Use Web Workers for Heavy Computations

```typescript
// worker.ts
self.addEventListener("message", (e) => {
  const result = expensiveCalculation(e.data);
  self.postMessage(result);
});

// component.tsx
useEffect(() => {
  const worker = new Worker("/worker.js");

  worker.postMessage(data);
  worker.onmessage = (e) => {
    setResult(e.data);
  };

  return () => worker.terminate();
}, [data]);
```

## Optimizing CLS (Cumulative Layout Shift)

**Goal: Under 0.1**

### 1. Always Include Image Dimensions

```tsx
// ❌ Causes layout shift
<img src="/photo.jpg" alt="Photo" />

// ✅ Reserves space
<img
  src="/photo.jpg"
  alt="Photo"
  width="800"
  height="600"
/>

// ✅ Even better with Next.js Image
<Image
  src="/photo.jpg"
  alt="Photo"
  width={800}
  height={600}
/>
```

### 2. Reserve Space for Dynamic Content

```css
/* Reserve space for ads or dynamic content */
.ad-container {
  min-height: 250px; /* Expected ad height */
  background: #f0f0f0;
}

/* Use aspect ratio for responsive elements */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}
```

### 3. Avoid Inserting Content Above Existing Content

```tsx
// ❌ Inserts content, causing shift
function Feed() {
  return (
    <>
      {newPosts.map((post) => (
        <Post key={post.id} {...post} />
      ))}
      {existingPosts.map((post) => (
        <Post key={post.id} {...post} />
      ))}
    </>
  );
}

// ✅ Show notification instead
function Feed() {
  const [newPosts, setNewPosts] = useState([]);

  return (
    <>
      {newPosts.length > 0 && (
        <button onClick={loadNewPosts}>
          {newPosts.length} new posts available
        </button>
      )}
      {existingPosts.map((post) => (
        <Post key={post.id} {...post} />
      ))}
    </>
  );
}
```

## Monitoring Core Web Vitals

Use the `web-vitals` library to track metrics in production:

```typescript
// app/layout.tsx
"use client";

import { useReportWebVitals } from "next/web-vitals";

export function WebVitals() {
  useReportWebVitals((metric) => {
    // Send to analytics
    gtag("event", metric.name, {
      value: Math.round(
        metric.name === "CLS" ? metric.value * 1000 : metric.value
      ),
      metric_id: metric.id,
      metric_value: metric.value,
      metric_delta: metric.delta,
    });
  });

  return null;
}
```

## Testing Tools

1. **Chrome DevTools** - Lighthouse panel for local testing
2. **PageSpeed Insights** - Real-world field data
3. **Web Vitals Chrome Extension** - Real-time monitoring
4. **WebPageTest** - Detailed waterfall analysis

## Conclusion

Optimizing Core Web Vitals requires a holistic approach to performance. Focus on the metrics that matter most for your users:

- Fast loading (LCP)
- Quick interactivity (FID/INP)
- Visual stability (CLS)

These optimizations not only improve user experience but also boost SEO rankings. Monitor continuously and iterate based on real-world data.

Remember: Perfect scores aren't the goal—providing a fast, smooth experience for your users is.


Practical strategies for optimizing Core Web Vitals—LCP, FID, and CLS—to improve user experience and SEO rankings

Blog

Beyond 'Write me a function': Mastering Prompt Engineering for Software Development

React Server Components: A Practical Guide

Advanced TypeScript Patterns for React

Mastering Core Web Vitals: A Performance Guide