Forem: Muhammad Usman

Auto-Configuring AI Agents Based on Your Codebase (AutoSkills)

Muhammad Usman — Wed, 29 Apr 2026 17:19:51 +0000

“Why does my AI assistant still not understand my project?”

That was me—after spending hours tweaking prompts, installing “skill packs,” and trying to make my AI coding tools behave like a senior dev instead of a confused intern.

Sound familiar?

😩 The Problem Nobody Talks About

Modern AI dev tools promise a lot… but in reality:

You still configure everything manually
You guess which prompts/skills you need
You repeat the same setup for every new project

And worst of all?

👉 Your AI still doesn’t really understand your codebase.

🤯 The Shift: Let Your Codebase Configure the AI

I recently came across AutoSkills, and it flips the entire workflow:

Instead of telling your AI what your stack is…

👉 It reads your project and configures itself.

No prompt hunting. No manual setup.

⚡ One Command Setup

npx autoskills

That’s the whole setup.

No config files. No onboarding docs. No yak-shaving.

🔍 What It Actually Does

When you run it, AutoSkills:

Scans your project (package.json, configs, etc.)
Detects your stack (React, Next.js, Node, etc.)
Matches relevant AI “skills”
Installs them locally with verification

So instead of this:

“Hey AI, this is a Next.js app using Prisma and Tailwind…”

Your AI already knows.

🧠 Why This Feels Different

Most tools today rely on prompt engineering.

AutoSkills moves you toward:

✅ Context engineering

Your repository becomes the source of truth.

That’s a big deal.

Because the real bottleneck in AI coding isn’t capability…

👉 It’s context.

🛠️ Real Example

In one of my projects:

Next.js
Prisma
Tailwind

Normally I’d spend time:

Installing prompt packs
Tweaking configs
Testing outputs

With AutoSkills?

It detected everything
Installed the right skills
My AI responses immediately improved

No iteration loop. No guesswork.

🔐 Not Just Convenience — Also Safer

One thing I didn’t expect:

Skills come from a curated registry
Files are verified before installation

That reduces the risk of pulling random, untrusted prompt configs from the internet.

⏱️ Before vs After

Before

30–60 minutes setup per project
Inconsistent AI results
Constant tweaking

After

1 command
Works immediately
Adapts to your stack

🚀 Bigger Picture

This is part of a larger shift happening in AI tooling:

❌ Manual prompt setup
❌ Static configurations

➡️

✅ Automatic context extraction
✅ Self-configuring AI systems

AutoSkills is an early glimpse of that future.

🔗 Try It Yourself

👉 https://www.autoskills.sh/

npx autoskills

💬 Let’s Discuss

Curious what others think:

Are you still manually configuring your AI tools?
Have you found a better workflow?
Do you trust auto-configured AI setups?

Drop your thoughts 👇

Introducing Prompt Master: A Structured Prompt Engine That Runs Entirely in Prompt Space

Muhammad Usman — Tue, 28 Apr 2026 18:00:47 +0000

The Problem

If you’re working with LLMs, this probably feels familiar:

Prompts start simple, then grow messy
Outputs become inconsistent
You keep tweaking wording without clear results

At some point, prompting stops being engineering and turns into guesswork.

What Prompt Master Is

Prompt Master is a structured prompt engine delivered as a skill.

It helps you turn vague instructions into:

Clear intent
Defined constraints
Structured outputs

And it does this entirely in prompt space.

No backend
No database
No build step

What It Actually Does (Practical View)

Instead of writing prompts like this:

Make this API better

Prompt Master transforms it into something like:

Task: Improve REST API design
Constraints: Must support pagination, auth, and rate limiting
Output: Endpoint structure + request/response examples

That shift gives you:

More predictable results
Easier iteration
Outputs you can actually use

Installation

Install the skill:

npx skills add smusman437/prompt-master

Repository:

https://github.com/smusman437/prompt-master

How It Works

Prompt Master is driven by three core files:

SKILL.md
references/template-architectures.md
references/credit-killing-patterns.md

SKILL.md

Defines how the system executes prompts

template-architectures.md

Contains reusable prompt structures

credit-killing-patterns.md

Documents patterns that degrade output quality

Usage Examples

1) Natural Invocation

Design a scalable REST API for a task manager using Prompt Master

What happens:

Task gets structured
Template is applied
Output becomes organized

2) Explicit Invocation

/prompt-master
Task: Design a scalable REST API for a task manager
Constraints: Must support multi-tenant usage
Output: Architecture + endpoint design

Use this when you want maximum control and consistency.

3) Repair Mode

/prompt-master repair
Prompt: "Make this app better"

You’ll get:

A clarified prompt
Missing constraints identified
A structured rewrite

4) Decompiler Mode

/prompt-master decompile
Output:
[Paste a high-quality AI response here]

This helps you:

Extract structure
Understand why it worked
Reuse the pattern

Benefits for Developers

Predictable outputs → Less randomness
Faster iteration → Less trial and error
Debuggable prompts → Identify issues quickly
Reusable patterns → Stop starting from scratch

Benefits for Teams

Shared standards → Consistent prompting style
Better collaboration → Prompts are readable
Less tribal knowledge → Patterns live in code
Consistent quality → Across projects and contributors

Common Mistakes Prompt Master Prevents

Vague instructions like “make it better”
Missing constraints or scope
Unstructured outputs
Mixing multiple intents in one prompt
Hidden assumptions

Quick Start Checklist

[ ] Install the skill

npx skills add smusman437/prompt-master

[ ] Try a natural prompt
[ ] Try /prompt-master
[ ] Run repair on a weak prompt
[ ] Run decompile on a strong output
[ ] Explore template architectures

When to Use It

Use Prompt Master when:

Prompts are getting complex
You need consistent outputs
You’re working in a team
Output quality matters

Skip it for quick, throwaway prompts.

Final Thoughts

Prompt Master is not another layer in your stack.

It’s a structured way to think about prompting, encoded directly into how you interact with the model.

That means:

No setup overhead
No infrastructure
Just better prompts

Try It

npx skills add smusman437/prompt-master

https://github.com/smusman437/prompt-master

If it’s useful:

Star the repo
Try it in real workflows
Share feedback

That’s how it improves.

Prompt Master: A Structured Prompt Engine for Claude and Cursor

Muhammad Usman — Tue, 28 Apr 2026 13:03:58 +0000

If you use AI tools daily, you’ve likely run into this:

Good prompts are hard to reproduce
Weak prompts waste time and credits
Long prompts drift, lose constraints, and produce inconsistent output

Prompt Master is a lightweight solution to that problem.

It’s a prompt-engineering system that runs entirely in prompt space—no backend, no services, no infrastructure.

👉 Repo: http://github.com/smusman437/prompt-master

What makes this different?

Most prompt tools hide logic in apps, APIs, or pipelines.

Prompt Master does the opposite:

Everything is transparent
Everything is editable
Everything lives in simple files

SKILL.md
references/template-architectures.md
references/credit-killing-patterns.md

There’s no “magic source” or external code dependency—the system works entirely through structured prompting logic defined inside these files.

What Prompt Master actually does

It acts like a decision engine for prompts.

You give it a rough request like:

Write me a prompt for Cursor to refactor an auth module.

It returns a clean, tool-specific, production-ready prompt.

How it works (under the hood)

Before generating anything, Prompt Master silently structures your request across 9 dimensions:

Task
Target tool
Output format
Constraints
Input
Context
Audience
Success criteria
Examples

If key information is missing, it asks up to 3 focused questions.

Then it:

Selects an internal template
Applies tool-specific rules (Claude, Cursor, GPT, etc.)
Reorders and strengthens constraints
Runs a verification pass
Outputs a single usable prompt

Why this approach matters

Most prompt failures come from predictable issues:

Constraints appear too late
Target model/tool is unclear
Instructions are too generic
Prompt style doesn’t match model behavior
Bad prompts get reused instead of fixed

Prompt Master fixes this by enforcing structure + validation before output.

Key capabilities

Structured intent extraction

Prompts are complete without becoming bloated.

Minimal clarification

Only asks questions when necessary (max 3).

Tool-aware generation

Adapts prompts for:

Claude
GPT
Cursor
Gemini
Coding environments
Reasoning models

Repair mode

Turn weak prompts into production-ready ones without changing intent.

Decompiler mode

Break large prompts into components
Adapt prompts across tools
Clean up messy prompt chains

Built-in quality checks

Every output is validated for:

Explicit target tool
Constraints early in the prompt
Strong directive language (MUST, NEVER, REQUIRED)
Removal of ineffective patterns
Proper handling of reasoning models

Important clarification (missing in most posts)

One common confusion:

“Where does Prompt Master get its logic/code from?”

Answer:
It doesn’t fetch logic from anywhere.

No external API
No hidden backend
No training pipeline

All behavior comes from:

SKILL.md → defines system behavior
template-architectures.md → defines structure patterns
credit-killing-patterns.md → defines what to avoid

That’s the entire engine.

Installation (quick version)

Claude

Upload the repo as a skill
Or place it in your local skills directory

Cursor (recommended)

mkdir -p ".cursor/skills/prompt-master/references"
cp "SKILL.md" ".cursor/skills/prompt-master/SKILL.md"
cp "references/template-architectures.md" ".cursor/skills/prompt-master/references/template-architectures.md"
cp "references/credit-killing-patterns.md" ".cursor/skills/prompt-master/references/credit-killing-patterns.md"

Reload Cursor → done.

How to use it

Natural:

Write me a prompt for Cursor to refactor an auth module.

Slash command:

/prompt-master Write me a prompt for Cursor to refactor an auth module.

Repair:

/prompt-master repair:
"Help me make this code better quickly."

Decompile:

/prompt-master decompile:
Analyze and split this long prompt for Claude.

What problems it solves (practically)

Eliminates vague prompts
Forces clear structure
Aligns prompts with the target tool
Reduces iteration cycles
Makes prompts reusable across teams

Why developers might care

This isn’t just a prompt helper.

It’s closer to:

👉 “Prompt linting + formatting + compilation”

You start treating prompts like:

Code
Reviewable artifacts
Reusable assets

Final thoughts

Prompt Master is simple by design—but that’s the point.

No infrastructure.
No hidden logic.
No abstraction layers.

Just a clean, inspectable system for generating better prompts consistently.

If you already use Claude or Cursor heavily, this can help reduce trial-and-error and make your prompting workflow far more predictable.

How I Reduced a Video from 137MB to 29MB Using FFmpeg (Without Killing Quality)

Muhammad Usman — Tue, 28 Apr 2026 07:27:31 +0000

If you're shipping videos on the web, file size matters—a lot. Large videos slow down page loads, hurt performance, and burn bandwidth.

I recently optimized a video and reduced it from 137MB to just 29MB (~79% smaller) using a single FFmpeg command.

Here’s exactly what I used:

ffmpeg -hide_banner -loglevel info -stats \
-i input.mp4 \
-c:v libx264 -preset slow -crf 23 \
-profile:v high -level 4.1 \
-movflags +faststart \
-vf "scale=1920:-2" \
-c:a aac -b:a 128k \
output-optimized.mp4

🔍 What each part does

1. Efficient video encoding

-c:v libx264

Uses H.264 — the most widely supported codec for web.

2. Better compression (smaller file size)

-preset slow

Slower encoding = better compression efficiency.
Worth it when you're preparing assets ahead of time.

3. Quality control

-crf 23

CRF (Constant Rate Factor) controls quality:

Lower = higher quality
Higher = smaller file

23 is the sweet spot for most web use cases.

4. Web compatibility

-profile:v high -level 4.1

Ensures the video works smoothly across browsers and devices.

5. Faster playback on websites

-movflags +faststart

Moves metadata to the beginning of the file so the video can start playing immediately (no full download required).

6. Resize smartly

-vf "scale=1920:-2"

Limits width to 1920px
Keeps aspect ratio intact
Prevents unnecessarily large resolutions

7. Optimize audio

-c:a aac -b:a 128k

AAC audio at 128 kbps — good balance between quality and size.

📊 Final Result

Metric	Before	After
File Size	137 MB	29 MB
Reduction	—	~79%
Quality	High	Visually similar

🚀 When to use this

This setup is perfect for:

Landing pages
Product demos
Background videos
Marketing assets
Any web-delivered video

💡 Pro tip

If you need:

Higher quality: use -crf 20–22
Smaller size: use -crf 24–28

Final Thoughts

You don’t need fancy tools to optimize video for the web.
FFmpeg alone can dramatically cut file size while keeping quality intact.

If you're still uploading raw videos to production—this is low-hanging fruit worth fixing.

Let me know if you want a version tuned for mobile, ultra-low bandwidth, or streaming 👇

Optimizing Complex Sequelize Queries: Search, Sorting & Pagination Done Right

Muhammad Usman — Thu, 09 Apr 2026 18:24:24 +0000

Handling complex queries in Sequelize can get messy — especially when you're dealing with:

Multiple relationships
One-to-many joins
Dynamic search & sorting
Pagination with accurate counts

If you’ve ever seen:
❌ Duplicate records
❌ Broken pagination
❌ Wrong counts in findAndCountAll

You're not alone.

Let’s break down the problem — and then fix it using modern, production-grade techniques.

🧠 The Problem

Imagine this structure:

Orders (main entity)
OrderItems (one-to-many)
Products (linked to OrderItems)
Customers (belongs to Orders)

⚠️ Common Challenges

🔍 Searching across related tables (customer + product)
📊 Sorting on nested relationships
📄 Pagination breaking due to JOIN duplication
🔢 Incorrect counts from findAndCountAll

❌ Traditional Approach (What Most People Do)

Typical fixes include:

subQuery: false
separate: true
Raw SQL via sequelize.literal

👉 While this works, it has issues:

⚠️ SQL injection risk (string interpolation)
🐌 Performance issues (multiple queries with separate)
😵 Hard to maintain
❌ Not database-agnostic

✅ Modern Approach (Recommended)

Instead of relying heavily on literals and separate, we use:

🔑 Key Improvements

✅ Scoped includes with required joins
✅ Safe replacements (no string interpolation)
✅ distinct with proper grouping
✅ Subqueries ONLY where necessary
✅ Cursor-based pagination (optional upgrade)

🛠️ Improved Implementation

```js id="modern-sequelize-query"
const { Op, fn, col, where, literal } = require('sequelize');

const { offset = 0, limit = 10 } = req;
let { search, sortBy, sortOrder = 'ASC' } = req.query;

// Base query
const queryOptions = {
limit,
offset,
distinct: true,
col: 'Orders.id', // ensures correct count
include: [
{
model: Customers,
as: 'customer',
attributes: ['id', 'email', 'firstName', 'lastName'],
required: true,
},
{
model: OrderItems,
as: 'orderItems',
attributes: [],
required: false,
include: [
{
model: Products,
as: 'product',
attributes: [],
required: false,
},
],
},
],
where: {},
};

// 🔍 SAFE SEARCH
if (search) {
const searchValue = %${search.trim()}%;

queryOptions.where[Op.or] = [
where(
fn('concat', col('customer.firstName'), ' ', col('customer.lastName')),
{ [Op.like]: searchValue }
),
where(col('orderItems.product.category'), {
[Op.like]: searchValue,
}),
];
}

// 📊 SORTING (No raw injection)
switch (sortBy) {
case 'customer':
queryOptions.order = [
[{ model: Customers, as: 'customer' }, 'firstName', sortOrder],
[{ model: Customers, as: 'customer' }, 'lastName', sortOrder],
];
break;

case 'category':
queryOptions.order = [
[{ model: OrderItems, as: 'orderItems' },
{ model: Products, as: 'product' },
'category',
sortOrder],
];
break;

default:
queryOptions.order = [['id', 'ASC']];
}

// 🚀 Execute
const result = await Orders.findAndCountAll(queryOptions);




---

## 🔥 Why This Is Better

### ✅ No SQL Injection Risk

We replaced:



```js
sequelize.literal(`... ${searchValue}`)

with:

Op.like / fn / col

✅ Better Performance

Avoids separate: true (which runs multiple queries)
Uses optimized joins instead

✅ Accurate Pagination

distinct: true + col ensures correct counts
No duplication from joins

✅ Cleaner & Maintainable

Uses Sequelize-native APIs
Easier to debug and extend

⚡ When Should You STILL Use `separate: true`?

Use it ONLY when:

You need nested pagination
You have very large child datasets
You want to lazy-load associations

🚀 Bonus: Even Better (Cursor Pagination)

Offset pagination can slow down on large datasets.

👉 Consider switching to:

Cursor-based pagination (createdAt, id)
OR indexed pagination

📌 Key Takeaways

✅ Avoid raw SQL when possible
✅ Use fn, col, and where for safe queries
✅ Use distinct properly for pagination
✅ Avoid separate: true unless necessary
✅ Prefer structured joins over subqueries

🎯 Final Thoughts

Sequelize is powerful — but only if you use it the right way.

The old approach works…
👉 The modern approach scales.

💬 Have you faced Sequelize performance issues in production?
Let’s discuss your approach below!

🚀 Building an AWS Cognito MCP Server (Model Context Protocol) – CLI & Manual Setup Guide

Muhammad Usman — Thu, 09 Apr 2026 18:08:32 +0000

Modern AI apps need secure, scalable, and context-aware integrations. That’s where MCP (Model Context Protocol) comes in — and when paired with AWS Cognito, you get a powerful authentication + knowledge retrieval pipeline.

In this post, I’ll walk you through:

What MCP is 🤔
Why it’s useful
How to set up an AWS Cognito MCP server
Two methods:
- ✅ Using AWS CLI
- ✅ Manual (Console-based) setup
Pros & Cons of both approaches

🧠 What is MCP (Model Context Protocol)?

Model Context Protocol (MCP) is a standardized way to connect AI models (like LLMs) with external tools, APIs, and knowledge bases.

💡 Why MCP matters:

🔗 Connects AI to real-world data sources
🔐 Enables secure access via authentication systems (like Cognito)
⚡ Makes AI apps more dynamic and production-ready
🧩 Plug-and-play architecture for tools & services

🔐 Why Use AWS Cognito with MCP?

AWS Cognito provides:

User authentication (Sign up / Sign in)
Token-based authorization (JWT)
Secure access control for APIs

When combined with MCP:
👉 Your AI tools can securely fetch user-specific or protected data.

⚙️ MCP Server Configuration (Example)

Here’s a basic MCP server config using AWS knowledge base retrieval:

{
  "mcpServers": {
    "aws-cognito": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-aws-kb-retrieval"
      ],
      "env": {
        "AWS_PROFILE": "",
        "AWS_REGION": "",
        "COGNITO_USER_POOL_ID": ""
      }
    }
  }
}

🛠️ Method 1: Setup Using AWS CLI

Step 1: Install AWS CLI

pip install awscli
aws configure

Enter:

AWS Access Key
Secret Key
Region

Step 2: Create Cognito User Pool

aws cognito-idp create-user-pool \
  --pool-name my-mcp-pool

Step 3: Create App Client

aws cognito-idp create-user-pool-client \
  --user-pool-id <POOL_ID> \
  --client-name mcp-client \
  --generate-secret

👉 This returns:

ClientId
ClientSecret

Step 4: Configure MCP Environment

Update your config:

"env": {
  "AWS_PROFILE": "default",
  "AWS_REGION": "us-east-1",
  "COGNITO_USER_POOL_ID": "your_pool_id"
}

✅ Pros of AWS CLI Method

⚡ Fast & scriptable
🔁 Easy to automate (CI/CD)
🧑‍💻 Developer-friendly

❌ Cons

Harder for beginners
Requires CLI familiarity
Debugging can be tricky

🖥️ Method 2: Manual Setup (AWS Console)

Step 1: Go to AWS Console

Navigate to Cognito → User Pools
Click Create User Pool

Step 2: Configure Pool

Choose Email/Username login
Set password policies
Enable self sign-up (optional)

Step 3: Create App Client

Go to App Integration → App Clients
Click Create App Client
Enable:
- ✅ Generate client secret

👉 Save:

Client ID
Client Secret

Step 4: Configure Domain (Optional)

Set a Cognito domain for hosted UI

Step 5: Update MCP Config

"env": {
  "AWS_PROFILE": "default",
  "AWS_REGION": "us-east-1",
  "COGNITO_USER_POOL_ID": "your_pool_id"
}

🔐 Important Note About Secrets

When using the manual flow:

Store Client Secret securely (e.g., AWS Secrets Manager)
Never expose it in frontend apps

✅ Pros of Manual Method

👍 Beginner-friendly
👀 Visual interface
Easier to understand setup

❌ Cons

🐢 Slower
❌ Not easily repeatable
⚠️ Human error risk

⚖️ CLI vs Manual – Quick Comparison

Feature	AWS CLI ⚡	Manual Console 🖥️
Speed	Fast	Slow
Automation	Yes	No
Ease	Medium	Easy
Scalability	High	Low

🎯 Final Thoughts

Using AWS Cognito with MCP is a powerful way to:

Secure your AI applications
Enable authenticated data access
Build production-grade AI systems

👉 If you’re building scalable systems → use CLI
👉 If you’re learning or experimenting → use manual setup

💬 Let’s Connect

If you’re experimenting with MCP or building AI-powered apps, I’d love to hear your approach!

Drop your thoughts 👇

Next.js 14 App Router: Building Modern Full-Stack Applications

Muhammad Usman — Fri, 19 Sep 2025 08:14:47 +0000

Next.js has revolutionized React development by providing a comprehensive framework that handles everything from routing to server-side rendering. With the introduction of the App Router in Next.js 13 and its maturation in Next.js 14, developers now have access to powerful features like Server Components, Server Actions, and improved data fetching patterns. This guide will take you through building a complete full-stack application using the latest Next.js features.

Understanding the App Router Architecture

The App Router represents a paradigm shift from the traditional Pages Router. Built on React's latest features, it introduces concepts like Server Components, which run on the server and can directly access databases and APIs without exposing sensitive data to the client.

Key Concepts:

Server Components: React components that render on the server
Client Components: Traditional React components that run in the browser
Server Actions: Functions that run on the server and can be called from client components
Streaming: Progressive rendering of UI components
Nested Layouts: Reusable UI that persists across routes

Project Structure and Setup

Let's start by creating a modern blog application with authentication, database integration, and real-time features.

# Create a new Next.js application
npx create-next-app@latest my-blog-app --typescript --tailwind --eslint --app
cd my-blog-app

# Install additional dependencies
npm install @prisma/client prisma @auth/prisma-adapter next-auth
npm install @types/bcryptjs bcryptjs
npm install zod react-hook-form @hookform/resolvers

Database Schema with Prisma

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String    @unique
  emailVerified DateTime?
  image         String?
  password      String?
  role          Role      @default(USER)
  posts         Post[]
  comments      Comment[]
  accounts      Account[]
  sessions      Session[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("users")
}

model Post {
  id          String    @id @default(cuid())
  title       String
  slug        String    @unique
  content     String
  excerpt     String?
  published   Boolean   @default(false)
  featured    Boolean   @default(false)
  viewCount   Int       @default(0)

  authorId    String
  author      User      @relation(fields: [authorId], references: [id], onDelete: Cascade)

  comments    Comment[]
  tags        Tag[]

  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt

  @@map("posts")
}

model Comment {
  id        String   @id @default(cuid())
  content   String

  postId    String
  post      Post     @relation(fields: [postId], references: [id], onDelete: Cascade)

  authorId  String
  author    User     @relation(fields: [authorId], references: [id], onDelete: Cascade)

  parentId  String?
  parent    Comment? @relation("CommentReplies", fields: [parentId], references: [id])
  replies   Comment[] @relation("CommentReplies")

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@map("comments")
}

model Tag {
  id    String @id @default(cuid())
  name  String @unique
  posts Post[]

  @@map("tags")
}

enum Role {
  USER
  ADMIN
}

Server Components and Data Fetching

Server Components allow us to fetch data directly on the server, improving performance and SEO:

// app/blog/page.tsx
import { Metadata } from 'next'
import { Suspense } from 'react'
import { getPosts } from '@/lib/posts'
import PostCard from '@/components/PostCard'
import PostCardSkeleton from '@/components/PostCardSkeleton'

export const metadata: Metadata = {
  title: 'Blog Posts | My Blog',
  description: 'Latest blog posts and articles',
}

interface SearchParams {
  page?: string
  tag?: string
  search?: string
}

interface BlogPageProps {
  searchParams: SearchParams
}

export default async function BlogPage({ searchParams }: BlogPageProps) {
  const page = parseInt(searchParams.page || '1')
  const tag = searchParams.tag
  const search = searchParams.search

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
          Latest Blog Posts
        </h1>
        <p className="text-gray-600 dark:text-gray-400">
          Discover insights, tutorials, and thoughts on web development
        </p>
      </div>

      <Suspense fallback={<PostGridSkeleton />}>
        <PostGrid page={page} tag={tag} search={search} />
      </Suspense>
    </div>
  )
}

async function PostGrid({ page, tag, search }: SearchParams & { page: number }) {
  const { posts, totalPages, hasNextPage } = await getPosts({
    page,
    limit: 12,
    tag,
    search,
    published: true
  })

  if (posts.length === 0) {
    return (
      <div className="text-center py-12">
        <h3 className="text-xl text-gray-600 dark:text-gray-400">
          No posts found
        </h3>
      </div>
    )
  }

  return (
    <div className="space-y-8">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {posts.map((post) => (
          <PostCard key={post.id} post={post} />
        ))}
      </div>

      {totalPages > 1 && (
        <Pagination
          currentPage={page}
          totalPages={totalPages}
          hasNextPage={hasNextPage}
        />
      )}
    </div>
  )
}

function PostGridSkeleton() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {Array.from({ length: 6 }).map((_, i) => (
        <PostCardSkeleton key={i} />
      ))}
    </div>
  )
}

Server Actions for Data Mutations

Server Actions provide a seamless way to handle form submissions and data mutations:

// app/actions/posts.ts
'use server'

import { revalidatePath, revalidateTag } from 'next/cache'
import { redirect } from 'next/navigation'
import { z } from 'zod'
import { auth } from '@/lib/auth'
import { prisma } from '@/lib/prisma'
import { generateSlug } from '@/lib/utils'

const CreatePostSchema = z.object({
  title: z.string().min(1, 'Title is required').max(200),
  content: z.string().min(10, 'Content must be at least 10 characters'),
  excerpt: z.string().max(500).optional(),
  tags: z.array(z.string()).optional(),
  published: z.boolean().default(false),
  featured: z.boolean().default(false)
})

export type CreatePostState = {
  errors?: {
    title?: string[]
    content?: string[]
    excerpt?: string[]
    general?: string[]
  }
  message?: string
}

export async function createPost(
  prevState: CreatePostState,
  formData: FormData
): Promise<CreatePostState> {
  // Get current user session
  const session = await auth()

  if (!session?.user?.id) {
    return {
      errors: { general: ['You must be logged in to create a post'] }
    }
  }

  // Validate form data
  const validatedFields = CreatePostSchema.safeParse({
    title: formData.get('title'),
    content: formData.get('content'),
    excerpt: formData.get('excerpt'),
    tags: formData.get('tags')?.toString().split(',').filter(Boolean) || [],
    published: formData.get('published') === 'on',
    featured: formData.get('featured') === 'on'
  })

  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors
    }
  }

  const { title, content, excerpt, tags, published, featured } = validatedFields.data

  try {
    // Generate unique slug
    const baseSlug = generateSlug(title)
    let slug = baseSlug
    let counter = 1

    while (await prisma.post.findUnique({ where: { slug } })) {
      slug = `${baseSlug}-${counter}`
      counter++
    }

    // Create post with tags
    const post = await prisma.post.create({
      data: {
        title,
        slug,
        content,
        excerpt,
        published,
        featured,
        authorId: session.user.id,
        tags: {
          connectOrCreate: tags.map(tag => ({
            where: { name: tag.toLowerCase().trim() },
            create: { name: tag.toLowerCase().trim() }
          }))
        }
      },
      include: {
        tags: true,
        author: {
          select: {
            name: true,
            email: true,
            image: true
          }
        }
      }
    })

    // Revalidate relevant pages
    revalidatePath('/blog')
    revalidatePath('/admin/posts')
    revalidateTag('posts')

    redirect(`/blog/${post.slug}`)
  } catch (error) {
    console.error('Failed to create post:', error)
    return {
      errors: { general: ['Failed to create post. Please try again.'] }
    }
  }
}

export async function updatePostViews(postId: string) {
  try {
    await prisma.post.update({
      where: { id: postId },
      data: {
        viewCount: {
          increment: 1
        }
      }
    })

    revalidateTag(`post-${postId}`)
  } catch (error) {
    console.error('Failed to update post views:', error)
  }
}

export async function deletePost(postId: string): Promise<{ success: boolean; error?: string }> {
  const session = await auth()

  if (!session?.user?.id) {
    return { success: false, error: 'Unauthorized' }
  }

  try {
    const post = await prisma.post.findUnique({
      where: { id: postId },
      select: { authorId: true, slug: true }
    })

    if (!post) {
      return { success: false, error: 'Post not found' }
    }

    if (post.authorId !== session.user.id && session.user.role !== 'ADMIN') {
      return { success: false, error: 'Unauthorized' }
    }

    await prisma.post.delete({
      where: { id: postId }
    })

    revalidatePath('/blog')
    revalidatePath('/admin/posts')
    revalidateTag('posts')

    return { success: true }
  } catch (error) {
    console.error('Failed to delete post:', error)
    return { success: false, error: 'Failed to delete post' }
  }
}

Client Components for Interactivity

Client Components handle user interactions and maintain client-side state:

// components/PostEditor.tsx
'use client'

import { useFormState } from 'react-dom'
import { useRouter } from 'next/navigation'
import { useState, useTransition } from 'react'
import { createPost, CreatePostState } from '@/app/actions/posts'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'
import { TagInput } from '@/components/TagInput'
import { MarkdownPreview } from '@/components/MarkdownPreview'

const initialState: CreatePostState = {
  errors: {},
  message: ''
}

interface PostEditorProps {
  initialData?: {
    title: string
    content: string
    excerpt?: string
    tags: string[]
    published: boolean
    featured: boolean
  }
}

export default function PostEditor({ initialData }: PostEditorProps) {
  const [state, formAction] = useFormState(createPost, initialState)
  const [isPending, startTransition] = useTransition()
  const [showPreview, setShowPreview] = useState(false)
  const [content, setContent] = useState(initialData?.content || '')
  const router = useRouter()

  const handleSubmit = (formData: FormData) => {
    startTransition(() => {
      formAction(formData)
    })
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">
          {initialData ? 'Edit Post' : 'Create New Post'}
        </h1>
        <div className="flex items-center space-x-4">
          <Label htmlFor="preview-toggle">Preview</Label>
          <Switch
            id="preview-toggle"
            checked={showPreview}
            onCheckedChange={setShowPreview}
          />
        </div>
      </div>

      {state.errors?.general && (
        <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded mb-4">
          {state.errors.general.join(', ')}
        </div>
      )}

      <form action={handleSubmit} className="space-y-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div className="space-y-6">
            <div>
              <Label htmlFor="title">Title *</Label>
              <Input
                id="title"
                name="title"
                defaultValue={initialData?.title}
                placeholder="Enter post title..."
                className={state.errors?.title ? 'border-red-500' : ''}
              />
              {state.errors?.title && (
                <p className="text-red-500 text-sm mt-1">{state.errors.title[0]}</p>
              )}
            </div>

            <div>
              <Label htmlFor="excerpt">Excerpt</Label>
              <Textarea
                id="excerpt"
                name="excerpt"
                defaultValue={initialData?.excerpt}
                placeholder="Brief description of your post..."
                rows={3}
                className={state.errors?.excerpt ? 'border-red-500' : ''}
              />
              {state.errors?.excerpt && (
                <p className="text-red-500 text-sm mt-1">{state.errors.excerpt[0]}</p>
              )}
            </div>

            <div>
              <Label>Tags</Label>
              <TagInput
                name="tags"
                defaultValue={initialData?.tags || []}
                placeholder="Add tags..."
              />
            </div>

            <div className="flex space-x-6">
              <div className="flex items-center space-x-2">
                <Switch
                  id="published"
                  name="published"
                  defaultChecked={initialData?.published}
                />
                <Label htmlFor="published">Published</Label>
              </div>

              <div className="flex items-center space-x-2">
                <Switch
                  id="featured"
                  name="featured"
                  defaultChecked={initialData?.featured}
                />
                <Label htmlFor="featured">Featured</Label>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            <div>
              <Label htmlFor="content">Content *</Label>
              {showPreview ? (
                <div className="border rounded-lg p-4 min-h-[400px] bg-gray-50">
                  <MarkdownPreview content={content} />
                </div>
              ) : (
                <Textarea
                  id="content"
                  name="content"
                  value={content}
                  onChange={(e) => setContent(e.target.value)}
                  placeholder="Write your post content in Markdown..."
                  rows={20}
                  className={`font-mono ${state.errors?.content ? 'border-red-500' : ''}`}
                />
              )}
              {state.errors?.content && (
                <p className="text-red-500 text-sm mt-1">{state.errors.content[0]}</p>
              )}
            </div>
          </div>
        </div>

        <div className="flex justify-end space-x-4">
          <Button
            type="button"
            variant="outline"
            onClick={() => router.back()}
          >
            Cancel
          </Button>
          <Button
            type="submit"
            disabled={isPending}
          >
            {isPending ? 'Saving...' : (initialData ? 'Update Post' : 'Create Post')}
          </Button>
        </div>
      </form>
    </div>
  )
}

Authentication with NextAuth.js

// lib/auth.ts
import { NextAuthOptions } from 'next-auth'
import { PrismaAdapter } from '@auth/prisma-adapter'
import CredentialsProvider from 'next-auth/providers/credentials'
import GoogleProvider from 'next-auth/providers/google'
import { compare } from 'bcryptjs'
import { prisma } from './prisma'

export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  session: {
    strategy: 'jwt'
  },
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!
    }),
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          return null
        }

        const user = await prisma.user.findUnique({
          where: { email: credentials.email }
        })

        if (!user || !user.password) {
          return null
        }

        const isPasswordValid = await compare(credentials.password, user.password)

        if (!isPasswordValid) {
          return null
        }

        return {
          id: user.id,
          email: user.email,
          name: user.name,
          role: user.role,
          image: user.image
        }
      }
    })
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role
      }
      return token
    },
    async session({ session, token }) {
      if (token) {
        session.user.id = token.sub!
        session.user.role = token.role as string
      }
      return session
    }
  },
  pages: {
    signIn: '/auth/signin',
    signUp: '/auth/signup'
  }
}

Advanced Features and Optimizations

1. Image Optimization and Upload

// components/ImageUpload.tsx
'use client'

import { useState, useCallback } from 'react'
import Image from 'next/image'
import { useDropzone } from 'react-dropzone'
import { uploadImage } from '@/app/actions/upload'

interface ImageUploadProps {
  onImageUploaded: (url: string) => void
  currentImage?: string
}

export default function ImageUpload({ onImageUploaded, currentImage }: ImageUploadProps) {
  const [isUploading, setIsUploading] = useState(false)
  const [preview, setPreview] = useState<string>(currentImage || '')

  const onDrop = useCallback(async (acceptedFiles: File[]) => {
    const file = acceptedFiles[0]
    if (!file) return

    setIsUploading(true)

    try {
      const formData = new FormData()
      formData.append('file', file)

      const result = await uploadImage(formData)

      if (result.success && result.url) {
        setPreview(result.url)
        onImageUploaded(result.url)
      }
    } catch (error) {
      console.error('Upload failed:', error)
    } finally {
      setIsUploading(false)
    }
  }, [onImageUploaded])

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    accept: {
      'image/*': ['.jpeg', '.jpg', '.png', '.webp']
    },
    maxSize: 5 * 1024 * 1024, // 5MB
    multiple: false
  })

  return (
    <div className="space-y-4">
      <div
        {...getRootProps()}
        className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
          ${isDragActive ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400'}
          ${isUploading ? 'opacity-50 cursor-not-allowed' : ''}
        `}
      >
        <input {...getInputProps()} disabled={isUploading} />

        {preview ? (
          <div className="space-y-4">
            <div className="relative w-full h-48">
              <Image
                src={preview}
                alt="Preview"
                fill
                className="object-cover rounded"
              />
            </div>
            <p className="text-sm text-gray-600">
              Click or drag to replace image
            </p>
          </div>
        ) : (
          <div className="space-y-2">
            <div className="text-gray-400">
              <svg className="mx-auto h-12 w-12" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <div>
              <p className="text-lg">
                {isDragActive ? 'Drop image here' : 'Drag & drop an image here'}
              </p>
              <p className="text-sm text-gray-500">
                or click to select (max 5MB)
              </p>
            </div>
          </div>
        )}

        {isUploading && (
          <div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 rounded-lg">
            <div className="text-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
              <p className="mt-2 text-sm text-gray-600">Uploading...</p>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

2. Real-time Comments with Server Actions

// components/CommentSection.tsx
'use client'

import { useState, useTransition } from 'react'
import { useSession } from 'next-auth/react'
import { addComment, deleteComment } from '@/app/actions/comments'
import { Comment, User } from '@prisma/client'

type CommentWithAuthor = Comment & {
  author: Pick<User, 'name' | 'image'>
  replies: CommentWithAuthor[]
}

interface CommentSectionProps {
  postId: string
  initialComments: CommentWithAuthor[]
}

export default function CommentSection({ postId, initialComments }: CommentSectionProps) {
  const { data: session } = useSession()
  const [comments, setComments] = useState(initialComments)
  const [newComment, setNewComment] = useState('')
  const [replyTo, setReplyTo] = useState<string | null>(null)
  const [isPending, startTransition] = useTransition()

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!newComment.trim() || !session?.user) return

    startTransition(async () => {
      const result = await addComment({
        content: newComment,
        postId,
        parentId: replyTo
      })

      if (result.success && result.comment) {
        // Optimistically update UI
        if (replyTo) {
          setComments(prev => prev.map(comment => 
            comment.id === replyTo 
              ? { ...comment, replies: [...comment.replies, result.comment!] }
              : comment
          ))
        } else {
          setComments(prev => [result.comment!, ...prev])
        }

        setNewComment('')
        setReplyTo(null)
      }
    })
  }

  return (
    <div className="mt-12 space-y-6">
      <h3 className="text-2xl font-semibold">Comments ({comments.length})</h3>

      {session?.user ? (
        <form onSubmit={handleSubmit} className="space-y-4">
          <textarea
            value={newComment}
            onChange={(e) => setNewComment(e.target.value)}
            placeholder={replyTo ? "Write a reply..." : "Write a comment..."}
            className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            rows={4}
          />
          <div className="flex justify-between">
            {replyTo && (
              <button
                type="button"
                onClick={() => setReplyTo(null)}
                className="text-gray-500 hover:text-gray-700"
              >
                Cancel Reply
              </button>
            )}
            <button
              type="submit"
              disabled={isPending || !newComment.trim()}
              className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50"
            >
              {isPending ? 'Posting...' : (replyTo ? 'Reply' : 'Comment')}
            </button>
          </div>
        </form>
      ) : (
        <p className="text-gray-600">
          <a href="/auth/signin" className="text-blue-600 hover:underline">
            Sign in
          </a>{' '}
          to join the conversation
        </p>
      )}

      <div className="space-y-6">
        {comments.map((comment) => (
          <CommentItem
            key={comment.id}
            comment={comment}
            onReply={setReplyTo}
            currentUserId={session?.user?.id}
          />
        ))}
      </div>
    </div>
  )
}

3. SEO and Metadata Optimization

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { getPostBySlug } from '@/lib/posts'
import { updatePostViews } from '@/app/actions/posts'
import PostContent from '@/components/PostContent'
import CommentSection from '@/components/CommentSection'

interface PostPageProps {
  params: {
    slug: string
  }
}

export async function generateMetadata({ params }: PostPageProps): Promise<Metadata> {
  const post = await getPostBySlug(params.slug)

  if (!post) {
    return {
      title: 'Post Not Found'
    }
  }

  return {
    title: post.title,
    description: post.excerpt || `Read ${post.title} by ${post.author.name}`,
    authors: [{ name: post.author.name! }],
    openGraph: {
      title: post.title,
      description: post.excerpt || `Read ${post.title} by ${post.author.name}`,
      type: 'article',
      publishedTime: post.createdAt.toISOString(),
      modifiedTime: post.updatedAt.toISOString(),
      authors: [post.author.name!],
      tags: post.tags.map(tag => tag.name)
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt || `Read ${post.title} by ${post.author.name}`,
    },
    keywords: post.tags.map(tag => tag.name).join(', ')
  }
}

export default async function PostPage({ params }: PostPageProps) {
  const post = await getPostBySlug(params.slug, {
    includeComments: true,
    includeUnpublished: false
  })

  if (!post) {
    notFound()
  }

  // Update view count (fire and forget)
  updatePostViews(post.id)

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.excerpt,
    author: {
      '@type': 'Person',
      name: post.author.name
    },
    datePublished: post.createdAt.toISOString(),
    dateModified: post.updatedAt.toISOString(),
    keywords: post.tags.map(tag => tag.name).join(', ')
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article className="max-w-4xl mx-auto px-4 py-8">
        <PostContent post={post} />
        <CommentSection 
          postId={post.id} 
          initialComments={post.comments} 
        />
      </article>
    </>
  )
}

Performance Optimizations and Best Practices

1. Streaming and Loading UI


typescript
// app/blog/loading.tsx
export default function Loading()

Building Production-Ready Serverless Applications with AWS Lambda and API Gateway

Muhammad Usman — Fri, 19 Sep 2025 08:11:10 +0000

Serverless architecture has revolutionized how we build and deploy applications. AWS Lambda, combined with API Gateway, provides a powerful platform for creating scalable, cost-effective applications without managing servers. In this comprehensive guide, we'll explore best practices for building production-ready serverless applications on AWS.

Understanding the Serverless Paradigm

Serverless doesn't mean "no servers" - it means you don't have to manage them. AWS Lambda automatically handles the infrastructure, scaling, and maintenance, allowing developers to focus purely on business logic. This paradigm shift offers several advantages:

Cost Efficiency: Pay only for what you use, down to the millisecond
Automatic Scaling: Handle anywhere from a few requests to millions without configuration
Reduced Operational Overhead: No server maintenance or patching
Built-in High Availability: Fault tolerance across multiple availability zones

Setting Up Your First Lambda Function

Let's start with a simple Lambda function that demonstrates core concepts:

// handler.js
const AWS = require('aws-sdk');
const dynamodb = new AWS.DynamoDB.DocumentClient();

exports.handler = async (event, context) => {
    // Enable CORS
    const headers = {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
    };

    try {
        const { httpMethod, pathParameters, body } = event;

        // Handle different HTTP methods
        switch (httpMethod) {
            case 'GET':
                return await handleGet(pathParameters, headers);
            case 'POST':
                return await handlePost(JSON.parse(body), headers);
            case 'PUT':
                return await handlePut(pathParameters, JSON.parse(body), headers);
            case 'DELETE':
                return await handleDelete(pathParameters, headers);
            case 'OPTIONS':
                return {
                    statusCode: 200,
                    headers,
                    body: JSON.stringify({ message: 'CORS preflight' })
                };
            default:
                return {
                    statusCode: 405,
                    headers,
                    body: JSON.stringify({ error: 'Method not allowed' })
                };
        }
    } catch (error) {
        console.error('Handler error:', error);
        return {
            statusCode: 500,
            headers,
            body: JSON.stringify({ 
                error: 'Internal server error',
                message: process.env.NODE_ENV === 'development' ? error.message : 'Something went wrong'
            })
        };
    }
};

async function handleGet(pathParameters, headers) {
    const { id } = pathParameters || {};

    if (id) {
        // Get single item
        const params = {
            TableName: process.env.DYNAMODB_TABLE,
            Key: { id }
        };

        const result = await dynamodb.get(params).promise();

        if (!result.Item) {
            return {
                statusCode: 404,
                headers,
                body: JSON.stringify({ error: 'Item not found' })
            };
        }

        return {
            statusCode: 200,
            headers,
            body: JSON.stringify(result.Item)
        };
    } else {
        // Get all items
        const params = {
            TableName: process.env.DYNAMODB_TABLE
        };

        const result = await dynamodb.scan(params).promise();

        return {
            statusCode: 200,
            headers,
            body: JSON.stringify({
                items: result.Items,
                count: result.Count
            })
        };
    }
}

async function handlePost(data, headers) {
    // Validate input
    if (!data.name || !data.email) {
        return {
            statusCode: 400,
            headers,
            body: JSON.stringify({ error: 'Name and email are required' })
        };
    }

    const item = {
        id: generateId(),
        name: data.name,
        email: data.email,
        createdAt: new Date().toISOString(),
        updatedAt: new Date().toISOString()
    };

    const params = {
        TableName: process.env.DYNAMODB_TABLE,
        Item: item
    };

    await dynamodb.put(params).promise();

    return {
        statusCode: 201,
        headers,
        body: JSON.stringify(item)
    };
}

function generateId() {
    return Math.random().toString(36).substr(2, 9);
}

Infrastructure as Code with Serverless Framework

Using the Serverless Framework makes deployment and configuration management much easier:

# serverless.yml
service: my-serverless-api

provider:
  name: aws
  runtime: nodejs18.x
  stage: ${opt:stage, 'dev'}
  region: ${opt:region, 'us-east-1'}
  environment:
    DYNAMODB_TABLE: ${self:service}-${self:provider.stage}
    NODE_ENV: ${self:provider.stage}
  iamRoleStatements:
    - Effect: Allow
      Action:
        - dynamodb:Query
        - dynamodb:Scan
        - dynamodb:GetItem
        - dynamodb:PutItem
        - dynamodb:UpdateItem
        - dynamodb:DeleteItem
      Resource: "arn:aws:dynamodb:${self:provider.region}:*:table/${self:provider.environment.DYNAMODB_TABLE}"

functions:
  api:
    handler: handler.handler
    events:
      - http:
          path: /users
          method: get
          cors: true
      - http:
          path: /users
          method: post
          cors: true
      - http:
          path: /users/{id}
          method: get
          cors: true
      - http:
          path: /users/{id}
          method: put
          cors: true
      - http:
          path: /users/{id}
          method: delete
          cors: true

resources:
  Resources:
    UsersDynamoDbTable:
      Type: 'AWS::DynamoDB::Table'
      DeletionPolicy: Retain
      Properties:
        AttributeDefinitions:
          - AttributeName: id
            AttributeType: S
        KeySchema:
          - AttributeName: id
            KeyType: HASH
        BillingMode: PAY_PER_REQUEST
        TableName: ${self:provider.environment.DYNAMODB_TABLE}

plugins:
  - serverless-offline
  - serverless-dotenv-plugin

custom:
  serverless-offline:
    httpPort: 3000

Advanced Lambda Patterns and Best Practices

1. Connection Pooling and Resource Reuse

// database.js
const AWS = require('aws-sdk');

// Initialize outside handler for connection reuse
let dynamodb;

function getDynamoDbClient() {
    if (!dynamodb) {
        dynamodb = new AWS.DynamoDB.DocumentClient({
            region: process.env.AWS_REGION || 'us-east-1',
            maxRetries: 3,
            retryDelayOptions: {
                customBackoff: function(retryCount) {
                    return Math.pow(2, retryCount) * 100;
                }
            }
        });
    }
    return dynamodb;
}

module.exports = { getDynamoDbClient };

2. Error Handling and Monitoring

// utils/logger.js
const winston = require('winston');

const logger = winston.createLogger({
    level: process.env.LOG_LEVEL || 'info',
    format: winston.format.combine(
        winston.format.timestamp(),
        winston.format.errors({ stack: true }),
        winston.format.json()
    ),
    defaultMeta: { service: 'my-serverless-api' },
    transports: [
        new winston.transports.Console()
    ]
});

// Custom error class
class AppError extends Error {
    constructor(message, statusCode = 500, isOperational = true) {
        super(message);
        this.statusCode = statusCode;
        this.isOperational = isOperational;
        Error.captureStackTrace(this, this.constructor);
    }
}

module.exports = { logger, AppError };

3. Input Validation and Sanitization

// utils/validation.js
const Joi = require('joi');

const userSchema = Joi.object({
    name: Joi.string().min(2).max(100).required(),
    email: Joi.string().email().required(),
    age: Joi.number().integer().min(0).max(120).optional(),
    phone: Joi.string().pattern(/^\+?[1-9]\d{1,14}$/).optional()
});

function validateUser(data) {
    const { error, value } = userSchema.validate(data);
    if (error) {
        throw new AppError(`Validation error: ${error.details[0].message}`, 400);
    }
    return value;
}

// Sanitize input
function sanitizeInput(data) {
    if (typeof data === 'string') {
        return data.trim().replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
    }
    if (typeof data === 'object' && data !== null) {
        const sanitized = {};
        for (const [key, value] of Object.entries(data)) {
            sanitized[key] = sanitizeInput(value);
        }
        return sanitized;
    }
    return data;
}

module.exports = { validateUser, sanitizeInput };

Optimizing Performance and Costs

1. Cold Start Optimization

// Optimize imports
const AWS = require('aws-sdk/clients/dynamodb');
const { logger } = require('./utils/logger');

// Initialize connections outside handler
const dynamodb = new AWS.DocumentClient({
    convertEmptyValues: true,
    // Reduce timeout for faster failures
    httpOptions: {
        timeout: 5000
    }
});

// Provisioned concurrency for critical functions
exports.handler = async (event, context) => {
    // Set shorter timeout for context
    context.callbackWaitsForEmptyEventLoop = false;

    // Your handler logic here
};

2. Memory and Timeout Configuration

# serverless.yml
functions:
  api:
    handler: handler.handler
    memorySize: 512  # Optimize based on profiling
    timeout: 30      # Don't set too high to avoid costs
    reservedConcurrency: 100  # Prevent runaway costs

Security Best Practices

1. Authentication with JWT

// auth/jwt.js
const jwt = require('jsonwebtoken');
const { AppError } = require('../utils/logger');

function generateToken(payload) {
    return jwt.sign(payload, process.env.JWT_SECRET, {
        expiresIn: '24h',
        issuer: 'my-serverless-api'
    });
}

function verifyToken(token) {
    try {
        return jwt.verify(token, process.env.JWT_SECRET);
    } catch (error) {
        throw new AppError('Invalid token', 401);
    }
}

// Middleware for Lambda
function authMiddleware(handler) {
    return async (event, context) => {
        try {
            const token = event.headers.Authorization?.replace('Bearer ', '');
            if (!token) {
                throw new AppError('No token provided', 401);
            }

            const decoded = verifyToken(token);
            event.user = decoded;

            return await handler(event, context);
        } catch (error) {
            return {
                statusCode: error.statusCode || 500,
                body: JSON.stringify({ error: error.message })
            };
        }
    };
}

module.exports = { generateToken, verifyToken, authMiddleware };

2. Environment Variables and Secrets Management

# serverless.yml
provider:
  environment:
    DYNAMODB_TABLE: ${self:service}-${self:provider.stage}
    # Reference AWS Systems Manager parameters
    JWT_SECRET: ${ssm:/myapp/${self:provider.stage}/jwt-secret~true}
    DATABASE_URL: ${ssm:/myapp/${self:provider.stage}/database-url~true}

Monitoring and Observability

1. Custom Metrics with CloudWatch

// utils/metrics.js
const AWS = require('aws-sdk');
const cloudwatch = new AWS.CloudWatch();

async function publishMetric(metricName, value, unit = 'Count', dimensions = {}) {
    const params = {
        Namespace: 'MyServerlessApp',
        MetricData: [{
            MetricName: metricName,
            Value: value,
            Unit: unit,
            Dimensions: Object.entries(dimensions).map(([Name, Value]) => ({ Name, Value })),
            Timestamp: new Date()
        }]
    };

    try {
        await cloudwatch.putMetricData(params).promise();
    } catch (error) {
        console.error('Failed to publish metric:', error);
    }
}

module.exports = { publishMetric };

2. Distributed Tracing with X-Ray

const AWSXRay = require('aws-xray-sdk-core');
const AWS = AWSXRay.captureAWS(require('aws-sdk'));

// Add subsegments for better tracing
exports.handler = async (event, context) => {
    const segment = AWSXRay.getSegment();
    const subsegment = segment.addNewSubsegment('database-operation');

    try {
        // Your database operation
        const result = await dynamodb.get(params).promise();
        subsegment.close();
        return result;
    } catch (error) {
        subsegment.close(error);
        throw error;
    }
};

Testing Serverless Applications

// tests/handler.test.js
const { handler } = require('../handler');

describe('Lambda Handler', () => {
    test('should handle GET request', async () => {
        const event = {
            httpMethod: 'GET',
            pathParameters: null,
            body: null
        };

        const result = await handler(event, {});

        expect(result.statusCode).toBe(200);
        expect(JSON.parse(result.body)).toHaveProperty('items');
    });

    test('should handle POST request with valid data', async () => {
        const event = {
            httpMethod: 'POST',
            pathParameters: null,
            body: JSON.stringify({
                name: 'John Doe',
                email: 'john@example.com'
            })
        };

        const result = await handler(event, {});

        expect(result.statusCode).toBe(201);
        const body = JSON.parse(result.body);
        expect(body).toHaveProperty('id');
        expect(body.name).toBe('John Doe');
    });
});

Deployment Strategies

1. CI/CD Pipeline

# .github/workflows/deploy.yml
name: Deploy Serverless Application

on:
  push:
    branches: [main, develop]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Deploy to AWS
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          if [ "${{ github.ref }}" = "refs/heads/main" ]; then
            npx serverless deploy --stage prod
          else
            npx serverless deploy --stage dev
          fi

2. Blue-Green Deployments

# serverless.yml
provider:
  deploymentBucket:
    versioning: true
  versionFunctions: true

functions:
  api:
    handler: handler.handler
    # Use aliases for blue-green deployments
    events:
      - http:
          path: /{proxy+}
          method: ANY
          cors: true

plugins:
  - serverless-plugin-canary-deployments

custom:
  deploymentSettings:
    type: Canary10Percent5Minutes
    alias: Live

Cost Optimization Strategies

Right-size Memory: Monitor and adjust memory allocation based on actual usage
Use Provisioned Concurrency Wisely: Only for functions that need consistent low latency
Implement Caching: Use API Gateway caching and DynamoDB DAX where appropriate
Monitor Cold Starts: Use CloudWatch to track and optimize cold start frequency
Clean Up Resources: Remove unused functions and resources regularly

Conclusion

Building production-ready serverless applications with AWS Lambda requires careful consideration of architecture patterns, security, monitoring, and cost optimization. By following these best practices and using the patterns shown in this guide, you can create robust, scalable, and maintainable serverless applications.

The serverless paradigm offers incredible benefits, but success depends on understanding its nuances and implementing proper patterns from the start. Remember to monitor your applications closely, test thoroughly, and continuously optimize based on real-world usage patterns.

As serverless technology continues to evolve, staying up-to-date with AWS services and best practices will help you build even better applications in the future.

Mastering React State Management: Beyond useState and useEffect

Muhammad Usman — Fri, 19 Sep 2025 08:00:44 +0000

React's state management can quickly become complex as your application grows. While useState and useEffect are excellent for simple scenarios, modern React applications often require more sophisticated patterns. In this comprehensive guide, we'll explore advanced state management techniques that will make your React applications more maintainable and performant.

The Evolution of State Management in React

React has come a long way since its early days. The introduction of hooks in React 16.8 revolutionized how we handle state, moving away from class components to functional components with hooks. However, as applications scale, developers often find themselves struggling with prop drilling, state synchronization, and performance optimization.

useReducer: Your Gateway to Complex State Logic

While useState is perfect for simple state updates, useReducer shines when dealing with complex state logic involving multiple sub-values or when the next state depends on the previous one.

import React, { useReducer } from 'react';

const initialState = {
  user: null,
  loading: false,
  error: null,
  notifications: []
};

function appReducer(state, action) {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, loading: true, error: null };
    case 'LOGIN_SUCCESS':
      return { ...state, loading: false, user: action.payload };
    case 'LOGIN_ERROR':
      return { ...state, loading: false, error: action.payload };
    case 'ADD_NOTIFICATION':
      return { 
        ...state, 
        notifications: [...state.notifications, action.payload] 
      };
    case 'REMOVE_NOTIFICATION':
      return {
        ...state,
        notifications: state.notifications.filter(n => n.id !== action.payload)
      };
    default:
      return state;
  }
}

function App() {
  const [state, dispatch] = useReducer(appReducer, initialState);

  const login = async (credentials) => {
    dispatch({ type: 'LOGIN_START' });
    try {
      const user = await authService.login(credentials);
      dispatch({ type: 'LOGIN_SUCCESS', payload: user });
    } catch (error) {
      dispatch({ type: 'LOGIN_ERROR', payload: error.message });
    }
  };

  return (
    // Your JSX here
  );
}

Context API: Eliminating Prop Drilling

The Context API provides a way to share data between components without passing props through every level of the component tree. Here's how to create a robust context-based state management system:

import React, { createContext, useContext, useReducer } from 'react';

const AppContext = createContext();

export function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState);

  const value = {
    state,
    dispatch,
    // Action creators
    login: (credentials) => {
      dispatch({ type: 'LOGIN_START' });
      // Login logic here
    },
    logout: () => dispatch({ type: 'LOGOUT' }),
    addNotification: (notification) => 
      dispatch({ type: 'ADD_NOTIFICATION', payload: notification })
  };

  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}

export function useApp() {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useApp must be used within an AppProvider');
  }
  return context;
}

Custom Hooks: Reusable State Logic

Custom hooks allow you to extract and reuse stateful logic across multiple components:

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error('Error reading from localStorage:', error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error('Error writing to localStorage:', error);
    }
  };

  return [storedValue, setValue];
}

function useApi(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let cancelled = false;

    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();

        if (!cancelled) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err.message);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      cancelled = true;
    };
  }, [url]);

  return { data, loading, error };
}

State Machines with useReducer

For complex UI states, consider implementing state machines:

const STATES = {
  IDLE: 'idle',
  LOADING: 'loading',
  SUCCESS: 'success',
  ERROR: 'error'
};

const ACTIONS = {
  FETCH: 'fetch',
  SUCCESS: 'success',
  ERROR: 'error',
  RESET: 'reset'
};

function dataFetchReducer(state, action) {
  switch (state.status) {
    case STATES.IDLE:
      switch (action.type) {
        case ACTIONS.FETCH:
          return { status: STATES.LOADING, data: null, error: null };
        default:
          return state;
      }
    case STATES.LOADING:
      switch (action.type) {
        case ACTIONS.SUCCESS:
          return { status: STATES.SUCCESS, data: action.payload, error: null };
        case ACTIONS.ERROR:
          return { status: STATES.ERROR, data: null, error: action.payload };
        default:
          return state;
      }
    case STATES.SUCCESS:
    case STATES.ERROR:
      switch (action.type) {
        case ACTIONS.FETCH:
          return { status: STATES.LOADING, data: null, error: null };
        case ACTIONS.RESET:
          return { status: STATES.IDLE, data: null, error: null };
        default:
          return state;
      }
    default:
      return state;
  }
}

Performance Optimization Strategies

Memoization with useMemo and useCallback

import React, { useMemo, useCallback, memo } from 'react';

const ExpensiveComponent = memo(({ items, onItemClick }) => {
  const expensiveValue = useMemo(() => {
    return items.reduce((acc, item) => acc + item.value, 0);
  }, [items]);

  return (
    <div>
      <p>Total: {expensiveValue}</p>
      {items.map(item => (
        <Item 
          key={item.id} 
          item={item} 
          onClick={onItemClick} 
        />
      ))}
    </div>
  );
});

function ParentComponent() {
  const [items, setItems] = useState([]);

  const handleItemClick = useCallback((item) => {
    // Handle item click
    console.log('Item clicked:', item);
  }, []);

  return (
    <ExpensiveComponent 
      items={items} 
      onItemClick={handleItemClick} 
    />
  );
}

State Splitting for Better Performance

Instead of keeping all state in one large object, split it into smaller, focused pieces:

// Instead of this:
const [appState, setAppState] = useState({
  user: null,
  posts: [],
  comments: [],
  ui: { loading: false, error: null }
});

// Do this:
const [user, setUser] = useState(null);
const [posts, setPosts] = useState([]);
const [comments, setComments] = useState([]);
const [ui, setUi] = useState({ loading: false, error: null });

Best Practices and Guidelines

Start Simple: Begin with useState and useEffect. Only introduce complexity when needed.
Colocate State: Keep state as close to where it's used as possible.
Use Custom Hooks: Extract reusable stateful logic into custom hooks.
Consider State Machines: For complex UI states, state machines provide clarity and prevent impossible states.
Optimize Carefully: Profile before optimizing. Not every component needs memo or useMemo.
Test Your State Logic: State management logic should be thoroughly tested, especially reducers and custom hooks.

Conclusion

Modern React applications require thoughtful state management strategies. By understanding and applying these patterns - from useReducer and Context API to custom hooks and performance optimization techniques - you can build React applications that are both scalable and maintainable.

The key is to choose the right tool for the job. Simple local state might only need useState, while complex application state might benefit from a combination of useReducer, Context API, and custom hooks. Remember, the best state management solution is the one that makes your code more readable and maintainable for your specific use case.

As you continue to build React applications, these patterns will become second nature, allowing you to focus on creating great user experiences rather than wrestling with state management complexity.

Forem: Muhammad Usman

Auto-Configuring AI Agents Based on Your Codebase (AutoSkills)

😩 The Problem Nobody Talks About

🤯 The Shift: Let Your Codebase Configure the AI

⚡ One Command Setup

🔍 What It Actually Does

🧠 Why This Feels Different

🛠️ Real Example

🔐 Not Just Convenience — Also Safer

⏱️ Before vs After

Before

After

🚀 Bigger Picture

🔗 Try It Yourself

💬 Let’s Discuss

Introducing Prompt Master: A Structured Prompt Engine That Runs Entirely in Prompt Space

The Problem

What Prompt Master Is

What It Actually Does (Practical View)

Installation

How It Works

Usage Examples

1) Natural Invocation

2) Explicit Invocation

3) Repair Mode

4) Decompiler Mode

Benefits for Developers

Benefits for Teams

Common Mistakes Prompt Master Prevents

Quick Start Checklist

When to Use It

Final Thoughts

Try It

Prompt Master: A Structured Prompt Engine for Claude and Cursor

What makes this different?

What Prompt Master actually does

How it works (under the hood)

Why this approach matters

Key capabilities

Structured intent extraction

Minimal clarification

Tool-aware generation

Repair mode

Decompiler mode

Built-in quality checks

Important clarification (missing in most posts)

Installation (quick version)

Claude

Cursor (recommended)

How to use it

What problems it solves (practically)

Why developers might care

Final thoughts

How I Reduced a Video from 137MB to 29MB Using FFmpeg (Without Killing Quality)

🔍 What each part does

1. Efficient video encoding

2. Better compression (smaller file size)

3. Quality control

4. Web compatibility

5. Faster playback on websites

6. Resize smartly

7. Optimize audio

📊 Final Result

🚀 When to use this

💡 Pro tip

Final Thoughts

Optimizing Complex Sequelize Queries: Search, Sorting & Pagination Done Right

🧠 The Problem

⚠️ Common Challenges

❌ Traditional Approach (What Most People Do)

✅ Modern Approach (Recommended)

🔑 Key Improvements

🛠️ Improved Implementation

✅ Better Performance

✅ Accurate Pagination

✅ Cleaner & Maintainable

⚡ When Should You STILL Use separate: true?

🚀 Bonus: Even Better (Cursor Pagination)

📌 Key Takeaways

🎯 Final Thoughts

⚡ When Should You STILL Use `separate: true`?