DEV Community: Sameer Saleem

The Practical Guide to Claude Code: Build Scalable Apps Faster Without the Frustration

Sameer Saleem — Sat, 19 Sep 2026 12:23:49 +0000

If you’ve tried using terminal AI coding agents like Claude Code, you’ve probably experienced one of two outcomes:

The Magic Moment: You ask it to fix a multi-file bug, and it inspects the files, runs the tests, and solves the problem in two minutes.
The Frustration: It edits 15 files unexpectedly, breaks your build, and burns through your tokens without completing the task.

The difference between these two outcomes rarely comes down to the model itself. It comes down to how you set up your project and guide the tool.

Claude Code is not an autocomplete extension—it is an autonomous agent living in your shell. In this guide, we’ll skip the hype and break down practical, straightforward techniques to make your development workflow faster, cleaner, and more scalable.

1. Grounding the Agent: The `CLAUDE.md` File

When a new human developer joins your team, you don't expect them to guess your code formatting, naming conventions, or folder structures. You onboard them.

CLAUDE.md is the onboarding document for your AI agent. Placed at the root of your project, this file is automatically read every time you start a session.

What to include in `CLAUDE.md`:

Keep it short, clear, and direct. Avoid fluffy language.

# Project Guidelines

## Commands
- Dev Server: `npm run dev`
- Build: `npm run build`
- Run Tests: `npm run test`
- Single Test: `npx vitest run path/to/file.test.ts`

## Code Standards
- Framework: Next.js (App Router), TypeScript, Tailwind CSS
- State Management: Zustand for global client state
- Data Validation: Always use Zod schemas for API routes and form inputs

## Guidelines
- Never edit files inside `src/legacy/`.
- Keep components small and modular (under 150 lines).
- Always write a corresponding unit test in `tests/` when adding a new utility.

By providing these clear instructions, you prevent the agent from introducing unexpected patterns or breaking established rules.

2. Master the Core Command Workflow

Rather than sending unstructured, open-ended prompts, use built-in slash commands to structure your interactions.

The "Plan First, Code Second" Approach

When tackling a large feature, never start by telling the agent to "build X." Instead, separate planning from execution:

Generate a Plan:

/plan Add a Stripe subscription checkout flow for our SaaS tier.

The agent will inspect your existing codebase and outline the proposed changes across files without modifying any code yet.

Review and Adjust: Read the proposed plan. If something looks off, give feedback: "Do not create a new API route; use our existing server action pattern."
Execute: Once the plan is approved, instruct the agent to proceed with execution.

Managing Session Context

AI models degrade in performance when their context window becomes cluttered with old logs, stale error traces, and discarded code attempts.

Use /compact to summarize the current session history and reclaim memory without losing progress.
Use /clear to start a completely fresh session when switching to an unrelated task.
Use /rewind if the agent takes a wrong turn, safely restoring your code and conversation to an earlier checkpoint.

3. Building Scalable Apps: The "Component-First" Strategy

Asking an AI agent to build an entire page at once often leads to overly complex, unmaintainable code. To keep your application scalable, break your requests into small, testable boundaries.

Step-by-Step Task Execution

Instead of prompting:

❌ "Build the entire user settings dashboard with password reset, avatar upload, and email preferences."

Break the task into clear steps:

✅ "Create a reusable Zod schema and TypeScript type for the user settings form in src/lib/validations/user.ts."

✅ "Build the AvatarUpload component in src/components/settings/AvatarUpload.tsx."

✅ "Implement the form layout and connect the validation schema."

This approach ensures:

Every piece of code remains modular and easier to review.
You can test each sub-component individually.
If a step fails, troubleshooting is straightforward.

4. Let the Agent Run Tests and Fix Its Own Errors

One of the strongest advantages of a terminal agent is its ability to interact with your local environment.

Instead of manually checking if the generated code works, let the agent verify its own work:

# Example prompt
claude "Implement the discount code calculation in src/lib/cart.ts, then run 'npm run test' to verify your changes pass."

If a test fails, the agent reads the error output, identifies the issue, adjusts the code, and re-runs the test until it passes.

[Agent Reads Test Output] -> ❌ 1 Test Failed (Invalid Discount Math)
[Agent Edits Code]       -> Corrected rounding logic in cart.ts
[Agent Re-runs Test]     -> ✅ All 12 Tests Passed

5. Summary Checklist for Maximum Productivity

Strategy	Action	Benefit
Project Setup	Create a `CLAUDE.md` in the repository root.	Prevents repetitive instructions and keeps code style consistent.
Feature Work	Always run `/plan` before writing code for complex tasks.	Catch architectural flaws before files are modified.
Context Control	Run `/compact` or `/clear` between distinct tasks.	Keeps responses fast, accurate, and lower cost.
Task Size	Request small, incremental edits rather than massive rewrites.	Improves code quality and simplifies review.
Verification	Instruct the agent to run tests or linters automatically.	Catch bugs before committing code.

Conclusion

Using an AI coding agent effectively isn't about letting it write your entire application unsupervised. It's about taking on the role of a tech lead: establishing clear constraints, reviewing proposed plans, and letting the agent handle implementation and testing details.

By incorporating CLAUDE.md guidelines, planning before executing, and working incrementally, you can speed up your development workflow while building clean, scalable applications.

What strategies do you use when working with terminal AI agents? Do you prefer keeping them on a tight leash with manual approvals, or giving them autonomy to run tests and fix errors? Share your thoughts below! 👇

Vector Databases: Types, Architecture, and Why They Power Modern Apps

Sameer Saleem — Wed, 12 Aug 2026 08:25:54 +0000

If you built an AI app in the early days of LLMs, you probably hit a wall pretty quickly: Large Language Models have no long-term memory. They forget who your user is, they don't know your company's proprietary documentation, and pasting 500-page PDFs directly into prompt context windows is expensive, slow, and prone to context rot.

Enter Vector Databases.

Whether you're building a Retrieval-Augmented Generation (RAG) pipeline, an autonomous AI agent with long-term memory, or a high-performance recommendation engine, vector databases have become core infrastructure.

Here is the complete guide to how vector databases work, the main types available, and why they matter for modern application development.

1. What is a Vector Database?

Traditional databases (like PostgreSQL, MySQL, or MongoDB) store scalar data—strings, integers, JSON objects—and rely on exact matches or range queries. If you search for "laptop", a traditional full-text index looks for the exact characters l-a-p-t-o-p. If your document contains "MacBook" or "portable computer", keyword search misses it completely unless manually tagged.

Vector databases, on the other hand, store high-dimensional vector embeddings.

"MacBook Air"       ---> [0.024, -0.198, 0.812, ... 1536 dimensions]
"Portable Computer" ---> [0.021, -0.201, 0.799, ... 1536 dimensions]
"Juicy Apple"       ---> [-0.512, 0.884, -0.012, ... 1536 dimensions]

An embedding model (like OpenAI's text-embedding-3, Cohere, or an open-source model like bge-large-en) transforms unstructured data—text, images, audio, or video—into a sequence of floating-point numbers.

In this high-dimensional space:

Concepts with similar meanings are placed geometrically close to each other.
Unrelated concepts sit far apart.

A vector database indexes these numerical arrays so you can run Nearest Neighbor (k-NN) queries to find semantically similar items in milliseconds.

+--------------------------------------------------------------------------+
|                            THE VECTOR FLOW                               |
|                                                                          |
|  Unstructured Data   ===>   Embedding Model   ===>   High-Dim Vector     |
|  ("User Query")             (e.g., OpenAI)           [0.12, -0.45, ...]   |
|                                                               |          |
|                                                               v          |
|  Top K Results       <===   Vector DB Index   <===   Distance Search     |
|  (Nearest Neighbors)        (HNSW / IVF)             (Cosine/Dot Prod)   |
+--------------------------------------------------------------------------+

2. How Similarity Search Works

Because calculating exact distances across billions of high-dimensional vectors is computationally impossible in real-time, vector databases use Approximate Nearest Neighbor (ANN) indexing algorithms:

HNSW (Hierarchical Navigable Small World): A multi-layer graph structure where top layers act as fast express lanes and lower layers pinpoint exact neighbors. It offers maximum accuracy and speed at the cost of higher RAM usage.
IVF (Inverted File Index): Groups vectors into Voronoi clusters. During queries, the database searches only within the nearest cluster centroids, drastically speeding up queries over massive datasets.
PQ (Product Quantization): Compresses vectors into smaller byte representations to save memory while preserving approximate distance metrics.

Distance Metrics

When querying vectors, the database calculates geometric distance using one of three metrics:

1. Cosine Similarity : Measures the ANGLE between vectors (best for normalized text).
2. Dot Product       : Measures ANGLE + MAGNITUDE (fastest for pre-normalized vectors).
3. Euclidean (L2)    : Measures STRAIGHT-LINE DISTANCE between vector endpoints.

3. The Types of Vector Databases

Not all vector databases are built the same. The ecosystem has divided into distinct categories based on operational needs and scale:

Category	Popular Examples	Best Used For	Trade-offs
Dedicated Vector DBs	Pinecone, Qdrant, Milvus, Weaviate	Massive scale (10M+ to Billions of vectors), low-latency requirements	Extra infrastructure component to manage
Relational / SQL Extensions	PostgreSQL + `pgvector` / `pgvectorscale`	Teams already using SQL; moderate scale (<10M vectors)	Shares CPU/RAM resources with primary database
Search Engine Extensions	Elasticsearch, OpenSearch	Hybrid keyword + vector search; heavy enterprise logs	Higher memory footprint and query overhead
Embedded / In-Process	Chroma, LanceDB, FAISS	Local development, edge computing, mobile, zero-copy processing	Limited multi-node horizontal scaling

4. Deep Dive into the Categories

A. Dedicated Vector Databases (Pinecone, Qdrant, Milvus)

Built ground-up specifically for high-dimensional arrays.

Qdrant (Rust-based): Renowned for fast payload filtering, payload indexing, and memory efficiency.
Pinecone (Managed Serverless): Offers zero-ops infrastructure with dynamic scaling and pay-per-query pricing.
Milvus (Distributed): Built for billion-scale enterprise deployments requiring GPU-accelerated indexing and cloud-native architecture.

B. Relational Extensions (`pgvector` on Postgres)

The most popular architectural movement is bringing vectors directly into relational data. With extensions like pgvector or pgvectorscale, you store embeddings inside a standard SQL column.

-- Creating a table with a 1536-dimensional vector column
CREATE TABLE knowledge_base (
    id SERIAL PRIMARY KEY,
    content TEXT,
    metadata JSONB,
    embedding vector(1536)
);

-- Creating an HNSW index for ultra-fast similarity search
CREATE INDEX ON knowledge_base 
USING hnsw (embedding vector_cosine_ops);

-- Performing a combined SQL + Vector query
SELECT content, metadata 
FROM knowledge_base 
WHERE metadata->>'category' = 'engineering'
ORDER BY embedding <=> '[0.012, -0.421, ...]' -- '<=>' is Cosine Distance
LIMIT 5;

Why developers love pgvector: You perform joins, ACID transactions, metadata filters, and vector searches in a single SQL query without running a separate database service.

C. Embedded Vector Databases (LanceDB, Chroma)

Embedded databases run inside your application process (like SQLite). LanceDB, built on top of the Apache Arrow columnar format, allows zero-copy retrieval directly from disk or S3 buckets without loading everything into expensive RAM.

5. Why Vector Databases Are Essential in Application Development

1. Powering Production RAG (Retrieval-Augmented Generation)

LLMs hallucinate when asked about private enterprise data. RAG solves this by fetching real-time context before passing the query to the model.

import os
from pinecone import Pinecone
from langchain_openai import OpenAIEmbeddings

pc = Pinecone(api_key=os.environ["PINECONE_API_KEY"])
index = pc.Index("enterprise-kb")
embeddings = OpenAIEmbeddings(model="text-embedding-3-small")

# 1. Convert user query to vector
query = "What is our company policy on remote work setup budgets?"
query_vector = embeddings.embed_query(query)

# 2. Retrieve top 3 semantically related internal documents
results = index.query(vector=query_vector, top_k=3, include_metadata=True)

# 3. Feed retrieved content into LLM context window
context = "\n".join([match["metadata"]["text"] for match in results["matches"]])

2. Autonomous Agent Memory

Autonomous agents need short-term (scratchpad) and long-term (episodic) memory. By storing user interactions and agent execution steps in a vector store, agents recall past decisions and preferences seamlessly across long chat histories.

3. Hybrid Search (Dense + Sparse)

Pure vector search sometimes fails on exact code names, part numbers, or specific legal terms (e.g., looking for "Error 504" vs "Gateway Timeout").

Modern vector databases handle Hybrid Search—combining BM25 keyword scoring with dense vector similarity—to ensure exact name hits are never missed while keeping semantic context intact.

Final Score = (α * Sparse_BM25_Score) + ((1 - α) * Dense_Vector_Score)

6. Architectural Decision Framework

When choosing your vector storage strategy, follow this quick playbook:

Starting a new project / < 5 Million vectors: Use PostgreSQL with `pgvector`. Keeping vectors alongside your existing database saves hours of synchronization overhead.
Building a client-side app / Local CLI tool: Use LanceDB or Chroma in-process.
Scale exceeds 10M+ vectors / Latency < 20ms required: Migrate to a dedicated vector database like Qdrant (for open-source/self-hosted control) or Pinecone (for serverless cloud simplicity).
Already deeply invested in Elastic / OpenSearch: Enable their built-in k-NN vector indexes to avoid spinning up new vendors.

The Cookie That Wouldn't Die (and How We Fixed It)

Sameer Saleem — Sat, 04 Jul 2026 13:01:08 +0000

You know that feeling when everything works perfectly in development, but production decides to play games?

I spent yesterday chasing down a ghost. Our authentication flow was flawless locally—users could log in and out without a hitch. But the moment we deployed to production, logout mysteriously stopped working. Cookies refused to clear. Users were stuck in an endless login loop.

After hours of staring at logs and questioning my life choices, the culprit turned out to be something deceptively simple:

cookieStore.delete() wasn't enough.

In development, with secure: false, cookies are forgiving. They'll let you delete them without matching every attribute. But in production, with secure: true and sameSite: "lax", the browser demands perfection. If your delete operation doesn't specify the exact same cookie attributes, it simply... ignores you.

The fix was surprisingly elegant:

// What didn't work:
cookieStore.delete(COOKIE_NAME)

// What worked:
cookieStore.set(COOKIE_NAME, '', {
  ...COOKIE_OPTIONS,
  maxAge: 0  // Expire immediately
})

Setting an empty cookie with maxAge: 0 and the exact same attributes as the original forces the browser to respect the expiration. No ambiguity, no edge cases.

Key takeaways:

🍪 Production cookies are strict. Match attributes exactly when clearing.
🔍 delete() isn't always reliable in Next.js—set() with maxAge: 0 is your friend.
💡 The subtle differences between dev and prod environments will humble you every time.

Shoutout to everyone who's debugged authentication issues past midnight. You're not alone. ❤️

NextJS #WebDevelopment #Authentication #Debugging #JavaScript #ProdIssues #DevLife

Google Cloud NEXT '26: The Dawn of the Agentic Era

Sameer Saleem — Mon, 27 Apr 2026 09:41:16 +0000

Google Cloud NEXT '26 just concluded in Las Vegas (April 22–24), and the shift is undeniable: we have moved from the era of "Chatting with AI" to the era of Agentic AI. Google’s focus this year wasn't just on faster models, but on a vertically integrated stack—chips, data, and platforms—designed to let AI agents reason, plan, and execute complex business workflows autonomously.

Here is the ultimate breakdown of the major announcements that will define the cloud landscape for the next year.

1. Hardware: The 8th Gen TPU Revolution

To power thousands of autonomous agents, Google unveiled its most specialized silicon yet. For the first time, the eighth-generation Tensor Processing Units (TPUs) are split into two distinct architectures.

TPU 8t (Training): Optimized for the massive throughput required to train frontier models in weeks rather than months.
TPU 8i (Inference): Purpose-built for serving models with near-zero latency. Google claims an 80% improvement in performance per dollar for inference tasks.
NVIDIA Partnership: Google announced it will be among the first hyperscalers to offer the new NVIDIA Vera Rubin NVL72 systems, integrated directly into their AI Hypercomputer architecture.

2. The Gemini Enterprise Agent Platform

This was the "star of the show." Google is no longer just providing APIs; they are providing a complete workspace to build and manage AI workforces.

Gemini 3.1 Pro & Flash: The latest models are now generally available, featuring enhanced reasoning for multi-step tasks.
Agent Studio: A low-code interface that allows developers (and even business users) to build, test, and govern agents using natural language.
Agent Inbox: A centralized management hub where humans can monitor exactly what their AI agents are doing, approve sensitive actions, and step in when needed.

3. The "Agentic Data Cloud"

An agent is only as good as the data it can access. Google introduced the Agentic Data Cloud to solve the "data bottleneck" for AI.

Knowledge Catalog: A universal context engine that autonomously maps your entire business data estate. It uses Gemini to "tag" and connect data points so agents understand your company's specific lingo and internal logic.
Cross-Cloud Lakehouse: Standardized on Apache Iceberg, this allows agents to query data across AWS, Azure, and Google Cloud with zero-copy federation. You can leave your data where it is and still use Google's AI to reason over it.
Managed Lustre: A storage breakthrough delivering 10 terabytes per second of throughput, ensuring that your GPUs and TPUs are never "starved" for data.

4. Security: Agentic Defense

As agents become more powerful, security must become proactive. Google introduced several "Agentic SecOps" tools:

Dark Web Intelligence Agent: Uses Gemini to build a nuanced security profile of your organization based on real-time dark web activity, filtering out noise with 98% accuracy.
Threat Hunting Agent: Proactively searches for novel attack patterns that traditional signature-based systems might miss.

🚀 What This Means for Developers

In 2026, your job is shifting from writing code to orchestrating intent. With the new Google Cloud Data Agent Kit, you can now use your IDE (like VS Code) as a native workspace where agents autonomously handle the "grunt work" of data science, testing, and deployment.

The "1-Click" Future: Between the eighth-gen TPUs and the new Agentic Taskforce features in Workspace, the goal is clear: Google wants to reduce the "Time to Outcome" for every business process from hours to seconds.

Google Cloud Next '26 Highlights

This video provides a comprehensive wrap-up of the event, including the new TPU architectures and India's emerging role in the global AI hub strategy.

The Ultimate Generative AI Roadmap (2026 Edition)

Sameer Saleem — Mon, 27 Apr 2026 09:38:12 +0000

In 2026, the barrier between "using AI" and "building AI" has vanished. The "Prompt Engineer" role has been absorbed into the AI Systems Architect. To stay relevant this year, you don't just need to know how to call an API—you need to understand the underlying infrastructure of Compound AI Systems, Agentic RAG, and World Models.

This roadmap is designed to take you from a standard developer to a 2026-ready AI Engineer in 6-9 months.

Phase 1: Foundations & Python Mastery (Month 1)

Python remains the undisputed language of AI. Before touching an LLM, you must master the data-handling ecosystem.

Core Skills: Advanced Python (Async/Await, Type Hinting), NumPy, and Pandas.
Math for AI: Linear algebra (for embeddings), calculus (for backpropagation), and probability (for understanding model temperature and top-p).
Deep Learning 101: Understanding neural networks, loss functions, and gradients.

Phase 2: The Transformer & LLM Fundamentals (Month 2)

You cannot build robust systems if you treat the model as a black box. You need to understand the Attention Mechanism.

Concepts: Tokenization, Context Windows, and the difference between Encoder-only (BERT), Decoder-only (GPT), and Encoder-Decoder (T5) architectures.
Hands-on: Build a "Mini-GPT" from scratch using PyTorch to understand how tokens are predicted.

Phase 3: Prompting to Programming (Month 3)

In 2026, we've moved from "Magic Phrases" to Structured Output.

Techniques: Chain of Thought (CoT), Few-Shot Prompting, and ReAct (Reason + Act).
Tools: Master Pydantic for enforcing JSON schemas. Your code should never "hope" for a valid response; it should "enforce" it.
Projects: Build a text-to-structured-data engine that converts messy emails into typed JSON objects.

Phase 4: Agentic RAG & Vector Databases (Month 4-5)

Standard RAG (Retrieval-Augmented Generation) is now considered "legacy." In 2026, we use Agentic RAG.

Retrieval: Move beyond simple vector search. Learn Hybrid Search (Vector + BM25) and Graph-Enhanced RAG (Knowledge Graphs).
Orchestration: Master LangGraph or PydanticAI to build stateful agents that can loop, self-correct, and use tools.
Vector Infrastructure: Use pgvector (PostgreSQL) or Pinecone Serverless.

Phase 5: Fine-Tuning & Small Language Models (Month 6)

Why use a $30/mo model when a $0.05 local model can do the same task?

SLMs: Work with Llama 4 (8B) or Phi-4. Learn how to run them locally using Ollama or vLLM.
Techniques: PEFT (Parameter-Efficient Fine-Tuning) and LoRA. Learn to fine-tune a model to follow your specific company's brand voice or code style.

Phase 6: AI-Native DevOps & MLOps (Month 7-9)

The final step is moving from "it works on my machine" to "it works for 10,000 users."

Deployment: Containerization with Docker and scaling with Kubernetes.
Monitoring: Implement Observability (LangSmith, Helicone) to track latency, token costs, and "Hallucination Rates."
Evaluation: Build an evals/ suite using LLM-as-a-Judge to automatically test every change you make to your prompt or model.

🚀 The 2026 "Secret Sauce": Continual Learning

The best AI Engineers this year aren't just building static apps; they are building Continual Learning Systems. These are apps that get smarter with every user interaction by saving "Corrected Responses" into a feedback loop for future fine-tuning.

Your Goal for 2026: Stop building chatbots. Start building Autonomous Systems that solve problems while you sleep.

Claude Code vs. Cursor vs. Aider: The 2026 Battle for Your Terminal and IDE

Sameer Saleem — Wed, 25 Mar 2026 11:31:41 +0000

By March 2026, the question is no longer "Should I use AI to code?" but "Which AI agent should own my workflow?" The landscape has split into three distinct powerhouses: Cursor (the integrated experience), Aider (the precise pair programmer), and the newcomer that changed everything, Claude Code (the terminal-native agent).

If you’re wondering which tool should be your "Daily Driver" in 2026, this guide breaks down the strengths, the "Computer Use" capabilities, and the exact scenarios where each shines.

1. The Contenders: High-Level Overview

In 2026, we categorize these tools by how much "agency" they have over your file system and environment.

Feature	Cursor	Aider	Claude Code
Interface	Full IDE (VS Code Fork)	Terminal CLI	Terminal Agent + Shell
Agentic Level	High (Composer Mode)	Medium (Chat-to-Edit)	Extreme (Autonomous Shell)
Best For	Feature Building	Refactoring / Git Sync	Debugging & Infra
MCP Support	Native (Built-in)	Plugin-based	Deep Integration

2. Cursor: The "Vibe Coding" King

Cursor remains the gold standard for developers who want a seamless, visual experience. In 2026, its Composer mode has evolved into a "Project Architect" that can scaffold entire full-stack features while you watch the UI update in real-time.

The 2026 Edge: Cursor’s "Shadow Workspace" indexing. It pre-computes your entire codebase's logic so it can predict your next move before you finish the prompt.
When to use it: When you are building new UI features or working on complex layouts where you need to see the code and the file tree simultaneously.
The Downside: It can be "too heavy" for quick terminal tasks or server-side debugging.

3. Aider: The Git-Centric Surgeon

Aider has carved out a massive following among senior devs who value precision and "Code DNA" preservation. It is a terminal-based tool that excels at editing existing files and automatically committing changes with perfect commit messages.

The 2026 Edge: Architect Mode. Aider now uses a two-step process: high-level reasoning first, followed by a surgical "coding" model to apply the diffs. It is legendary for its low hallucination rate in complex refactors.
When to use it: For refactoring large logic blocks or working within a strict Git workflow where you want every AI change to be a discrete, well-documented commit.

4. Claude Code: The Terminal-Native Agent

The newest titan in the ring, Claude Code, isn't just a code editor—it’s a Shell Agent. It doesn't just write code; it runs your tests, fixes the 404 error it finds in your logs, and uses "Computer Use" to verify the fix in a headless browser.

The 2026 Edge: Autonomous Debugging. Claude Code can say, "I noticed the build failed; I'm going to read the error log, check the documentation for that library via the web, and apply a patch." It is the only tool that feels like a true Junior Engineer sitting at your desk.
When to use it: For complex debugging, environment setup, and infra-work. If you have a bug that spans five files and a database config, Claude Code is the one to call.

5. The 2026 Decision Matrix: Which one when?

Case A: "I need to build a new Dashboard page with 3 charts."

Winner: Cursor. Use the visual interface to drag and drop components and let the AI handle the Tailwind/React boilerplate.

Case B: "I have a legacy bug in my Auth middleware that I can't find."

Winner: Claude Code. Give it the command claude "find why the JWT is expiring early and fix it". It will run the server, trace the logs, and find the culprit autonomously.

Case C: "I need to migrate my entire DB schema from Prisma to Drizzle."

Winner: Aider. Its ability to handle massive search-and-replace refactors with surgical precision makes it the safest bet for high-stakes migrations.

🚀 The "Secret Sauce": CLAUDE.md and .cursorrules

In 2026, the real pros are using Hybrid Workflows. They use Cursor for the UI and keep a Claude Code session open in the integrated terminal for the "heavy lifting" like running migrations or writing E2E tests.

Regardless of your choice, ensure you have a CLAUDE.md or .cursorrules file in your root directory. This acts as the "Memory" for these agents, telling them:

"We use Functional Components only."
"Always use Zod for validation."
"Never use localStorage; use cookies."

What was your win this week?

Sameer Saleem — Tue, 10 Mar 2026 07:17:18 +0000

The Ultimate Guide to GraphQL + Apollo Server (2026 Edition)

Sameer Saleem — Tue, 10 Mar 2026 05:59:10 +0000

In 2026, the debate between REST and GraphQL has settled into a powerful synergy. Apollo Server 4 (and its latest minor updates) has moved toward a "GraphOS-native" approach, focusing on extreme performance, native TypeScript ESM support, and a streamlined middleware system.

If you're building a data-rich application in 2026, you don't just want an API; you want a self-documenting, type-safe Supergraph. Here is how to build it from scratch.

1. The Architecture: Schema-First in 2026

Modern Apollo development emphasizes a Schema-First workflow. You define the "shape" of your data in GraphQL SDL (Schema Definition Language), and Apollo ensures your resolvers match that shape perfectly.

2. Project Initialization (ESM & TS)

In 2026, Node.js strictly follows ECMAScript Modules (ESM). We'll set up a project that leverages top-level await and native TypeScript execution.

mkdir apollo-server-2026
cd apollo-server-2026
npm init -y
npm pkg set type="module"
npm install @apollo/server graphql
npm install -D typescript tsx @types/node
npx tsc --init

3. Defining the Schema

Create src/schema.ts. In 2026, we lean heavily into Custom Scalars and Namespacing to keep large graphs maintainable.

export const typeDefs = `#graphql
  type User {
    id: ID!
    username: String!
    email: String!
    posts: [Post!]!
  }

  type Post {
    id: ID!
    title: "String!"
    content: String
    author: User!
  }

  type Query {
    users: [User!]!
    user(id: ID!): User
    posts: [Post!]!
  }

  type Mutation {
    createPost(title: "String!, content: String, authorId: ID!): Post!"
  }
`;

4. Crafting High-Performance Resolvers

Resolvers in 2026 are all about avoiding the N+1 problem. We use context to inject data sources or loaders.

// src/resolvers.ts
export const resolvers = {
  Query: {
    users: async (_, __, { dataSources }) => {
      return dataSources.db.users.findMany();
    },
    user: async (_, { id }, { dataSources }) => {
      return dataSources.db.users.findOne(id);
    },
  },
  User: {
    posts: async (parent, _, { dataSources }) => {
      // 2026 Best Practice: Use a DataLoader here to batch requests
      return dataSources.db.posts.findByAuthorId(parent.id);
    },
  },
  Mutation: {
    createPost: async (_, args, { dataSources }) => {
      return dataSources.db.posts.create(args);
    },
  },
};

5. Launching the Standalone Server

Apollo Server 4's startStandaloneServer is the fastest way to get a production-ready endpoint with built-in CORS and body parsing.

// src/index.ts
import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone';
import { typeDefs } from './schema.js';
import { resolvers } from './resolvers.js';

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

// The 'context' function runs for every request
const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
  context: async ({ req }) => ({
    token: req.headers.authorization,
    // Inject your DB client (Prisma/Drizzle) here
    dataSources: { db: myDatabaseClient },
  }),
});

console.log(`🚀  Server ready at: ${url}`);

6. Integrating with Next.js (App Router)

If you're using Next.js 15+, you'll use the @apollo/experimental-nextjs-app-support library to bridge the gap between Server Components and your GraphQL API.

// src/app/ApolloClient.ts (2026 Setup)
import { HttpLink } from "@apollo/client";
import { registerApolloClient, ApolloClient, InMemoryCache } from "@apollo/experimental-nextjs-app-support";

export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink({
      uri: "http://localhost:4000",
    }),
  });
});

🚀 What’s New in Apollo (2026 Docs)?

Apollo MCP (Model Context Protocol): 2026 introduces native support for AI agents. You can now expose your GraphQL schema as "Tools" for LLMs to query directly.
Declarative Cache IDs: You no longer need to manually write merge functions for complex types; Apollo 4.x now handles object identity through @id directives in the schema.
Zero-Config Persisted Queries: To prevent "Query Injection" attacks, Apollo now supports automatic persisted queries (APQ) out of the box, reducing bandwidth and increasing security.
Native @defer support: You can now stream slow-loading parts of your query (like a user's post history) while the main user profile renders instantly.

Pro-Tip: Use Apollo Studio Explorer (accessible via your server URL) to test your queries. In 2026, it includes AI-powered "Query Suggestions" that write your fragments for you based on your component needs.

The Ultimate Guide to Stripe + Next.js (2026 Edition)

Sameer Saleem — Tue, 24 Feb 2026 07:36:28 +0000

In 2026, the "best way" to handle payments in Next.js has shifted. With the maturity of Server Actions, Embedded Checkout, and the React 19 integration in Next.js 15+, the friction of building a secure, high-conversion payment flow is at an all-time low.

This guide skips the legacy API routes and focuses on the high-performance, Server-Action-first architecture recommended for 2026.

1. The 2026 Lifecycle: Embedded vs. Hosted

Stripe now strongly pushes Embedded Checkout. Unlike the old redirect, it uses an iframe or a web component that lives inside your Next.js page, keeping your user on your domain while offloading all PCI compliance to Stripe.

2. Modern Project Setup

We’ll initialize a Next.js project with the App Router and the latest Stripe SDKs.

npx create-next-app@latest my-store-2026 --typescript --tailwind --app
cd my-store-2026
npm install stripe @stripe/stripe-js @stripe/react-stripe-js

3. Secure Environment Variables

Never expose your STRIPE_SECRET_KEY. In 2026, Next.js environment variables are strictly enforced.

# .env.local
STRIPE_SECRET_KEY="sk_test_51..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_51..."
STRIPE_WEBHOOK_SECRET="whsec_..."

4. The Server Action Pattern

In the 2026 docs, Server Actions are the standard for creating Checkout Sessions. This eliminates the need for /api/checkout folders.

Create src/app/actions/stripe.ts:

"use server";

import { stripe } from "@/lib/stripe";
import { headers } from "next/headers";

export async function createCheckoutSession(priceId: string) {
  const origin = (await headers()).get("origin");

  const session = await stripe.checkout.sessions.create({
    ui_mode: 'embedded', // This enables the 2026 Embedded UI
    line_items: [{ price: priceId, quantity: 1 }],
    mode: 'subscription',
    return_url: `${origin}/return?session_id={CHECKOUT_SESSION_ID}`,
  });

  return { clientSecret: session.client_secret };
}

5. Implementing Embedded Checkout

The EmbeddedCheckout component from @stripe/react-stripe-js provides a seamless "no-redirect" experience.

Create src/components/CheckoutForm.tsx:

"use client";

import { loadStripe } from "@stripe/stripe-js";
import { EmbeddedCheckoutProvider, EmbeddedCheckout } from "@stripe/react-stripe-js";
import { createCheckoutSession } from "@/app/actions/stripe";

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);

export default function CheckoutForm({ priceId }: { priceId: string }) {
  // We fetch the clientSecret via the Server Action
  const fetchClientSecret = async () => {
    const { clientSecret } = await createCheckoutSession(priceId);
    return clientSecret as string;
  };

  return (
    <div id="checkout">
      <EmbeddedCheckoutProvider stripe={stripePromise} options={{ fetchClientSecret }}>
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  );
}

6. Critical: The 2026 Webhook Handler

Even with Server Actions, Route Handlers are still required for Webhooks because Stripe needs a static URL to "ping" when a payment succeeds.

Create src/app/api/webhook/route.ts:

import { stripe } from "@/lib/stripe";
import { headers } from "next/headers";

export async function POST(req: Request) {
  const body = await req.text();
  const signature = (await headers()).get("stripe-signature")!;

  let event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err: any) {
    return new Response(`Webhook Error: ${err.message}`, { status: 400 });
  }

  // Handle the event
  if (event.type === "checkout.session.completed") {
    const session = event.data.object;
    // 2026 Practice: Trigger a background sync or email service
    console.log(`💰 Payment confirmed for ${session.id}`);
  }

  return new Response(null, { status: 200 });
}

🚀 What's New in the 2026 Stripe Docs?

Link Authentication Element: Automatically detects if a user has a "Link" account (Stripe's 1-click checkout) and pre-fills their details, increasing conversion by up to 10%.
Adaptive Pricing: Now natively supported in Checkout Sessions—Stripe automatically shows the price in the user's local currency based on their IP.
Enhanced Tax ID Collection: You can now toggle tax_id_collection: { enabled: true } directly in the session creation to handle global B2B tax compliance without extra logic.

Pro-Tip: For local testing, use the Stripe CLI. Run stripe listen --forward-to localhost:3000/api/webhook to simulate successful payments on your local machine.

The Ultimate Guide to OAuth with Express.js (2025 Edition)

Sameer Saleem — Fri, 23 Jan 2026 10:45:20 +0000

To build a secure, industry-standard authentication system in 2026, you must use the Backend for Frontend (BFF) pattern. This approach ensures that sensitive tokens (Access/Refresh tokens) are never exposed to the browser's JavaScript, mitigating XSS risks.

Core Principles

Use OpenID Connect (OIDC): Prefer openid-client over Passport.js for better OIDC compliance and PKCE support.
PKCE (Proof Key for Code Exchange): Always use PKCE, even for confidential server-side clients.
Secure Sessions: Use server-side sessions (e.g., Redis) and encrypted HttpOnly cookies.

The Codebase

Dependencies:
npm install express express-session openid-client dotenv

Implementation (app.js):

require('dotenv').config();
const express = require('express');
const session = require('express-session');
const { Issuer, generators } = require('openid-client');

const app = express();

// 1. Secure Session Configuration
app.use(session({
  name: '__Host-auth-session',
  secret: process.env.SESSION_SECRET,
  resave: false,
  saveUninitialized: false,
  cookie: {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax',
    maxAge: 24 * 60 * 60 * 1000 // 24 hours
  }
}));

let client;

// 2. OIDC Client Discovery & Setup
async function initializeOidc() {
  const issuer = await Issuer.discover(process.env.OIDC_ISSUER);
  client = new issuer.Client({
    client_id: process.env.CLIENT_ID,
    client_secret: process.env.CLIENT_SECRET,
    redirect_uris: [process.env.REDIRECT_URI],
    response_types: ['code']
  });
}

// 3. Login Route (Initiate PKCE)
app.get('/login', (req, res) => {
  const code_verifier = generators.codeVerifier();
  const code_challenge = generators.codeChallenge(code_verifier);

  req.session.code_verifier = code_verifier;

  const authUrl = client.authorizationUrl({
    scope: 'openid email profile',
    code_challenge,
    code_challenge_method: 'S256',
  });

  res.redirect(authUrl);
});

// 4. Callback Route (Exchange Code for Tokens)
app.get('/callback', async (req, res) => {
  try {
    const params = client.callbackParams(req);
    const tokenSet = await client.callback(process.env.REDIRECT_URI, params, {
      code_verifier: req.session.code_verifier,
    });

    // Store tokens in session, NOT in browser storage
    req.session.tokens = tokenSet;
    req.session.user = tokenSet.claims();

    res.redirect('/dashboard');
  } catch (err) {
    console.error('OAuth Callback Error:', err);
    res.status(500).send('Authentication failed');
  }
});

// 5. Protected Route Example
app.get('/dashboard', (req, res) => {
  if (!req.session.user) return res.status(401).send('Unauthorized');
  res.send(`Welcome, ${req.session.user.email}`);
});

initializeOidc().then(() => {
  app.listen(3000, () => console.log('BFF Server running on http://localhost:3000'));
});

Environment Variables (`.env`)

OIDC_ISSUER=https://your-provider.com
CLIENT_ID=your_client_id
CLIENT_SECRET=your_client_secret
REDIRECT_URI=http://localhost:3000/callback
SESSION_SECRET=a_very_long_random_string_here

Summary of Security Measures

Authorization Code Flow + PKCE: Prevents authorization code injection and interception.
No Tokens in Frontend: The frontend only sees a session cookie; the Express server handles the raw Access/Refresh tokens.
Dynamic Discovery: Using Issuer.discover ensures your app stays compatible with provider updates (key rotation, endpoint changes).

Beyond the Syntax: The Anatomy of a High-Impact Developer’s Daily Routine

Sameer Saleem — Mon, 19 Jan 2026 11:14:09 +0000

There is a common myth that a developer’s day is 8 hours of frantic typing against a black-and-green terminal. Whether you are a Junior pushing your first PR or a Senior Architect balancing three system designs, the reality is much more nuanced.

The "Daily Life" of a successful developer isn't just about writing code; it’s about managing cognitive load, communication, and constant evolution.

1. The "Deep Work" Window (AM)

Most high-impact developers protect their mornings. This is when your brain is freshest for complex logic.

Junior Perspective: This is your time to struggle productively. Try to solve the bug for 30 minutes before asking for help.
Senior Perspective: This is when you tackle the "Gordian Knots" of the architecture or perform deep-dive code reviews that ensure the codebase stays maintainable.

Pro Tip: Turn off Slack/Teams. The "context switching tax" can cost you up to 40% of your productive time.

2. The Art of the Stand-up (The Sync)

The Daily Stand-up isn't a status report for a boss; it’s a strategy session for a team.

What to say: "Yesterday I finished X. Today I’m working on Y. I’m blocked by Z."
The Professional Edge: Don’t just list tasks. Highlight risks. If you think a feature will take longer than planned, the stand-up is the time to raise the flag, not the day of the deadline.

3. Communication is the Real "Hard Skill"

As you progress from Junior to Senior, you’ll notice a shift: you spend less time talking to computers and more time talking to humans.

Documentation: If you solve a weird bug, write it down in the Wiki.
Mentorship: Seniors use their afternoons for 1:1s or pair programming, helping Juniors bypass the "invisible" hurdles of the environment.

4. The "Maintenance" Phase (PM)

Afternoons are often for the "shallow" but necessary tasks:

Answering emails and Slack messages.
Updating Jira/Trello tickets.
Continuous Learning: The industry moves fast. Whether it's reading a technical blog, watching a tutorial, or experimenting with a new framework, professional developers bake "sharpening the saw" into their daily schedule.

5. Shutting Down (The Clean Exit)

The best developers know how to leave work at work.

The "Brain Dump": Write down exactly where you left off. It makes starting tomorrow 10x easier.
Physical Boundary: Close the laptop. Close the IDE. Your brain needs the "cool down" period to prevent burnout.

Closing Thoughts

Whether you are on Day 1 or Year 10, the goal is the same: Consistency over Intensity. Coding is a marathon, not a sprint. The best daily routine is the one that allows you to be a great developer today and a healthy human tomorrow.

What does your "Deep Work" window look like? Let’s discuss in the comments!

The Ultimate Guide to Drizzle ORM + PostgreSQL (2025 Edition)

Sameer Saleem — Tue, 13 Jan 2026 07:21:53 +0000

While Prisma dominated the last few years, 2025 is the year of Drizzle ORM. If you’re looking for a lightweight, "serverless-first" ORM that feels like writing raw SQL but provides world-class TypeScript autocompletion, this guide is for you.

1. Project Initialization

We’ll set up a modern Node.js environment using TypeScript. Drizzle is designed to be extremely thin, making it perfect for Edge functions and standard Node backends alike.

mkdir drizzle-postgres-2025
cd drizzle-postgres-2025
npm init -y
npm install typescript tsx @types/node --save-dev
npx tsc --init

2. Install Drizzle and PostgreSQL Driver

Drizzle doesn't use a heavy Rust engine. It’s just TypeScript. We’ll use the postgres package (the fastest JS client) and drizzle-kit for migrations.

npm install drizzle-orm postgres
npm install -D drizzle-kit

3. Configure Your Connection

Create a .env file to hold your PostgreSQL connection string. Whether you’re using Neon, Supabase, or a local Docker instance, the format remains:

DATABASE_URL="postgresql://user:password@localhost:5432/my_db"

4. Define Your Schema in TypeScript

Unlike Prisma, which uses a custom .prisma language, Drizzle uses pure TypeScript. This means you can use functions and variables inside your schema definitions.

Create src/db/schema.ts:

import { pgTable, serial, text, boolean, integer, timestamp } from 'drizzle-orm/pg-core';

export const users = pgTable('users', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  email: text('email').unique().notNull(),
  createdAt: timestamp('created_at').defaultNow(),
});

export const posts = pgTable('posts', {
  id: serial('id').primaryKey(),
  title: text('title').notNull(),
  content: text('content'),
  published: boolean('published').default(false),
  authorId: integer('author_id').references(() => users.id),
});

5. Generate and Push Migrations

Drizzle Kit reads your TypeScript schema and generates the SQL for you.

Create a drizzle.config.ts in your root:

import { defineConfig } from 'drizzle-kit';

export default defineConfig({
  schema: './src/db/schema.ts',
  out: './drizzle',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});

Now, run the migration to sync your DB:

npx drizzle-kit push

6. Instantiate the Client

Create src/db/index.ts. Drizzle is lightweight enough that you don't usually need a complex singleton pattern, but it's good practice for hot-reloading:

import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';
import * as schema from './schema';

const queryClient = postgres(process.env.DATABASE_URL!);
export const db = drizzle(queryClient, { schema });

7. Performing Type-Safe CRUD

Drizzle gives you two ways to query: SQL-like (for those who love SQL) and Relational Queries (for those who love the Prisma API).

The "Prisma-like" way (Relational):

import { db } from './db';

async function main() {
  // Create a user with a post
  const newUser = await db.insert(users).values({
    name: 'Dev Reader',
    email: 'hello@dev.to',
  }).returning();

  // Fetch users with their posts (The "Prisma" feel)
  const allUsers = await db.query.users.findMany({
    with: {
      posts: true,
    },
  });

  console.log(allUsers);
}

main();

🚀 What Makes Drizzle the 2025 Choice?

Zero Code-Gen: You don't need to run npx generate every time you change a field. Your TypeScript types are always in sync with your schema automatically.
The "Edge" Advantage: Because Drizzle has no heavy binary engine, it starts up in milliseconds on Vercel Functions or Cloudflare Workers.
Drizzle Studio: Just like Prisma Studio, run npx drizzle-kit studio to get a beautiful browser-based UI to explore your PostgreSQL data.
SQL Power: If you need to write a complex window function or a specific PostgreSQL extension query, Drizzle stays out of your way and lets you write SQL while still providing types for the result.

Pro-Tip: If you are migrating from Prisma, check out the drizzle-kit introspect command. It can look at your existing database and automatically generate the Drizzle TypeScript schema for you!