DEV Community: Shashank Trivedi

Claude Built in commands and skills

Shashank Trivedi — Fri, 31 Jul 2026 04:13:40 +0000

1- Core Built-In Commands (Engine & Session Controls)

Built-in commands execute instantly without sending a message to the model. They give you direct control over memory, model choices, and terminal execution.

Context & Memory Management

/context : Opens a visual map showing context window usage. Use it to see what percentage of token budget is consumed by project files vs. conversation history.
/compact [instructions] : Summarizes earlier turns in the chat to reclaim token space. You can append instructions like /compact preserve database migration notes.
/clear : Wipes the current session history clean for a new task while keeping global memory files (CLAUDE.md) intact.
/memory : Directly views and edits active CLAUDE.md guidelines.

Session Flow & Navigation

/plan [description] : Switches Claude into Plan Mode. Prevents file modifications while Claude drafts a step-by-step strategy for high-level tasks.
/btw [question] : Asks a side question without adding it to the main conversation context or history.
/rewind (alias /checkpoint) : Rolls back file changes, conversation turns, or both to a prior checkpoint.
/branch [name] / /fork : Forks the current conversation into a new branch so you can experiment with alternative implementations without destroying your main timeline.

Execution Controls

/model [model] : Hot-swaps models mid-session (e.g., jump from Sonnet for fast refactoring to Opus for complex math/architecture).
/effort [level] : Adjusts reasoning depth (e.g., low, medium, max) depending on task complexity.
/cost / /usage / /stats : Displays API token expenditures, daily rate-limit statuses, or long-term trends.

2- Bundled & Custom Skills (AI Workflows)

Skills are intelligent workflows. When you invoke a skill, it loads a structured prompt with specific tools, allowing Claude to execute multi-step logic or spawn parallel subagents.

Essential Shipped Skills

/simplify [focus] : Spawns multiple review agents to analyze recently changed code for redundancies, edge-case bugs, or performance gains, then applies cleaner refactors automatically.
/code-review / /security-review : Runs automated multi-agent checks on pending diffs to identify security risks, anti-patterns, or subtle bugs.
/batch [description] : Decomposes large-scale, repetitive changes across an entire repository (e.g., "migrate 40 endpoint signatures to use Zod") into independent units running in separate worktrees.
/loop [interval] [prompt] : Periodically runs a task on a schedule (e.g., /loop 2m "check if the local build passes").
/debug [description] : Reads system runtime/error logs to run structured troubleshooting.

3. How Skills Are Configured Under the Hood

When building custom skills in .claude/skills//SKILL.md or .claude/commands/, you control execution behavior via YAML Frontmatter:

---
name: Database Migration Helper
description: "Generates and validates Prisma/Knex migration files"
# Restrict tools to prevent destructive shell commands
allowed-tools: ["FileEdit", "Bash(npm run migrate:*)"]
# Isolate execution to a subagent to avoid cluttering main session context
context: fork
agent: Plan
# Control who triggers the skill
disable-model-invocation: true # Can ONLY be triggered manually by user via /
user-invocable: true # Visible in / autocomplete menu
---
Analyze the latest database schema updates in `src/db/schema.ts`.
Create a migration file under `src/db/migrations/` and test it using `npm run migrate:test`.

Frontmatter Directives Key:

context: fork: Runs the skill inside an isolated background subagent so your main chat remains clean.
disable-model-invocation: true: Prevents Claude from running this skill automatically during regular text turns—it will only run when you explicitly type /migration.
allowed-tools: Scopes down security permissions so the skill can only execute approved commands or file actions.

Mastering Claude Code Configs: `CLAUDE.md` vs `.claude/rules/`

Shashank Trivedi — Fri, 31 Jul 2026 03:36:07 +0000

When configuring Claude Code (or Claude-driven AI coding assistants) in your projects, structuring your instructions efficiently is key to getting accurate code generation while keeping token consumption low.

Understanding when to use a single CLAUDE.md versus modular .claude/rules/ files will help keep your AI assistant sharp, focused, and predictable.

The Core Hierarchy & Scope

Claude Code looks for configurations across multiple levels:

├── ~/.claude/                      # User / Global level (applies to all your projects)
└── project-root/
    ├── CLAUDE.md                   # Global project level (loaded into every session)
    ├── .claude/rules/              # Modular & scoped rules (loaded selectively)
    └── sub-app/
        └── CLAUDE.md               # Sub-directory / Monorepo scope

CLAUDE.md (The Global Cheat Sheet)Think of CLAUDE.md as the main ReadMe for the AI. It provides high-level context and essential project memory. When to use CLAUDE.md:Common CLI Commands: Build, test, lint, and run scripts (npm test, docker compose up). Core Architecture: Tech stack summary, overall folder structure, and design principles. Global Rules: Non-negotiable guidelines that apply project-wide (e.g., "Strict TypeScript, no any").

Project Context: E-Commerce Web App

Build & Test Commands

Build: npm run build
Test single file: npx jest src/components/Button.test.tsx
Lint: npm run lint

High-Level Guidelines

All UI components must use React 19 functional syntax.
Never hardcode secrets or environment variables.

.claude/rules/ (Modular & Path-Scoped Rules)As projects grow, packing every guideline into CLAUDE.md bloats the prompt context and reduces overall compliance. The .claude/rules/ directory lets you create modular, topic-specific, or path-scoped rules (in .yml or .md). When to use .claude/rules/:Path-Specific Rules (globs): Guidelines that apply only to certain files (e.g., API routes vs. React components). Domain Separation: Splitting rules into dedicated files (testing.yml, security.yml, db-migrations.yml). Token Optimization: Prevent loading backend migration rules into context when editing CSS/React components.

.claude/rules/api-routes.yml

name: API & Endpoint Rules
globs:

"src/api/*/.ts"
"src/controllers/*/.ts"

rules:

id: input-validation description: Validate all incoming payloads with Zod schemas.
id: error-handling description: Never expose internal DB error traces in API responses.

Pro-Tips & Best Practices

Keep CLAUDE.md Concise: Aim for under 100–150 lines. Move specific domain details into .claude/rules/.
Combine Both Strategies: Put Commands & Core Pillars in CLAUDE.md[cite: 1].Put Framework/Directory Specifics in .claude/rules/[cite: 1].
Use Sub-Directory CLAUDE.md in Monorepos: Place localized CLAUDE.md files inside specific packages/apps (e.g., apps/web/CLAUDE.md and services/auth/CLAUDE.md) so sub-teams maintain isolated contexts[cite: 1].

# 📓 TanStack Query: Core Concepts & Summary

Shashank Trivedi — Thu, 23 Jul 2026 17:58:32 +0000

1. Introduction: What is TanStack Query?

TanStack Query (formerly React Query) is a framework-agnostic state management library designed specifically to manage Server State—handling data fetching, caching, background updating, and cache invalidation.

2. Server State vs. Client State & The Memory Reality

Client State: Owned and controlled entirely by the browser (e.g., isModalOpen, selected UI theme).
Server State: Owned by the remote backend database (e.g., user profiles, posts, cart items). The browser only holds a read-only temporary snapshot.

Where is data physically stored?

Physical Location: By default, cached data lives strictly in the browser tab's JavaScript RAM (In-Memory).
Backend ("The Server"): Refers to your remote API/database (regardless of whether it runs on Kubernetes, Docker containers, serverless functions, or bare metal).
Optional Persistence: You can opt to sync this RAM cache to localStorage, sessionStorage, or IndexedDB using TanStack Query Persisters.

import React, { useState } from 'react';
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
  useMutation,
  useQueryClient,
} from '@tanstack/react-query';

// 1. Initialize QueryClient (manages the RAM cache)
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 10000, // Data stays fresh in RAM for 10 seconds
    },
  },
});

// Mock API functions
async function fetchPost(postId) {
  const res = await fetch(`[https://jsonplaceholder.typicode.com/posts/$](https://jsonplaceholder.typicode.com/posts/$){postId}`);
  if (!res.ok) throw new Error('Network error');
  return res.json();
}

async function createPost(newPost) {
  const res = await fetch('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newPost),
  });
  return res.json();
}

// 2. Query Component (Fetching & Reading Data)
function PostViewer() {
  const [postId, setPostId] = useState(1);

  const { data, isLoading, isFetching, error } = useQuery({
    queryKey: ['post', postId], // Cache key
    queryFn: () => fetchPost(postId),
  });

  return (
    <div>
      <div>
        <button onClick={() => setPostId(1)}>Load Post 1</button>
        <button onClick={() => setPostId(2)}>Load Post 2</button>
      </div>

      {isFetching && <p style={{ color: 'orange' }}>Updating cache in background...</p>}

      {isLoading ? (
        <p>Loading initial data...</p>
      ) : error ? (
        <p style={{ color: 'red' }}>Error: {error.message}</p>
      ) : (
        <div>
          <h3>Post #{data.id}: {data.title}</h3>
          <p>{data.body}</p>
        </div>
      )}
    </div>
  );
}

// 3. Mutation Component (Updating Data & Invalidating Cache)
function CreatePostForm() {
  const [title, setTitle] = useState('');
  const client = useQueryClient();

  const mutation = useMutation({
    mutationFn: createPost,
    onSuccess: () => {
      // Mark cached post as stale to trigger background refetch
      client.invalidateQueries({ queryKey: ['post', 1] });
      setTitle('');
      alert('Post created! Cache invalidated.');
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    mutation.mutate({ title, body: 'Sample content', userId: 1 });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Enter post title..."
        value={title}
        onChange={(e) => setTitle(e.target.value)}
      />
      <button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? 'Saving...' : 'Add Post'}
      </button>
    </form>
  );
}

// 4. Main Application Wrapper
export default function App() {
  return (
    <QueryClientProvider client="{queryClient}">
      <PostViewer/>
      <hr />
      <CreatePostForm/>
    </QueryClientProvider>
  );
}```

# Never ask again what Vite does

Shashank Trivedi — Thu, 23 Jul 2026 12:13:54 +0000

Vite is a modern frontend build tool. In the React ecosystem, it is commonly used to create fast React + TypeScript apps with a lightweight dev server, instant module updates, and production builds powered by Rollup.

Official source anchors to read later:

Mental Model

Think of Vite as two connected tools:

A development server that serves source files as native browser ES modules.
A production build pipeline that bundles, optimizes, and outputs static assets.

During development, Vite does not bundle your whole app before the browser opens. It lets the browser request modules directly, transforms files only when they are requested, and updates changed modules through HMR.

During production builds, Vite uses Rollup to create optimized bundles. This is where tree shaking, chunk splitting, CSS extraction, asset hashing, and minification happen.

The practical result is:

Development startup is usually very fast.
File changes update quickly.
Production output is still bundled and optimized.
React + TypeScript setup needs less manual configuration than older webpack-style setups.

Internal Architecture: How It Works

Vite has different behavior in development and production.

Development Flow

When you run npm run dev, Vite starts a local server.

The flow is:

The browser loads index.html.
index.html points directly to /src/main.tsx.
The browser requests source modules as native ESM imports.
Vite transforms TypeScript, JSX, CSS, and assets on demand.
Dependencies from node_modules are pre-bundled with esbuild.
HMR updates only the changed modules instead of refreshing the whole page.

This is different from older bundlers that often build one large development bundle before the app starts.

Dependency Pre-Bundling

Vite pre-bundles dependencies with esbuild for two main reasons:

Convert CommonJS or mixed-format packages into ESM that the browser can import.
Reduce many tiny dependency files into fewer browser requests.

Your source code is transformed on demand. Your dependencies are optimized up front and cached.

HMR

HMR means Hot Module Replacement.

In a React app, when a component file changes, Vite and React Fast Refresh try to replace that module while preserving component state. If a change cannot be safely hot-reloaded, Vite falls back to a full page reload.

Production Build Flow

When you run npm run build, Vite uses Rollup.

The production flow is:

Vite reads index.html as the build entry.
It follows imports from src/main.tsx and the rest of the app.
TypeScript and JSX are transformed.
CSS and assets are processed.
Rollup tree-shakes unused code.
Output files are written to dist/ with hashed filenames.

Use npm run preview to serve the built dist/ output locally. preview is not the same as dev; it tests the production build output.

Setup

Create a React + TypeScript app:

npm create vite@latest my-vite-app -- --template react-ts
cd my-vite-app
npm install
npm run dev

Common scripts in package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  }
}

Common project structure:

my-vite-app/
  index.html
  package.json
  tsconfig.json
  tsconfig.app.json
  tsconfig.node.json
  vite.config.ts
  src/
    main.tsx
    App.tsx
    index.css
    assets/

The important difference from many older React setups is that index.html is part of the source graph. It usually contains this script:

<script type="module" src="/src/main.tsx"></script>

React + TypeScript Basics

src/main.tsx mounts your React app:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import { App } from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

src/App.tsx is a normal React component:

type Feature = {
  title: string;
  description: string;
};

const features: Feature[] = [
  {
    title: "Fast dev server",
    description: "Vite serves source files as native browser modules.",
  },
  {
    title: "Production bundling",
    description: "Vite uses Rollup to create optimized production assets.",
  },
];

export function App() {
  return (
    <main>
      <h1>Vite React TypeScript</h1>
      {features.map((feature) => (
        <article key={feature.title}>
          <h2>{feature.title}</h2>
          <p>{feature.description}</p>
        </article>
      ))}
    </main>
  );
}

Vite Config

The main config file is vite.config.ts.

Basic React config:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});

Add a dev server port:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    strictPort: true,
  },
});

Add a path alias:

import path from "node:path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Also add the alias to tsconfig.app.json so TypeScript understands it:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Now imports can use the alias:

import { ProductCard } from "@/components/ProductCard";

Environment Variables

Vite exposes environment variables through import.meta.env.

Only variables prefixed with VITE_ are exposed to client-side code.

.env:

VITE_API_BASE_URL=https://api.example.com

Use it in TypeScript:

const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

Common built-in values:

import.meta.env.MODE;
import.meta.env.DEV;
import.meta.env.PROD;
import.meta.env.BASE_URL;

Do not put secrets in VITE_ variables. They become part of the browser bundle.

CSS And Assets

Import CSS directly from TypeScript or TSX:

import "./App.css";

Use CSS modules for locally scoped class names:

import styles from "./ProductCard.module.css";

export function ProductCard() {
  return <article className={styles.card}>Product</article>;
}

Import assets from src:

import logoUrl from "./assets/logo.svg";

export function Header() {
  return <img src={logoUrl} alt="Logo" />;
}

Use public/ for files that should be copied as-is and referenced from the root path:

export function Header() {
  return <img src="/logo.svg" alt="Logo" />;
}

Important Vite Concepts

`index.html` Is An Entry File

Vite treats index.html as part of the app. This makes script entry, title, root element, and static tags easy to inspect.

Dev And Build Are Different Pipelines

Development uses native ESM and on-demand transforms. Production uses Rollup bundling. If something works in dev but not in build, test with:

npm run build
npm run preview

TypeScript Checking Is Separate

Vite transpiles TypeScript quickly, but type checking usually happens through tsc.

That is why the default React TypeScript build script often includes:

tsc -b && vite build

Plugins Extend The Pipeline

Vite plugins can transform files, add framework support, change build behavior, or integrate tools.

React support comes from:

import react from "@vitejs/plugin-react";

Microfrontends With Vite

Microfrontend architecture splits a frontend into independently built and deployed pieces.

The common terms are:

Host: the app users open directly.
Remote: an app that exposes components, pages, or utilities.
Exposed module: a module made available by a remote.
Remote entry: the generated JavaScript file that tells the host how to load exposed modules.
Shared dependency: a package such as React that host and remote should avoid duplicating.

Vite does not include module federation in core. A common way to learn this architecture with Vite is @originjs/vite-plugin-federation.

The example below creates two apps:

mf-remote: exposes a ProductCard component.
mf-host: loads and renders that remote component.

Final Folder Layout

vite-mf-demo/
  mf-remote/
    src/
      components/
        ProductCard.tsx
      App.tsx
      main.tsx
    vite.config.ts
    package.json
  mf-host/
    src/
      remotes.d.ts
      App.tsx
      main.tsx
    vite.config.ts
    package.json

Create The Apps

mkdir vite-mf-demo
cd vite-mf-demo

npm create vite@latest mf-remote -- --template react-ts
npm create vite@latest mf-host -- --template react-ts

Install dependencies in the remote:

cd mf-remote
npm install
npm install @originjs/vite-plugin-federation --save-dev
cd ..

Install dependencies in the host:

cd mf-host
npm install
npm install @originjs/vite-plugin-federation --save-dev
cd ..

Remote App

The remote app owns the component it exposes.

Create mf-remote/src/components/ProductCard.tsx:

export type ProductCardProps = {
  name: string;
  price: number;
  badge?: string;
};

export function ProductCard({ name, price, badge }: ProductCardProps) {
  return (
    <article
      style={{
        border: "1px solid #d0d7de",
        borderRadius: 8,
        padding: 16,
        maxWidth: 320,
        fontFamily: "sans-serif",
      }}
    >
      {badge ? <strong>{badge}</strong> : null}
      <h2>{name}</h2>
      <p>${price.toFixed(2)}</p>
      <button type="button">Add to cart</button>
    </article>
  );
}

Use it locally in mf-remote/src/App.tsx so the remote can be developed by itself:

import { ProductCard } from "./components/ProductCard";

export function App() {
  return (
    <main style={{ padding: 32 }}>
      <h1>Remote App</h1>
      <ProductCard name="Wireless Keyboard" price={89} badge="Remote" />
    </main>
  );
}

Make sure mf-remote/src/main.tsx imports the named App export:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Configure federation in mf-remote/vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "remoteApp",
      filename: "remoteEntry.js",
      exposes: {
        "./ProductCard": "./src/components/ProductCard.tsx",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  server: {
    port: 5001,
    strictPort: true,
  },
  preview: {
    port: 5001,
    strictPort: true,
  },
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

The remote will produce this file after build:

http://localhost:5001/assets/remoteEntry.js

That is the file the host needs.

Host App

The host app loads the remote module at runtime.

Configure federation in mf-host/vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "hostApp",
      remotes: {
        remoteApp: "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ["react", "react-dom"],
    }),
  ],
  server: {
    port: 5000,
    strictPort: true,
  },
  preview: {
    port: 5000,
    strictPort: true,
  },
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

Create mf-host/src/remotes.d.ts:

declare module "remoteApp/ProductCard" {
  export type ProductCardProps = {
    name: string;
    price: number;
    badge?: string;
  };

  export function ProductCard(props: ProductCardProps): JSX.Element;
}

TypeScript needs this declaration because remoteApp/ProductCard does not exist on disk in the host project. It is resolved by the federation runtime in the browser.

Use the remote component in mf-host/src/App.tsx:

import { lazy, Suspense } from "react";

const RemoteProductCard = lazy(async () => {
  const module = await import("remoteApp/ProductCard");

  return {
    default: module.ProductCard,
  };
});

export function App() {
  return (
    <main style={{ padding: 32, fontFamily: "sans-serif" }}>
      <h1>Host App</h1>
      <p>This component is loaded from the remote app at runtime.</p>

      <Suspense fallback={<p>Loading remote product card...</p>}>
        <RemoteProductCard
          name="Mechanical Keyboard"
          price={129}
          badge="Loaded from remote"
        />
      </Suspense>
    </main>
  );
}

Make sure mf-host/src/main.tsx imports the named App export:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
import "./index.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Run The Microfrontend Example

Build and preview the remote first:

cd mf-remote
npm run build
npm run preview

In another terminal, run the host:

cd mf-host
npm run dev

Open the host app:

http://localhost:5000

You should see the host page render ProductCard from the remote app.

For a production-like local test, build and preview both apps:

cd mf-remote
npm run build
npm run preview

Then in another terminal:

cd mf-host
npm run build
npm run preview

Open:

http://localhost:5000

Why The Remote Is Built Before Preview

The host references this remote entry:

http://localhost:5001/assets/remoteEntry.js

That file is generated during the remote build. Running vite preview serves the built dist/ directory, including assets/remoteEntry.js.

This makes the example close to how deployment works: the remote is built, deployed somewhere, and the host loads the deployed remote entry URL.

Production Deployment Model

In production, each app can be deployed separately.

Example:

https://products.example.com/assets/remoteEntry.js
https://shop.example.com/

The host config changes from localhost to the deployed URL:

federation({
  name: "hostApp",
  remotes: {
    remoteApp: "https://products.example.com/assets/remoteEntry.js",
  },
  shared: ["react", "react-dom"],
});

The deployment rule is simple: the remote entry URL must be reachable by the browser before the host tries to load it.

Microfrontend Troubleshooting

The Host Shows A Failed Dynamic Import Error

Check that the remote is running and the URL is correct:

http://localhost:5001/assets/remoteEntry.js

Open that URL directly in the browser. If it returns 404, rebuild and preview the remote.

The Host Port Changed Automatically

Use strictPort: true in both apps. Without it, Vite may choose another port if the configured one is busy.

TypeScript Cannot Find The Remote Module

Add a declaration file like src/remotes.d.ts in the host.

The import is resolved at runtime by module federation, not by TypeScript's normal file lookup.

React Hooks Break Or State Behaves Strangely

Make sure host and remote use compatible React versions and share React through the federation config:

shared: ["react", "react-dom"];

It Works In Dev But Fails After Build

Run the production-like test:

npm run build
npm run preview

Do this for both host and remote. Module federation issues often appear only when the final output path or remote entry URL changes.

Important APIs And Config Options

`defineConfig`

Wraps Vite config and gives better TypeScript support.

export default defineConfig({
  plugins: [react()],
});

`plugins`

Adds framework support and pipeline extensions.

plugins: [react()];

`server`

Controls the development server.

server: {
  port: 5173,
  strictPort: true,
}

`preview`

Controls the server used by vite preview.

preview: {
  port: 4173,
  strictPort: true,
}

`resolve.alias`

Creates import aliases.

resolve: {
  alias: {
    "@": path.resolve(__dirname, "./src"),
  },
}

`build`

Controls production output.

build: {
  outDir: "dist",
  sourcemap: true,
}

Vite Compared With Create React App

Create React App was a common default for React projects for years, but Vite is now a more common choice for new React apps.

Topic	Vite	Create React App
Dev server	Native ESM and on-demand transforms	webpack dev bundle
Build	Rollup-based production build	webpack build
Config	Direct `vite.config.ts`	Hidden config unless ejected or overridden
Speed	Usually faster startup and updates	Often slower on larger apps
Ecosystem	Modern plugin ecosystem	Legacy React app setup

When To Use Vite

Choose Vite when:

You are creating a new React + TypeScript app.
You want fast local development.
You want simple build configuration.
You need a plugin-based frontend toolchain.
You want to learn modern React tooling.

Be more careful when:

Your app depends on Node-only APIs in browser code.
You are migrating a very custom webpack setup.
You need a framework with server rendering, routing, and backend conventions built in. In that case, consider Next.js, Remix, or another full-stack framework.

Common Mistakes

Using Secret Values In `VITE_` Variables

Anything exposed through VITE_ is visible in browser code.

Use backend environment variables for secrets.

Forgetting To Run `npm run build`

The dev server can hide production-only issues. Always run:

npm run build

Expecting TypeScript Errors To Block Dev Transforms

Vite transforms TypeScript quickly, but full type checking is usually handled separately by tsc.

Importing Server-Only Packages Into Client Code

Browser code cannot use Node APIs such as fs, path, or server-only SDKs unless they are properly isolated.

Mismatching Host And Remote URLs

In microfrontends, the host's remote URL must match the actual served remoteEntry.js location.

Architecture Tips

Keep vite.config.ts small and intentional.
Use aliases for stable import paths, but do not overuse them.
Keep environment-specific values in .env files.
Run build and preview before deploying.
In microfrontends, define clear ownership boundaries between host and remote apps.
Share React between host and remotes.
Version remote component props carefully because the host depends on that contract.
Prefer exposing focused components or route modules instead of exposing an entire application too early.

Learning Path

Create a plain React + TypeScript Vite app.
Understand how index.html, src/main.tsx, and vite.config.ts connect.
Learn dev, build, and preview.
Add environment variables and a path alias.
Build a few components and import CSS/assets.
Create the host and remote microfrontend example.
Replace the localhost remote URL with a deployed remote URL.
Study Rollup options only when you need custom production output.

Quick Reference

Create an app:

npm create vite@latest my-app -- --template react-ts

Start development:

npm run dev

Build production assets:

npm run build

Preview production assets:

npm run preview

Install module federation plugin:

npm install @originjs/vite-plugin-federation --save-dev

Remote exposes a module:

federation({
  name: "remoteApp",
  filename: "remoteEntry.js",
  exposes: {
    "./ProductCard": "./src/components/ProductCard.tsx",
  },
  shared: ["react", "react-dom"],
});

Host consumes a remote:

federation({
  name: "hostApp",
  remotes: {
    remoteApp: "http://localhost:5001/assets/remoteEntry.js",
  },
  shared: ["react", "react-dom"],
});

Hands-On Workshop: Refactoring Anti-Patterns

Shashank Trivedi — Mon, 09 Feb 2026 07:15:03 +0000

Exercise 1: Spot the Anti-Patterns (20 minutes)

Instructions

Review each code snippet and identify the anti-patterns. Write down:

What anti-pattern(s) you see
Why it's problematic
What principle(s) it violates

Code Snippet A: User Dashboard

const UserDashboard = () => {
  const [user, setUser] = useState();
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [likes, setLikes] = useState(0);
  const [loading1, setLoading1] = useState(false);
  const [loading2, setLoading2] = useState(false);
  const [loading3, setLoading3] = useState(false);
  const [error1, setError1] = useState();
  const [error2, setError2] = useState();
  const [error3, setError3] = useState();

  useEffect(() => {
    setLoading1(true);
    fetch('/api/user/123')
      .then((res) => res.json())
      .then((data) => {
        setUser(data);
        setLoading1(false);
      })
      .catch((e) => {
        setError1(e);
        setLoading1(false);
      });

    setLoading2(true);
    fetch('/api/posts/123')
      .then((res) => res.json())
      .then((data) => {
        setPosts(data);
        setLoading2(false);
      });

    setLoading3(true);
    fetch('/api/comments/123')
      .then((res) => res.json())
      .then((data) => {
        setComments(data);
        setLoading3(false);
      });
  }, []);

  if (loading1 || loading2 || loading3) return <div>Loading...</div>;
  if (error1) return <div>Error: {error1}</div>;

  return (
    <div style={{ padding: '20px', backgroundColor: '#f5f5f5' }}>
      <div style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
        {user ? user.name : 'Unknown User'}
      </div>
      <div style={{ display: 'flex', gap: '16px' }}>
        <div style={{ flex: 1, padding: '16px', backgroundColor: 'white', borderRadius: '8px' }}>
          <h2 style={{ fontSize: '18px', marginBottom: '8px' }}>Posts ({posts.length})</h2>
          {posts.map((post) => (
            <div key={post.id} style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd' }}>
              {post.title}
            </div>
          ))}
        </div>
        <div style={{ flex: 1, padding: '16px', backgroundColor: 'white', borderRadius: '8px' }}>
          <h2 style={{ fontSize: '18px', marginBottom: '8px' }}>Comments ({comments.length})</h2>
          {comments.map((comment) => (
            <div key={comment.id} style={{ marginBottom: '8px', padding: '8px', border: '1px solid #ddd' }}>
              {comment.text}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

Anti-Patterns Present:

Click to see answers

Anti-Patterns Identified:

God Component - Component does too much (fetching, state management, rendering)
Poor Error Handling - Errors not handled consistently, no retry mechanism
Inline Styles - All styles inline, not reusable
Duplicated Logic - Three nearly identical fetch calls
State Management - Too many separate loading/error states
Magic Numbers - Hardcoded user ID '123'

Principles Violated:

Single Responsibility
DRY (Don't Repeat Yourself)
Separation of Concerns

Exercise 2: Refactor the God Component (30 minutes)

Your Task

Refactor the UserDashboard from Exercise 1. Split it into:

Custom hooks for data fetching
Smaller, focused components
Proper TypeScript types
CSS modules for styling

Step-by-Step Guide

Step 1: Define Types

// types/user.ts
export interface User {
  id: string;
  name: string;
  email: string;
}

export interface Post {
  id: string;
  title: "string;"
  content: string;
  userId: string;
}

export interface Comment {
  id: string;
  text: string;
  postId: string;
  userId: string;
}

Step 2: Create Data Fetching Hook

// hooks/useUserData.ts
interface UseUserDataResult {
  user: User | null;
  posts: Post[];
  comments: Comment[];
  loading: boolean;
  error: Error | null;
  refetch: () => void;
}

export function useUserData(userId: string): UseUserDataResult {
  // YOUR CODE HERE
  // Hint: Use a single state object for all data
  // Hint: Fetch all data in one useEffect
  // Hint: Include proper error handling
}

Your Implementation:

// Write your solution here

Step 3: Create Sub-Components

// components/UserDashboard/UserHeader.tsx
interface UserHeaderProps {
  user: User;
}

export const UserHeader = ({ user }: UserHeaderProps) => {
  // YOUR CODE HERE
};

// components/UserDashboard/PostsList.tsx
interface PostsListProps {
  posts: Post[];
}

export const PostsList = ({ posts }: PostsListProps) => {
  // YOUR CODE HERE
};

// components/UserDashboard/CommentsList.tsx
interface CommentsListProps {
  comments: Comment[];
}

export const CommentsList = ({ comments }: CommentsListProps) => {
  // YOUR CODE HERE
};

Your Implementation:

// Write your solutions here

Step 4: Create CSS Module

/* UserDashboard.module.css */
/* YOUR CODE HERE */

Step 5: Refactor Main Component

// components/UserDashboard/index.tsx
import styles from './UserDashboard.module.css';
import { useUserData } from '../../hooks/useUserData';
import { UserHeader } from './UserHeader';
import { PostsList } from './PostsList';
import { CommentsList } from './CommentsList';

export const UserDashboard = ({ userId }: { userId: string }) => {
  // YOUR CODE HERE
};

Your Implementation:

// Write your solution here

Click to see solution

// hooks/useUserData.ts
export function useUserData(userId: string): UseUserDataResult {
  const [state, setState] = useState&lt;{
    user: User | null;
    posts: Post[];
    comments: Comment[];
    loading: boolean;
    error: Error | null;
  }&gt;({
    user: null,
    posts: [],
    comments: [],
    loading: false,
    error: null,
  });

  const fetchData = useCallback(async () =&gt; {
    setState((prev) =&gt; ({ ...prev, loading: true, error: null }));

    try {
      const [userData, postsData, commentsData] = await Promise.all([
        fetch(`/api/user/${userId}`).then((r) =&gt; r.json()),
        fetch(`/api/posts/${userId}`).then((r) =&gt; r.json()),
        fetch(`/api/comments/${userId}`).then((r) =&gt; r.json()),
      ]);

      setState({
        user: userData,
        posts: postsData,
        comments: commentsData,
        loading: false,
        error: null,
      });
    } catch (error) {
      setState((prev) =&gt; ({
        ...prev,
        loading: false,
        error: error instanceof Error ? error : new Error('Failed to fetch data'),
      }));
    }
  }, [userId]);

  useEffect(() =&gt; {
    fetchData();
  }, [fetchData]);

  return { ...state, refetch: fetchData };
}

// components/UserDashboard/index.tsx
export const UserDashboard = ({ userId }: { userId: string }) =&gt; {
  const { user, posts, comments, loading, error, refetch } = useUserData(userId);

  if (loading) return ;
  if (error) return ;
  if (!user) return ;

  return (







  );
};

Exercise 3: Eliminate Magic Numbers (15 minutes)

Code to Refactor

// File: utils/validation.ts
export function validatePassword(password: string): boolean {
  if (password.length < 8) return false;
  if (password.length > 128) return false;
  if (!/[A-Z]/.test(password)) return false;
  if (!/[a-z]/.test(password)) return false;
  if (!/[0-9]/.test(password)) return false;
  if (!/[!@#$%^&*]/.test(password)) return false;
  return true;
}

export function validateUsername(username: string): boolean {
  if (username.length < 3) return false;
  if (username.length > 20) return false;
  if (!/^[a-zA-Z0-9_]+$/.test(username)) return false;
  return true;
}

export function validateFile(file: File): boolean {
  const maxSize = 10485760; // bytes
  if (file.size > maxSize) return false;

  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(file.type)) return false;

  return true;
}

Your Task

Extract all magic numbers and strings to named constants
Make error messages clear and informative
Return detailed validation results instead of just boolean

Your Refactored Code:

// Write your solution here

Click to see solution

// constants/validation.ts
export const PASSWORD_CONSTRAINTS = {
  MIN_LENGTH: 8,
  MAX_LENGTH: 128,
  REQUIRED_PATTERNS: {
    UPPERCASE: /[A-Z]/,
    LOWERCASE: /[a-z]/,
    DIGIT: /[0-9]/,
    SPECIAL: /[!@#$%^&amp;*]/,
  },
} as const;

export const USERNAME_CONSTRAINTS = {
  MIN_LENGTH: 3,
  MAX_LENGTH: 20,
  ALLOWED_PATTERN: /^[a-zA-Z0-9_]+$/,
} as const;

export const FILE_UPLOAD_CONSTRAINTS = {
  MAX_SIZE_BYTES: 10 * 1024 * 1024, // 10MB
  ALLOWED_MIME_TYPES: ['image/jpeg', 'image/png', 'image/gif'] as const,
} as const;

// types/validation.ts
export interface ValidationResult {
  valid: boolean;
  errors: string[];
}

// utils/validation.ts
export function validatePassword(password: string): ValidationResult {
  const errors: string[] = [];

  if (password.length &lt; PASSWORD_CONSTRAINTS.MIN_LENGTH) {
    errors.push(`Password must be at least ${PASSWORD_CONSTRAINTS.MIN_LENGTH} characters`);
  }

  if (password.length &gt; PASSWORD_CONSTRAINTS.MAX_LENGTH) {
    errors.push(`Password must be no more than ${PASSWORD_CONSTRAINTS.MAX_LENGTH} characters`);
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.UPPERCASE.test(password)) {
    errors.push('Password must contain at least one uppercase letter');
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.LOWERCASE.test(password)) {
    errors.push('Password must contain at least one lowercase letter');
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.DIGIT.test(password)) {
    errors.push('Password must contain at least one digit');
  }

  if (!PASSWORD_CONSTRAINTS.REQUIRED_PATTERNS.SPECIAL.test(password)) {
    errors.push('Password must contain at least one special character (!@#$%^&amp;*)');
  }

  return {
    valid: errors.length === 0,
    errors,
  };
}

export function validateUsername(username: string): ValidationResult {
  const errors: string[] = [];

  if (username.length &lt; USERNAME_CONSTRAINTS.MIN_LENGTH) {
    errors.push(`Username must be at least ${USERNAME_CONSTRAINTS.MIN_LENGTH} characters`);
  }

  if (username.length &gt; USERNAME_CONSTRAINTS.MAX_LENGTH) {
    errors.push(`Username must be no more than ${USERNAME_CONSTRAINTS.MAX_LENGTH} characters`);
  }

  if (!USERNAME_CONSTRAINTS.ALLOWED_PATTERN.test(username)) {
    errors.push('Username can only contain letters, numbers, and underscores');
  }

  return {
    valid: errors.length === 0,
    errors,
  };
}

export function validateFile(file: File): ValidationResult {
  const errors: string[] = [];

  if (file.size &gt; FILE_UPLOAD_CONSTRAINTS.MAX_SIZE_BYTES) {
    const maxSizeMB = FILE_UPLOAD_CONSTRAINTS.MAX_SIZE_BYTES / 1024 / 1024;
    errors.push(`File size must be less than ${maxSizeMB}MB`);
  }

  if (!FILE_UPLOAD_CONSTRAINTS.ALLOWED_MIME_TYPES.includes(file.type as any)) {
    errors.push(`File type must be one of: ${FILE_UPLOAD_CONSTRAINTS.ALLOWED_MIME_TYPES.join(', ')}`);
  }

  return {
    valid: errors.length === 0,
    errors,
  };
}

Exercise 4: Replace Switch Statement (15 minutes)

Code to Refactor

interface Notification {
  type: 'info' | 'success' | 'warning' | 'error';
  message: string;
}

export function getNotificationIcon(type: Notification['type']): React.ReactNode {
  switch (type) {
    case 'info':
      return <InfoIcon color="blue" size={24} />;
    case 'success':
      return <CheckIcon color="green" size={24} />;
    case 'warning':
      return <AlertIcon color="orange" size={24} />;
    case 'error':
      return <ErrorIcon color="red" size={24} />;
    default:
      return <InfoIcon color="gray" size={24} />;
  }
}

export function getNotificationColor(type: Notification['type']): string {
  switch (type) {
    case 'info':
      return '#3b82f6';
    case 'success':
      return '#10b981';
    case 'warning':
      return '#f59e0b';
    case 'error':
      return '#ef4444';
    default:
      return '#6b7280';
  }
}

export function getNotificationTitle(type: Notification['type']): string {
  switch (type) {
    case 'info':
      return 'Information';
    case 'success':
      return 'Success';
    case 'warning':
      return 'Warning';
    case 'error':
      return 'Error';
    default:
      return 'Notification';
  }
}

Your Task

Refactor to use configuration objects instead of switch statements.

Your Refactored Code:

// Write your solution here

Click to see solution

// constants/notifications.ts
import { InfoIcon, CheckIcon, AlertIcon, ErrorIcon } from '@/components/icons';

interface NotificationConfig {
  icon: React.ComponentType&lt;{ size: number }&gt;;
  color: string;
  title: string;
}

export const NOTIFICATION_CONFIGS: Record = {
  info: {
    icon: InfoIcon,
    color: '#3b82f6',
    title: 'Information',
  },
  success: {
    icon: CheckIcon,
    color: '#10b981',
    title: 'Success',
  },
  warning: {
    icon: AlertIcon,
    color: '#f59e0b',
    title: 'Warning',
  },
  error: {
    icon: ErrorIcon,
    color: '#ef4444',
    title: 'Error',
  },
} as const;

const DEFAULT_CONFIG: NotificationConfig = {
  icon: InfoIcon,
  color: '#6b7280',
  title: 'Notification',
};

// utils/notifications.ts
export function getNotificationConfig(type: Notification['type']): NotificationConfig {
  return NOTIFICATION_CONFIGS[type] ?? DEFAULT_CONFIG;
}

export function getNotificationIcon(type: Notification['type']): React.ReactNode {
  const config = getNotificationConfig(type);
  const IconComponent = config.icon;
  return ;
}

export function getNotificationColor(type: Notification['type']): string {
  return getNotificationConfig(type).color;
}

export function getNotificationTitle(type: Notification['type']): string {
  return getNotificationConfig(type).title;
}

// Even better: Use the config directly in components
export const NotificationComponent = ({ notification }: { notification: Notification }) =&gt; {
  const config = getNotificationConfig(notification.type);
  const IconComponent = config.icon;

  return (


      <h3>{config.title}</h3>
      <p>{notification.message}</p>

  );
};

Exercise 5: Fix Prop Drilling (20 minutes)

Code to Refactor

// App.tsx
const App = () => {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [user, setUser] = useState<User | null>(null);
  const [language, setLanguage] = useState('en');

  return (
    <Layout theme={theme} setTheme={setTheme} user={user} language={language}>
      <Dashboard theme={theme} user={user} language={language} setTheme={setTheme}>
        <Sidebar theme={theme} user={user} language={language}>
          <UserMenu user={user} theme={theme} setTheme={setTheme} language={language} />
          <Navigation language={language} theme={theme} />
        </Sidebar>
        <MainContent theme={theme} user={user} language={language}>
          <Header user={user} theme={theme} language={language} />
          <Content language={language} />
        </MainContent>
      </Dashboard>
    </Layout>
  );
};

Your Task

Create Context for theme, user, and language
Create custom hooks to access these values
Remove prop drilling

Your Solution:

// contexts/AppContext.tsx
// YOUR CODE HERE

// hooks/useTheme.ts, useUser.ts, useLanguage.ts
// YOUR CODE HERE

// Refactored App.tsx
// YOUR CODE HERE

Click to see solution

// contexts/AppContext.tsx
interface AppContextValue {
  theme: Theme;
  user: User | null;
  language: string;
  setTheme: (theme: Theme) =&gt; void;
  setUser: (user: User | null) =&gt; void;
  setLanguage: (language: string) =&gt; void;
}

const AppContext = createContext(undefined);

export const AppProvider = ({ children }: { children: React.ReactNode }) =&gt; {
  const [theme, setTheme] = useState('light');
  const [user, setUser] = useState(null);
  const [language, setLanguage] = useState('en');

  const value = useMemo(
    () =&gt; ({
      theme,
      user,
      language,
      setTheme,
      setUser,
      setLanguage,
    }),
    [theme, user, language],
  );

  return {children};
};

// hooks/useApp.ts
export const useApp = () =&gt; {
  const context = useContext(AppContext);
  if (!context) {
    throw new Error('useApp must be used within AppProvider');
  }
  return context;
};

export const useTheme = () =&gt; {
  const { theme, setTheme } = useApp();
  return { theme, setTheme };
};

export const useUser = () =&gt; {
  const { user, setUser } = useApp();
  return { user, setUser };
};

export const useLanguage = () =&gt; {
  const { language, setLanguage } = useApp();
  return { language, setLanguage };
};

// Refactored App.tsx
const App = () =&gt; {
  return (














  );
};

// Components consume only what they need
const UserMenu = () =&gt; {
  const { user } = useUser();
  const { theme, setTheme } = useTheme();
  // Use user and theme
};

const Header = () =&gt; {
  const { user } = useUser();
  // Only needs user
};

Exercise 6: Improve Error Handling (20 minutes)

Code to Refactor

const DataFetcher = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('/api/data')
      .then((res) => res.json())
      .then(setData)
      .catch((err) => console.error(err));
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

const FileUploader = () => {
  const handleUpload = async (file: File) => {
    try {
      await uploadFile(file);
      alert('Done!');
    } catch (error) {
      alert('Failed!');
    }
  };

  return <input type="file" onChange={(e) => handleUpload(e.target.files[0])} />;
};

Your Task

Add proper loading and error states, user feedback, and retry mechanisms.

Your Solution:

// Write your solution here

Click to see solution

// hooks/useDataFetch.ts
interface UseDataFetchState {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

export function useDataFetch(fetchFn: () =&gt; Promise) {
  const [state, setState] = useState&gt;({
    data: null,
    loading: false,
    error: null,
  });

  const execute = useCallback(async () =&gt; {
    setState({ data: null, loading: true, error: null });

    try {
      const result = await fetchFn();
      setState({ data: result, loading: false, error: null });
    } catch (error) {
      const apiError = error instanceof Error ? error : new Error('An unexpected error occurred');
      setState({ data: null, loading: false, error: apiError });
      logError(apiError);
    }
  }, [fetchFn]);

  return { ...state, execute, refetch: execute };
}

// Refactored DataFetcher
const DataFetcher = () =&gt; {
  const { data, loading, error, refetch } = useDataFetch(() =&gt;
    fetch('/api/data').then((res) =&gt; {
      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
      return res.json();
    }),
  );

  useEffect(() =&gt; {
    refetch();
  }, [refetch]);

  if (loading) {
    return ;
  }

  if (error) {
    return (


          <p>Failed to load data: {error.message}</p>
          Retry


    );
  }

  if (!data || data.length === 0) {
    return ;
  }

  return (

      {data.map((item) =&gt; (
        {item.name}
      ))}

  );
};

// Refactored FileUploader
const FileUploader = () =&gt; {
  const [uploadState, setUploadState] = useState&lt;{
    status: 'idle' | 'uploading' | 'success' | 'error';
    message?: string;
    progress?: number;
  }&gt;({ status: 'idle' });

  const handleUpload = async (file: File) =&gt; {
    setUploadState({ status: 'uploading', progress: 0 });

    try {
      await uploadFileWithProgress(file, (progress) =&gt; {
        setUploadState({ status: 'uploading', progress });
      });

      setUploadState({
        status: 'success',
        message: `Successfully uploaded ${file.name}`,
      });

      // Auto-clear after 3 seconds
      setTimeout(() =&gt; {
        setUploadState({ status: 'idle' });
      }, 3000);
    } catch (error) {
      const errorMessage = error instanceof Error ? `Upload failed: ${error.message}` : 'An unexpected error occurred';

      setUploadState({
        status: 'error',
        message: errorMessage,
      });

      logError(error, { context: 'file-upload', fileName: file.name });
    }
  };

  return (

       e.target.files?.[0] &amp;&amp; handleUpload(e.target.files[0])}
        disabled={uploadState.status === 'uploading'}
      /&gt;

      {uploadState.status === 'uploading' &amp;&amp; }

      {uploadState.message &amp;&amp; (
         setUploadState({ status: 'idle' })}
        /&gt;
      )}

  );
};

Bonus Exercise: Real Codebase Refactoring (30+ minutes)

Task

Find a file in your codebase with anti-patterns
Identify 2-3 specific anti-patterns
Refactor the code
Create a PR with before/after comparison
Present your refactoring to the group

Checklist

[ ] Identified specific anti-patterns
[ ] Wrote proper TypeScript types
[ ] Extracted magic numbers/strings
[ ] Improved error handling
[ ] Added tests
[ ] Updated documentation
[ ] Code review feedback addressed

Workshop Wrap-up

Group Discussion (20 minutes)

Questions to discuss:

Which anti-pattern is most common in our codebase?
Which refactoring had the biggest impact?
What obstacles do we face when refactoring?
How can we prevent anti-patterns in new code?
What should our team coding standards include?

Action Items

Individual commitments:

I will refactor *********_********* this week
I will watch for *********_********* in code reviews
I will share *********_********* with the team

Team commitments:

Update code review checklist
Schedule monthly code quality sessions
Create ESLint rules for common anti-patterns
Document team coding standards

Additional Resources

Practice Repos

Reading

"Refactoring" by Martin Fowler
"Clean Code" by Robert Martin
"Effective TypeScript" by Dan Vanderkam

Tools

ESLint with TypeScript rules
SonarQube for code quality metrics
Prettier for consistent formatting

Feedback Form

Please provide feedback:

What worked well in this workshop?
What could be improved?
Which exercises were most valuable?
What topics would you like to cover next?
Would you recommend this to other developers?

Remember: Refactoring is a skill that improves with practice.

Don't aim for perfect code - aim for continuous improvement!

Code Anti-Patterns and Best Practices Guide

Shashank Trivedi — Mon, 09 Feb 2026 06:59:49 +0000

Code Anti-Patterns and Best Practices Guide (Conceptual Edition)

This document intentionally uses masked / pseudo-code.
The goal is to explain design ideas, not provide copy-paste implementations.

1. Switch / If-Else Ladders

❌ Anti-Pattern

function handle(type) {
  if (type === 'A') return ResultA;
  else if (type === 'B') return ResultB;
  else if (type === 'C') return ResultC;
  // keeps growing...
  else return DefaultResult;
}

Problems

Hard to extend
Violates Open/Closed Principle
Increasing cognitive load

✅ Better Pattern: Lookup Strategy

const TYPE_MAP = {
  A: ResultA,
  B: ResultB,
  C: ResultC,
};

function handle(type) {
  return TYPE_MAP[type] ?? DefaultResult;
}

2. Magic Numbers and Strings

❌ Anti-Pattern

if (value > 52428800) {
  throw Error('Too large');
}

✅ Better Pattern

const LIMITS = {
  MAX_SIZE: /* 50 MB */,
};

if (value > LIMITS.MAX_SIZE) {
  throw Error('Too large');
}

3. Code Duplication

❌ Anti-Pattern

function actionFromScreenA() {
  /* same logic */
}

function actionFromScreenB() {
  /* same logic again */
}

✅ Better Pattern

function sharedAction(input, callbacks) {
  /* common logic */
}

4. Redundant State

❌ Anti-Pattern

state = {
  data,
  filteredData,
  count,
  hasData,
};

✅ Better Pattern

state = {
  data,
  filter,
};

// filteredData, count derived when needed

5. Long Parameter Lists

❌ Anti-Pattern

createReport(a, b, c, d, e, f, g);

✅ Better Pattern

createReport({
  title,
  range,
  format,
  metadata,
});

6. Inline Styles Everywhere

❌ Anti-Pattern

<div style={{ /* many inline values */ }} />

✅ Better Pattern

<div className="card" />

7. Scattered Filter Logic

❌ Anti-Pattern

// repeated in many places
data.filter(/* custom logic */);

✅ Better Pattern

applyFilters(data, filters);

8. `any` Type Abuse

❌ Anti-Pattern

function process(data: any): any {}

✅ Better Pattern

function process(data: KnownType): ResultType {}

9. Prop Drilling

❌ Anti-Pattern

<ComponentA prop={x}>
  <ComponentB prop={x}>
    <ComponentC prop={x} />
  </ComponentB>
</ComponentA>

✅ Better Pattern

// shared context / store
useSharedValue();

10. God Components

❌ Anti-Pattern

// 1000-line component
// state + API + logic + UI mixed

✅ Better Pattern

// small components
// hooks for logic
// composition at top level

11. Premature Optimization

❌ Anti-Pattern

// caching, memoization, virtualization everywhere

✅ Better Pattern

// simple code first
// optimize after measuring

12. Poor Error Handling

❌ Anti-Pattern

catch (e) {
  console.log(e);
}

✅ Better Pattern

showErrorToUser();
logErrorWithContext();
allowRetry();

Summary Checklist

Prefer clarity over cleverness
Centralize logic
Derive state instead of storing it
Optimize only after measuring
Write code for humans first

Last updated: February 2026

React - Quick Revision

Shashank Trivedi — Fri, 07 Mar 2025 16:28:54 +0000

Bytegrad best practices React

Bytegred Typescript for React

How React works under the hood

Prisma ORM

Shashank Trivedi — Mon, 21 Oct 2024 11:10:30 +0000

1- Install Prisma: If you haven't installed Prisma yet, run the following commands to install it:

npm install prisma --save-dev
npx prisma init

2- Update the prisma/schema.prisma file:

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

3- Set the correct DATABASE_URL in your .env file, such as:

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

4- To generate prisma modal from existing tables

npx prisma db pull


/* This command will introspect the existing database and
automatically generate models in the `prisma/schema.prisma` file
based on the structure of your tables. */

5- Once the introspection is done, you can generate Prisma Client to interact with your database.

npx prisma generate

Key terms In data analytics

Shashank Trivedi — Fri, 18 Oct 2024 07:53:42 +0000

You must have heard about the terms Metric , What is a Dimension , what is a segment and even what is a characteristic , how these terms are different and why it is important to understand each of them.

Let's begin.

Metric: A measurable number that quantifies performance or an outcome.A metric is a numerical value that represents something you’re tracking.
Examples:

Website analytics: Page views, Sessions, Bounce rate.
E-commerce: Revenue, Total orders, Conversion rate.

Dimensions: A descriptive attribute that adds context to a metric.A dimension gives more context to your data, often answering "when," "where," or "which category.

For a metric like Total sales:
- Dimensions could be:
- Date (Sales on Oct 17)
- Product category (Shoes vs. Electronics)
- Location (Sales from New York)

Characteristics: Qualities or features of the data or dataset that describe how it behaves.Characteristics describe patterns or behaviors of the data.
A characteristic of website traffic might be:
- High bounce rate in certain countries.
- Seasonal behavior (more traffic during holidays).

Segment:A segment is a subset of data that shares common attributes based on specific conditions. Focused part of your data.
Example : slice of a pizza. ,High-value customer, Abandoned cart users

Bringing it all together with an Example
Imagine you run an online shoe store.

Metric: You measure Revenue (numerical).
Dimension: You break revenue down by Product category (e.g., sports shoes, formal shoes).
Characteristic: You notice seasonality—higher revenue in December due to holiday shopping.

Postgresql commands

Shashank Trivedi — Mon, 14 Oct 2024 16:33:09 +0000

Install postgresql
brew install postgresql@14
Start postgresql as a service
brew services start postgresql@14
Check if postgres is running
psql --version
If you don’t want PostgreSQL to run as a service, you can start it manually:
pg_ctl -D /opt/homebrew/var/postgres start
Stop the service
brew services stop postgres
Restart the service
brew services restart postgres
List all running services
brew services list
Login to postgres
psql postgres
Create User
CREATE USER app_user WITH PASSWORD app_password;
Alter role
ALTER ROLE app_user CREATE_DB;
check all users
\du
Exit using CTRL+D
Login using new user
psql postgres -u app_user
create Database
CREATE DATABASE app_database
To check all databases
\l
connect to db
\connect app_database
list all tables
\dl
check table definition
\d table_name
Once you are connected to the database, you can run the SQL script file using the following command
\i /path/to/your/script.sql
you can exit the psql interface by typing
\q

Once you're connected, you can use the COPY command to import the CSV file. The basic syntax is:
COPY table_name FROM '/path/to/your/file.csv' DELIMITER ',' CSV HEADER;

Leetcode LinkedList Questions

Shashank Trivedi — Wed, 09 Oct 2024 05:45:00 +0000

Reverse Linked List (LeetCode #206) Difficulty: Easy Concepts: Iterative and recursive approaches.
Merge Two Sorted Lists (LeetCode #21) Difficulty: Easy Concepts: Linked list traversal and merging techniques.
Remove Nth Node From End of List **(LeetCode #19) **Difficulty: Medium Concepts: Two-pointer technique (slow and fast pointer).
Linked List Cycle **(LeetCode #141) **Difficulty: Easy Problem: Detect whether a linked list contains a cycle. Concepts: Floyd’s cycle detection algorithm (tortoise and hare).
Linked List Cycle II **(LeetCode #142) **Difficulty: Medium Problem: Find the node where the cycle begins in a linked list. Concepts: Floyd’s cycle detection, meeting point of slow and fast pointers.
Add Two Numbers (LeetCode #2) Difficulty: Medium Problem: Given two non-empty linked lists representing two non-negative integers, add the two numbers. Concepts: Linked list traversal and addition with carry.
Intersection of Two Linked Lists (LeetCode #160) Difficulty: Easy Problem: Find the node at which two linked lists intersect. Concepts: Two-pointer technique and linked list lengths.
Palindrome Linked List (LeetCode #234) Difficulty: Easy Problem: Check whether a linked list is a palindrome. Concepts: Slow and fast pointer, reversing the second half of the list.
Flatten a Multilevel Doubly Linked List (LeetCode #430) Difficulty: Medium Problem: Flatten a multilevel doubly linked list. Concepts: Recursion and linked list traversal.
Sort List (LeetCode #148) Difficulty: Medium Problem: Sort a linked list in O(n log n) time and O(1) space. Concepts: Merge sort on linked lists.
Reorder List (LeetCode #143) Difficulty: Medium Problem: Reorder a linked list by alternating nodes from the start and end. Concepts: Linked list manipulation, reversing second half of the list.
Rotate List (LeetCode #61) Difficulty: Medium Problem: Rotate a linked list to the right by k places. Concepts: Length of list, rotating nodes. 13.Copy List with Random Pointer (LeetCode #138) Difficulty: Medium Problem: Deep copy of a linked list where each node has a random pointer. Concepts: HashMap or constant space cloning technique.
Swap Nodes in Pairs **(LeetCode #24) **Difficulty: Medium Problem: Swap every two adjacent nodes in a linked list. Concepts: Recursion and pointer manipulation.
Remove Duplicates from Sorted List (LeetCode #83) Difficulty: Easy Problem: Remove duplicates from a sorted linked list. Concepts: Linked list traversal and in-place modifications.
Odd Even Linked List **(LeetCode #328) **Difficulty: Medium Problem: Group all odd nodes together followed by even nodes. Concepts: Linked list rearrangement.
Reverse Nodes in k-Group **(LeetCode #25) **Difficulty: Hard Problem: Reverse nodes in groups of k at a time. Concepts: Recursion and linked list manipulation.
Split Linked List in Parts (LeetCode #725) Difficulty: Medium Problem: Split a linked list into k parts. Concepts: Linked list traversal and partitioning.

Sliding Window Questions

Shashank Trivedi — Fri, 04 Oct 2024 18:45:21 +0000

I have curated a list of leetode questions based on sliding window approach.

Any question where something is asked related to subarray, substring, consecutive element, asking max , min , longest shortest might be solved using sliding window technique

Easy Level:

Maximum Average Subarray I
Problem: Given an array, find the contiguous subarray of given length k that has the maximum average.
Longest Substring Without Repeating Characters
Problem: Find the length of the longest substring without repeating characters.
Minimum Size Subarray Sum
Problem: Find the minimal length of a contiguous subarray of which the sum is greater than or equal to a given target.
Find All Anagrams in a String
Problem: Given two strings, find all start indices of the first string's anagrams in the second string.

Medium Level:

Longest Substring with At Most Two Distinct Characters
Problem: Find the length of the longest substring that contains at most two distinct characters.
Permutation in String
Problem: Given two strings, check if one string is a permutation of the other within a sliding window of the second string.
Longest Repeating Character Replacement
Problem: Find the length of the longest substring that can be turned into the same character by replacing at most k characters.
Subarrays with K Different Integers
Problem: Find the number of subarrays with exactly k distinct integers.
Grumpy Bookstore Owner
Problem: Maximize the number of satisfied customers by applying a "non-grumpy" behavior on a contiguous window of customers.
Sliding Window Maximum
Problem: Given an array, find the maximum value in every sliding window of size k.

Hard Level:

Minimum Window Substring
Problem: Given two strings, find the minimum window in the first string that contains all characters of the second string.
Longest Substring with At Most K Distinct Characters
Problem: Find the length of the longest substring that contains at most k distinct characters.
Shortest Subarray with Sum at Least K
Problem: Find the shortest subarray with a sum of at least k.
Subarray Product Less Than K
Problem: Find the number of contiguous subarrays where the product of all elements is less than k.
Count Number of Nice Subarrays
Problem: Find the number of subarrays that contain exactly k odd numbers.

DEV Community: Shashank Trivedi

Claude Built in commands and skills

1- Core Built-In Commands (Engine & Session Controls)

Context & Memory Management

Session Flow & Navigation

Execution Controls

2- Bundled & Custom Skills (AI Workflows)

Essential Shipped Skills

3. How Skills Are Configured Under the Hood

Frontmatter Directives Key:

Mastering Claude Code Configs: `CLAUDE.md` vs `.claude/rules/`

The Core Hierarchy & Scope

Project Context: E-Commerce Web App

Build & Test Commands

High-Level Guidelines

.claude/rules/api-routes.yml

# 📓 TanStack Query: Core Concepts & Summary

1. Introduction: What is TanStack Query?

2. Server State vs. Client State & The Memory Reality

Where is data physically stored?

# Never ask again what Vite does

Mental Model

Internal Architecture: How It Works

Development Flow

Dependency Pre-Bundling

HMR

Production Build Flow

Setup

React + TypeScript Basics

Vite Config

Environment Variables

CSS And Assets

Important Vite Concepts

index.html Is An Entry File

Dev And Build Are Different Pipelines

TypeScript Checking Is Separate

Plugins Extend The Pipeline

Microfrontends With Vite

Final Folder Layout

Create The Apps

Remote App

Host App

Run The Microfrontend Example

Why The Remote Is Built Before Preview

Production Deployment Model

Microfrontend Troubleshooting

The Host Shows A Failed Dynamic Import Error

The Host Port Changed Automatically

TypeScript Cannot Find The Remote Module

React Hooks Break Or State Behaves Strangely

It Works In Dev But Fails After Build

Important APIs And Config Options

defineConfig

plugins

server

preview

resolve.alias

build

Vite Compared With Create React App

When To Use Vite

Common Mistakes

Using Secret Values In VITE_ Variables

Forgetting To Run npm run build

Expecting TypeScript Errors To Block Dev Transforms

Importing Server-Only Packages Into Client Code

Mismatching Host And Remote URLs

Architecture Tips

Learning Path

Quick Reference

Hands-On Workshop: Refactoring Anti-Patterns

Exercise 1: Spot the Anti-Patterns (20 minutes)

Instructions

Code Snippet A: User Dashboard

Exercise 2: Refactor the God Component (30 minutes)

Your Task

Step-by-Step Guide

Exercise 3: Eliminate Magic Numbers (15 minutes)

Code to Refactor

Your Task

Exercise 4: Replace Switch Statement (15 minutes)

`index.html` Is An Entry File

`defineConfig`

`plugins`

`server`

`preview`

`resolve.alias`

`build`

Using Secret Values In `VITE_` Variables

Forgetting To Run `npm run build`

8. `any` Type Abuse