DEV Community: Mohd Amir

MERN + TypeScript Code Cheat Sheet — Part 2 (BullMQ, Puppeteer, SQL, Testing, React, Git/Docker/curl)

Mohd Amir — Mon, 05 Oct 2026 10:35:59 +0000

MERN Cheat Sheet — Part 2

(verify) = not in my repos and I'm not 100% sure of the API. Versions: see Part 1 (backend: bullmq ^6.3.11, ioredis ^6.0.0, vitest ^4.1.11, supertest ^7.1.4, mongodb-memory-server ^10.2.3; frontend: react ^19.2.8, vite ^8.3.0, react-router-dom ^7.18.4, @tanstack/react-query ^5.104.1, react-hook-form ^7.89.0, @hookform/resolvers ^5.9.1, axios ^1.20.0, tailwindcss ^4.3.3, vitest ^5.0.3). Puppeteer and MySQL are in neither repo.

BullMQ + Redis
Puppeteer PDF
SQL (MySQL)
Testing
React + Vite + TypeScript
Git, Docker and curl

6. BullMQ + Redis

6.1 Folder structure

src/
  config/redis.ts
  queues/pdf.queue.ts       # Queue instances (used by the API)
  jobs/pdf.job.ts           # job payload types + the processor function
  workers/pdf.worker.ts     # Worker wiring
  workers/index.ts          # separate process: starts all workers

Gotcha: my repo currently keeps queue + worker together in src/queues/pdf/; the API process should only import queues, never workers.

6.2 ioredis connection

import { Redis } from "ioredis";
import { env } from "./env.js";

export const connection = new Redis({
  host: env.REDIS_HOST,
  port: env.REDIS_PORT,
  maxRetriesPerRequest: null,   // required for BullMQ Workers
});

Gotcha: my repo has maxRetriesPerRequest: 0 — BullMQ warns/errors for Workers; null = retry forever.

6.3 Queue

import { Queue } from "bullmq";
import { connection } from "../config/redis.js";

export interface PdfJobData { reportId: string; userId: string }

export const pdfQueue = new Queue<PdfJobData>("export-pdf", {
  connection,
  defaultJobOptions: { removeOnComplete: true },
});

Gotcha: the queue name is the contract — Queue and Worker must use the exact same string.

6.4 Add job (attempts, backoff, deterministic jobId)

await pdfQueue.add(
  "render",
  { reportId, userId },
  {
    jobId: `pdf-${reportId}`,                     // same id => no duplicate job
    attempts: 3,
    backoff: { type: "exponential", delay: 2000 },
    removeOnComplete: { age: 3600 },              // keep 1h so status stays queryable
    removeOnFail: { age: 24 * 3600 },
  },
);

Gotcha: while a job with that jobId still exists, add is silently ignored — with removeOnComplete: true the id is freed immediately, so status lookups return nothing. Avoid : in custom ids (verify).

6.5 Worker with concurrency

import { Worker, type Job } from "bullmq";

export const pdfWorker = new Worker<PdfJobData>(
  "export-pdf",
  async (job: Job<PdfJobData>) => {
    await job.updateProgress(10);
    const path = await renderPdf(job.data.reportId);
    await job.updateProgress(100);
    return { path };                       // becomes job.returnvalue
  },
  { connection, concurrency: 2 },
);

Gotcha: throw to fail/retry; the thrown error's message ends up in failedReason.

6.6 Job events

pdfWorker.on("completed", (job) => logger.info({ id: job.id }, "done"));
pdfWorker.on("failed", (job, err) => logger.error({ id: job?.id, err }, "failed"));
pdfWorker.on("error", (err) => logger.error({ err }, "worker error"));   // Redis/connection errors

Gotcha: without an error listener, a Redis connection error can crash the process; in failed, job can be undefined.

6.7 Job status endpoint

router.get("/exports/:reportId", authenticate, asyncHandler(async (req, res) => {
  const job = await pdfQueue.getJob(`pdf-${req.params.reportId}`);
  if (!job) throw new ApiError(404, "Job not found", "NOT_FOUND");

  res.json({ success: true, data: {
    state: await job.getState(),          // waiting | active | completed | failed | delayed
    progress: job.progress,
    result: job.returnvalue,
    error: job.failedReason,
  } });
}));

Gotcha: check job.data.userId === req.auth.userId before returning — otherwise anyone can read anyone's job.

6.8 Separate worker process (`src/workers/index.ts`)

import { connectDatabase, disconnectDatabase } from "../config/db.js";
import { connection } from "../config/redis.js";
import { pdfWorker } from "./pdf.worker.js";

const workers = [pdfWorker];

await connectDatabase();                    // top-level await OK with ESM

async function shutdown() {
  await Promise.all(workers.map((w) => w.close()));   // waits for active jobs to finish
  await disconnectDatabase();
  await connection.quit();
}
for (const sig of ["SIGINT", "SIGTERM"] as const) {
  process.once(sig, () => { shutdown().then(() => process.exit(0)).catch(() => process.exit(1)); });
}

Gotcha: add "worker": "tsx watch src/workers/index.ts" / "start:worker": "node dist/workers/index.js" scripts; scale workers by running more processes.

6.9 Graceful close (API side)

await pdfQueue.close();
await connection.quit();

Gotcha: worker.close() waits for in-flight jobs; worker.close(true) force-closes and the job is retried as stalled.

6.10 docker-compose for Redis + Mongo

services:
  mongo:
    image: mongo:7
    ports: ["27017:27017"]
    volumes: [mongo_data:/data/db]
  redis:
    image: redis:7
    ports: ["6479:6379"]        # host 6479 -> container 6379 (matches REDIS_PORT default)
    volumes: [redis_data:/data]
volumes:
  mongo_data:
  redis_data:

Gotcha: inside another container use the service name (redis, mongo), not localhost.

7. Puppeteer PDF

(Not in my repos — npm i puppeteer, latest stable assumed, (verify) on option details.)

7.1 Launch + render

import puppeteer from "puppeteer";

const browser = await puppeteer.launch({
  headless: true,
  args: ["--no-sandbox", "--disable-setuid-sandbox"],   // needed in most Docker setups
});

Gotcha: --no-sandbox is for containers; don't use it where you can run the sandbox.

7.2 setContent + pdf options

const page = await browser.newPage();
await page.setContent(html, { waitUntil: "networkidle0" });

const pdf = await page.pdf({
  format: "A4",
  printBackground: true,                    // otherwise CSS backgrounds are dropped
  margin: { top: "20mm", right: "15mm", bottom: "20mm", left: "15mm" },
  displayHeaderFooter: false,
});

Gotcha: page.pdf returns a Uint8Array in recent versions (older: Buffer) — wrap with Buffer.from(pdf) before res.send/fs.writeFile (verify).

7.3 Close page and browser

const page = await browser.newPage();
try {
  await page.setContent(html);
  return await page.pdf({ format: "A4" });
} finally {
  await page.close();       // always, even on error
}

Gotcha: leaked pages/browsers are leaked Chromium processes (hundreds of MB each).

7.4 Reuse one browser

import type { Browser } from "puppeteer";

let browserPromise: Promise<Browser> | undefined;
export const getBrowser = () => (browserPromise ??= puppeteer.launch({ args: ["--no-sandbox"] }));

export async function closeBrowser() {
  if (browserPromise) await (await browserPromise).close();
  browserPromise = undefined;
}

Gotcha: store the promise, not the browser, so concurrent first calls don't launch twice; call closeBrowser() on shutdown.

7.5 Inside a BullMQ worker

export const pdfWorker = new Worker<PdfJobData>("export-pdf", async (job) => {
  const browser = await getBrowser();
  const page = await browser.newPage();
  try {
    await page.setContent(await buildHtml(job.data.reportId), { waitUntil: "networkidle0" });
    const pdf = await page.pdf({ format: "A4", printBackground: true });
    await fs.writeFile(`exports/${job.data.reportId}.pdf`, pdf);
    return { path: `exports/${job.data.reportId}.pdf` };
  } finally {
    await page.close();
  }
}, { connection, concurrency: 2 });

Gotcha: concurrency = concurrent pages in one browser; add await closeBrowser() to the worker's shutdown (6.8).

8. SQL (MySQL)

No SQL in my repos; MySQL 8 assumed. Illustrative tables: employees(id, name, dept_id, salary, manager_id), departments(id, name), orders(id, customer_id, total, created_at).

8.1 INNER JOIN / LEFT JOIN

SELECT e.name, d.name AS dept
FROM employees e
INNER JOIN departments d ON d.id = e.dept_id;     -- only matching rows

SELECT d.name, e.name
FROM departments d
LEFT JOIN employees e ON e.dept_id = d.id;        -- all departments, NULL if no employees

Gotcha: a WHERE on the right table's column turns a LEFT JOIN into an INNER JOIN — put the condition in ON.

8.2 GROUP BY + HAVING

SELECT dept_id, COUNT(*) AS n, AVG(salary) AS avg_salary
FROM employees
GROUP BY dept_id
HAVING COUNT(*) > 5
ORDER BY avg_salary DESC;

Gotcha: WHERE filters rows before grouping; HAVING filters groups after.

8.3 Subqueries

SELECT name FROM employees
WHERE salary > (SELECT AVG(salary) FROM employees);                 -- scalar

SELECT name FROM employees
WHERE dept_id IN (SELECT id FROM departments WHERE name = 'Sales'); -- IN

SELECT d.name FROM departments d
WHERE EXISTS (SELECT 1 FROM employees e WHERE e.dept_id = d.id);    -- correlated

Gotcha: prefer EXISTS over IN for large subqueries; NOT IN returns nothing if the subquery has a NULL.

8.4 Window functions: ROW_NUMBER, RANK

SELECT name, dept_id, salary,
  ROW_NUMBER() OVER (PARTITION BY dept_id ORDER BY salary DESC) AS rn,
  RANK()       OVER (PARTITION BY dept_id ORDER BY salary DESC) AS rnk
FROM employees;

Gotcha: ROW_NUMBER never ties; RANK ties then skips (1,1,3); DENSE_RANK ties without skipping (1,1,2).

8.5 Top-N per group

SELECT * FROM (
  SELECT e.*, ROW_NUMBER() OVER (PARTITION BY dept_id ORDER BY salary DESC) AS rn
  FROM employees e
) t
WHERE rn <= 3;

Gotcha: you can't filter on a window function in the same WHERE — wrap it in a subquery/CTE.

8.6 Second-highest value

SELECT DISTINCT salary FROM employees ORDER BY salary DESC LIMIT 1 OFFSET 1;

-- NULL if there is no second value:
SELECT (SELECT DISTINCT salary FROM employees ORDER BY salary DESC LIMIT 1 OFFSET 1) AS second_highest;

-- with ties handled:
SELECT salary FROM (SELECT salary, DENSE_RANK() OVER (ORDER BY salary DESC) AS r FROM employees) t WHERE r = 2 LIMIT 1;

Gotcha: without DISTINCT, duplicates of the top salary count as "second".

8.7 Composite and covering indexes

CREATE INDEX idx_orders_cust_date ON orders (customer_id, created_at);           -- composite
CREATE INDEX idx_orders_cover     ON orders (customer_id, created_at, total);    -- covering

Gotcha: leftmost-prefix rule — (customer_id, created_at) helps customer_id alone but not created_at alone; "covering" = every selected column is in the index, so no table lookup (Using index in EXPLAIN).

8.8 EXPLAIN

EXPLAIN SELECT total FROM orders WHERE customer_id = 42 ORDER BY created_at DESC;
-- EXPLAIN ANALYZE <query>;   -- MySQL 8.0.18+: actually runs it, shows real timings

Gotcha: look at type (ALL = full scan; ref/range = good), key (index used), rows, and Extra (Using filesort / Using temporary = bad signs).

8.9 Transactions

START TRANSACTION;
UPDATE accounts SET balance = balance - 100 WHERE id = 1;
UPDATE accounts SET balance = balance + 100 WHERE id = 2;
COMMIT;      -- or ROLLBACK;

Gotcha: needs InnoDB; DDL statements (CREATE/ALTER) implicitly commit. Use SELECT ... FOR UPDATE to lock rows you're about to change.

9. Testing

9.1 Vitest config + env setup

// vitest.config.ts  (verify: backend config wasn't in my dump; I only saw tests/setup-env.ts)
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: { environment: "node", setupFiles: ["./tests/setup-env.ts"], hookTimeout: 60_000 },
});

// tests/setup-env.ts
process.env.NODE_ENV = "test";
process.env.MONGO_URI = "mongodb://127.0.0.1:27017/auth_test";
process.env.LOG_LEVEL = "silent";
process.env.ACCESS_TOKEN_SECRET = "test-access-secret-with-at-least-32-characters";
process.env.REFRESH_TOKEN_SECRET = "test-refresh-secret-with-at-least-32-characters";
process.env.AUTH_COOKIE_SECURE = "false";

Gotcha: env must be set before env.ts is imported — that's why it's a setupFiles entry; first run downloads the MongoDB binary, hence the long hookTimeout.

9.2 mongodb-memory-server setup + teardown

import { afterAll, afterEach, beforeAll } from "vitest";
import mongoose from "mongoose";
import { MongoMemoryServer } from "mongodb-memory-server";

let mongo: MongoMemoryServer;

beforeAll(async () => {
  mongo = await MongoMemoryServer.create();
  await mongoose.connect(mongo.getUri());
  await Promise.all([UserModel.init(), SessionModel.init(), ItemModel.init()]);  // build unique indexes
});

afterEach(async () => {
  await Promise.all([UserModel.deleteMany({}), SessionModel.deleteMany({}), ItemModel.deleteMany({})]);
});

afterAll(async () => {
  await mongoose.disconnect();
  await mongo.stop();
});

Gotcha: call Model.init() or unique-index tests (409) can flake because indexes build lazily.

9.3 supertest + authenticated request helper

import request from "supertest";
import { app } from "../src/app.js";

async function register(email: string) {
  const res = await request(app).post("/api/auth/register")
    .send({ email, password: "correct horse battery" });
  expect(res.status).toBe(201);
  return { userId: res.body.data.user._id as string, accessToken: res.body.data.accessToken as string };
}

const authed = (method: "get" | "post" | "patch" | "delete", path: string, token: string) =>
  request(app)[method](path).set("Authorization", `Bearer ${token}`);

// const { accessToken } = await register("a@example.com");
// const res = await authed("post", "/api/items", accessToken).send({ title: "x" });

Gotcha: use request(app) (not a running server); for cookies, copy set-cookie[0].split(";")[0] into .set("Cookie", ...).

9.4 Cross-user access test

it("returns 404 for cross-owner read, update, delete", async () => {
  const owner = await register("owner@example.com");
  const stranger = await register("stranger@example.com");
  const created = await authed("post", "/api/items", owner.accessToken).send({ title: "private" });
  const id = created.body.data.item._id;

  expect((await authed("get", `/api/items/${id}`, stranger.accessToken)).status).toBe(404);
  expect((await authed("patch", `/api/items/${id}`, stranger.accessToken).send({ title: "stolen" })).status).toBe(404);
  expect((await authed("delete", `/api/items/${id}`, stranger.accessToken)).status).toBe(404);

  const unchanged = await ItemModel.findById(id);
  expect(unchanged?.title).toBe("private");
});

Gotcha: always re-read the DB at the end — a 404 alone doesn't prove nothing changed.

9.5 Validation test

it("rejects bad fields and owner injection", async () => {
  const { accessToken } = await register("v@example.com");
  const bodies = [
    { title: "bad rating", rating: 6 },
    { title: "   " },
    { title: "unknown", arbitrary: true },
    { title: "inject", owner: "507f1f77bcf86cd799439011" },
  ];
  for (const body of bodies) {
    expect((await authed("post", "/api/items", accessToken).send(body)).status).toBe(400);
  }
  expect(await ItemModel.countDocuments({})).toBe(0);
});

it("rejects NoSQL operator objects", async () => {
  const res = await request(app).post("/api/auth/login")
    .send({ email: { $gt: "" }, password: "correct horse battery" });
  expect(res.status).toBe(400);
});

Gotcha: z.strictObject is what blocks unknown/owner keys; Zod type checks (z.string()) block { $gt: "" }.

10. React + Vite + TypeScript

10.1 Setup with Tailwind v4

npm create vite@latest app -- --template react-ts
npm i tailwindcss @tailwindcss/vite axios @tanstack/react-query react-router-dom react-hook-form @hookform/resolvers zod

// vite.config.ts
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: { proxy: { "/api": { target: "http://localhost:3000", changeOrigin: true } } },
  test: { environment: "jsdom", setupFiles: ["./src/test/setup.ts"], restoreMocks: true },
});

/* src/index.css */
@import "tailwindcss";

Gotcha: no tailwind.config.js/PostCSS needed in v4; the /api proxy makes the browser see same-origin (no CORS, cookies just work).

10.2 Router with protected and public-only routes

<Routes>
  <Route element={<AppLayout />}>
    <Route index element={<Navigate to="/dashboard" replace />} />
    <Route element={<PublicOnlyRoute />}>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/register" element={<RegisterPage />} />
    </Route>
    <Route element={<ProtectedRoute />}>
      <Route path="/dashboard" element={<DashboardPage />} />
    </Route>
    <Route path="*" element={<NotFoundPage />} />
  </Route>
</Routes>

export function ProtectedRoute() {
  const { isAuthenticated, isBooting } = useAuth();
  const location = useLocation();
  if (isBooting) return <Spinner />;                                   // wait for session restore
  if (!isAuthenticated) return <Navigate to="/login" replace state={{ from: location }} />;
  return <Outlet />;
}
// PublicOnlyRoute: same, but isAuthenticated ? <Navigate to="/dashboard" replace /> : <Outlet />

Gotcha: without the isBooting gate you'd redirect to /login on every page refresh before the cookie session is restored. My repo imports from react-router-dom; v7 also exports the same from react-router (verify).

10.3 axios client + interceptors

export const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_URL || "/api",
  withCredentials: true,
});

apiClient.interceptors.request.use((config) => {
  const token = getAccessToken();                 // in-memory variable
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

apiClient.interceptors.response.use((r) => r, async (error: AxiosError<ErrorResponse>) => {
  const config = error.config as (InternalAxiosRequestConfig & { _authRetry?: boolean }) | undefined;
  const isAuthRoute = /(?:^|\/)auth(?:\/|$)/.test(`${config?.baseURL ?? ""}${config?.url ?? ""}`);

  if (error.response?.status !== 401 || !config || config._authRetry || isAuthRoute) {
    return Promise.reject(error);
  }
  config._authRetry = true;                       // retry once only
  try {
    await refreshAccessToken();
    return await apiClient.request(config);
  } catch (e) {
    setAccessToken(null);
    window.dispatchEvent(new Event("auth:expired"));
    return Promise.reject(e);
  }
});

Gotcha: skip /auth/* routes in the retry logic or a failed login/refresh loops forever; keep the access token in memory, not localStorage.

10.4 Single-flight refresh + navigator.locks

let inFlight: Promise<string> | null = null;

export function refreshAccessToken(): Promise<string> {
  if (inFlight) return inFlight;                                  // same tab: share one request

  const request = async () => {
    const res = await axios.post<SuccessResponse<RefreshData>>(
      `${apiBaseUrl}/auth/refresh`, undefined, { withCredentials: true });
    setAccessToken(res.data.data.accessToken);
    return res.data.data.accessToken;
  };

  const pending = navigator.locks
    ? navigator.locks.request("auth-refresh", request)            // across tabs: one at a time
    : request();

  inFlight = pending;
  const clear = () => { if (inFlight === pending) inFlight = null; };
  void pending.then(clear, clear);
  return pending;
}

Gotcha: use the bare axios (not apiClient) so the 401 interceptor can't recurse; this exists because the backend treats a reused refresh token as theft and kills the session.

10.5 TanStack Query: client + key factory

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 60_000, retry: (n, e) => !(axios.isAxiosError(e) && (e.response?.status ?? 500) < 500) && n < 2 },
    mutations: { retry: false },
  },
});

export const itemKeys = {
  all: ["items"] as const,
  lists: () => [...itemKeys.all, "list"] as const,
  list: (q: ItemQuery) => [...itemKeys.lists(), q] as const,
  details: () => [...itemKeys.all, "detail"] as const,
  detail: (id: string) => [...itemKeys.details(), id] as const,
  stats: () => [...itemKeys.all, "stats"] as const,
};

Gotcha: hierarchical keys let invalidateQueries({ queryKey: itemKeys.lists() }) hit every list at once; wrap the app in <QueryClientProvider client={queryClient}>.

10.6 useQuery + keepPreviousData

export function useItems(query: ItemQuery) {
  return useQuery({
    queryKey: itemKeys.list(query),
    queryFn: async ({ signal }) => {
      const res = await apiClient.get<SuccessResponse<ItemListData>>("/items", { params: query, signal });
      return res.data.data;
    },
    placeholderData: keepPreviousData,         // keep old page visible while the next loads
  });
}

Gotcha: pass signal so cancelled queries abort the HTTP request; in v5 keepPreviousData is a placeholderData value, not an option.

10.7 useMutation + invalidate

export function useCreateItem() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: async (input: CreateItemInput) =>
      (await apiClient.post<SuccessResponse<{ item: Item }>>("/items", input)).data.data.item,
    onSuccess: () => Promise.all([
      qc.invalidateQueries({ queryKey: itemKeys.lists() }),
      qc.invalidateQueries({ queryKey: itemKeys.stats() }),
    ]),
  });
}
// await createItem.mutateAsync(input)  (throws)   |   createItem.mutate(input)  (fire and forget)

Gotcha: return the promise from onSuccess so isPending stays true until the refetch finishes.

10.8 Optimistic update with rollback

export function useDeleteItem() {
  const qc = useQueryClient();
  return useMutation<string, Error, string, { prev: Array<[QueryKey, ItemListData | undefined]> }>({
    mutationFn: async (id) => { await apiClient.delete(`/items/${id}`); return id; },
    onMutate: async (id) => {
      await qc.cancelQueries({ queryKey: itemKeys.lists() });             // stop in-flight refetches
      const prev = qc.getQueriesData<ItemListData>({ queryKey: itemKeys.lists() });
      for (const [key, data] of prev) {
        if (!data) continue;
        qc.setQueryData<ItemListData>(key, {
          ...data, items: data.items.filter((i) => i._id !== id), total: Math.max(0, data.total - 1),
        });
      }
      return { prev };
    },
    onError: (_e, _id, ctx) => { for (const [key, data] of ctx?.prev ?? []) qc.setQueryData(key, data); },
    onSettled: () => qc.invalidateQueries({ queryKey: itemKeys.lists() }),
  });
}

Gotcha: snapshot in onMutate, restore in onError, always re-sync in onSettled; cancelQueries first or a refetch overwrites the optimistic data.

10.9 react-hook-form + zod resolver

const schema = z.object({
  email: z.email("Enter a valid email"),
  password: z.string().min(12, "At least 12 characters"),
});
type Values = z.infer<typeof schema>;

const { register, handleSubmit, setError, formState: { errors, isSubmitting } } =
  useForm<Values>({ resolver: zodResolver(schema) });

const onSubmit = async (values: Values) => {
  try { await login(values); }
  catch (e) { setError("email", { type: "server", message: "Email or password is incorrect" }); }
};

<form noValidate onSubmit={handleSubmit(onSubmit)}>
  <input type="email" {...register("email")} aria-invalid={Boolean(errors.email)} />
  {errors.email && <p role="alert">{errors.email.message}</p>}
</form>

Gotcha: if a field is transformed (e.g. z.string().transform(Number)) use z.input<typeof schema> for useForm's type; map server details[].path back with setError. z.email() is the Zod 4 form (my repo still uses z.string().email()).

10.10 AuthContext with useAuth

export const AuthContext = createContext<AuthContextValue | null>(null);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isBooting, setIsBooting] = useState(true);

  useEffect(() => {                                   // restore session from the refresh cookie
    let active = true;
    (async () => {
      try {
        await refreshAccessToken();
        const res = await apiClient.get<SuccessResponse<{ user: User }>>("/users/me");
        if (active) setUser(res.data.data.user);
      } catch { setAccessToken(null); }
      finally { if (active) setIsBooting(false); }
    })();
    return () => { active = false; };
  }, []);

  const value = useMemo(() => ({ user, isAuthenticated: user !== null, isBooting, login, logout }), [user, isBooting]);
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
  return ctx;
}

Gotcha: AuthProvider must sit inside <BrowserRouter> if it calls useNavigate. My useMemo omits login/logout from deps; that's only safe because they don't close over changing state — wrap them in useCallback to be lint-clean.

10.11 useEffect cleanup

useEffect(() => {
  const onExpired = () => navigate("/login", { replace: true });
  window.addEventListener("auth:expired", onExpired);
  return () => window.removeEventListener("auth:expired", onExpired);
}, [navigate]);

Rule: anything you subscribe, start or fetch in an effect gets undone in its return (listeners, timers, active = false flags, AbortController).

10.12 useMemo

const visible = useMemo(() => items.filter((i) => i.status === status), [items, status]);

Rule: only for expensive computations or to keep an object/array identity stable for a child/context; not for cheap math.

10.13 useCallback

const handleDelete = useCallback((id: string) => deleteItem.mutate(id), [deleteItem.mutate]);

Rule: only useful when the function is passed to a memoized child (React.memo) or used as an effect dependency.

10.14 useRef

const inputRef = useRef<HTMLInputElement>(null);
const timer = useRef<number | undefined>(undefined);

inputRef.current?.focus();
timer.current = window.setTimeout(save, 500);

Rule: a ref holds a mutable value or DOM node that persists across renders and changing it does NOT re-render; use state if the UI must update.

11. Git, Docker and curl

11.1 Init + commit conventions

git init -b main
git add -A
git commit -m "feat(auth): add refresh token rotation"
# types: feat | fix | docs | refactor | test | chore | perf
git switch -c feat/sessions-page
git push -u origin feat/sessions-page

Gotcha: Conventional Commits = type(scope): imperative summary; one logical change per commit.

11.2 .gitignore for Node

node_modules/
dist/
build/
coverage/
.env
.env.*
!.env.example
*.log
.DS_Store
.vscode/

Gotcha: if .env was already committed, git rm --cached .env and rotate the secrets.

11.3 Docker Compose basics

docker compose up -d            # start in background
docker compose ps
docker compose logs -f redis
docker compose exec mongo mongosh
docker compose down             # stop + remove containers (keeps volumes)
docker compose down -v          # ...and delete volumes (wipes data)

Gotcha: up reuses existing containers; add --build after changing a Dockerfile.

11.4 Dockerfile for the API (verify)

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
CMD ["node", "dist/server.js"]

Gotcha: copy package*.json first so the npm ci layer is cached; add .dockerignore with node_modules.

11.5 curl: JSON

curl -X POST http://localhost:3000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"a@example.com","password":"correct horse battery"}'

Gotcha: add -i to see headers/Set-Cookie, -s | jq for pretty output.

11.6 curl: cookies (-c and -b)

curl -c cookies.txt -X POST http://localhost:3000/api/auth/login \
  -H "Content-Type: application/json" -d '{"email":"a@example.com","password":"correct horse battery"}'

curl -b cookies.txt -c cookies.txt -X POST http://localhost:3000/api/auth/refresh

Gotcha: -c writes the cookie jar, -b sends it; with secure: true cookies, curl over plain http://localhost may not send them back (use AUTH_COOKIE_SECURE=false in dev).

11.7 curl: bearer auth

TOKEN=$(curl -s -X POST http://localhost:3000/api/auth/login \
  -H "Content-Type: application/json" \
  -d '{"email":"a@example.com","password":"correct horse battery"}' | jq -r '.data.accessToken')

curl http://localhost:3000/api/items?status=open -H "Authorization: Bearer $TOKEN"
curl -X POST http://localhost:3000/api/items -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" -d '{"title":"first item","rating":4}'

Gotcha: quote URLs that contain ? or & in zsh/bash scripts.

MERN + TypeScript Code Cheat Sheet — Part 1 (Setup, Express, Mongoose, Aggregation, Auth)

Mohd Amir — Mon, 05 Oct 2026 10:35:18 +0000

MERN Cheat Sheet — Part 1

Snippets come from express-mongo-auth-starter and react-vite-auth-starter, cleaned up. (verify) = not in my repos and I'm not 100% sure of the API. Snippets are TypeScript unless noted.

Versions assumed (from package.json)

Backend	Version	Frontend	Version
node	>=20	react / react-dom	^19.2.8
express	^5.1.0	vite	^8.3.0
mongoose	^8.18.1	typescript	~6.0.2
zod	^4.1.5	zod	^4.6.5
jsonwebtoken	^9.0.2	axios	^1.20.0
bcryptjs	^3.0.2	@tanstack/react-query	^5.104.1
bullmq	^6.3.11	react-router-dom	^7.18.4
ioredis	^6.0.0	react-hook-form	^7.89.0
express-rate-limit	^8.1.0	@hookform/resolvers	^5.9.1
pino / pino-http	^9.9.4 / ^10.5.0	tailwindcss + @tailwindcss/vite	^4.3.3
typescript	^5.9.2	vitest	^5.0.3
tsx	^4.20.5	@testing-library/react	^16.3.3
vitest	^4.1.11	jsdom	^29.1.1
supertest	^7.1.4
mongodb-memory-server	^10.2.3

Not in either package.json (latest stable assumed, (verify)): helmet, cors, puppeteer, mysql2, a MySQL server.

Repo bugs I found while extracting (fixed in snippets)

utils/helpers.ts: id regex ends with \$ → never matches. Use /^[\da-f]{24}$/i.
review.service.ts: locationId should be location; $ratings should be $rating; lte needs $lte; facet key ratingg must be ratings; list filters use owner/title, which Review doesn't have.
review.schemas.ts reply is { owner, text } but the model's reply is { owner, reply }.
config/redis.ts: maxRetriesPerRequest: 0 → BullMQ workers need null.
config/env.ts: REDIS_PORT has .min(6379) — probably meant a plain port range.

Setup
Express patterns
Mongoose
Aggregation + indexing
Auth

1. Setup

1.1 Install

npm i express mongoose zod dotenv pino pino-http express-rate-limit jsonwebtoken bcryptjs cookie
npm i -D typescript tsx vitest supertest mongodb-memory-server @types/node @types/express @types/jsonwebtoken @types/supertest

Gotcha: "type": "module" + NodeNext means relative imports need the .js extension.

1.2 package.json scripts

{
  "type": "module",
  "engines": { "node": ">=20" },
  "scripts": {
    "dev": "tsx watch src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js",
    "typecheck": "tsc --noEmit",
    "test": "vitest run"
  }
}

Gotcha: tsx only runs TS, it doesn't typecheck — keep typecheck in CI.

1.3 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "sourceMap": true
  },
  "include": ["src/**/*.ts"]
}

Gotcha: rootDir: src means tests outside src aren't compiled by tsc (Vitest handles them).

1.4 Env validation with Zod (`src/config/env.ts`)

import "dotenv/config";
import { z } from "zod";

const envSchema = z.object({
  NODE_ENV: z.enum(["development", "test", "production"]).default("development"),
  PORT: z.coerce.number().int().min(1).max(65535).default(3000),
  TRUST_PROXY: z.coerce.number().int().min(0).default(0),
  MONGO_URI: z.string().min(1),
  ACCESS_TOKEN_SECRET: z.string().min(32),
  REFRESH_TOKEN_SECRET: z.string().min(32),
  AUTH_COOKIE_SECURE: z.stringbool().default(true),
  AUTH_COOKIE_SAME_SITE: z.enum(["strict", "lax", "none"]).default("lax"),
}).refine((v) => v.ACCESS_TOKEN_SECRET !== v.REFRESH_TOKEN_SECRET, {
  message: "Access and refresh secrets must differ",
});

const parsed = envSchema.safeParse(process.env);
if (!parsed.success) {
  console.error(parsed.error.issues.map(({ path, message }) => ({ path, message })));
  process.exit(1);
}
export const env = parsed.data;

Gotcha: use z.stringbool() for flags — z.coerce.boolean() turns "false" into true.

1.5 app.ts

import express from "express";
import { env } from "./config/env.js";
import { notFound } from "./middlewares/not-found.js";
import { errorHandler } from "./middlewares/error-handler.js";
import itemRoutes from "./modules/items/item.routes.js";

export const app = express();
app.disable("x-powered-by");
app.set("trust proxy", env.TRUST_PROXY);
app.use(express.json({ limit: "1mb" }));

app.get("/api/health", (_req, res) => res.json({ success: true, data: { status: "ok" } }));
app.use("/api/items", itemRoutes);

app.use(notFound);
app.use(errorHandler);

Gotcha: app is exported without listen so supertest can import it.

1.6 server.ts + graceful shutdown

import { app } from "./app.js";
import { connectDatabase, disconnectDatabase } from "./config/db.js";
import { env } from "./config/env.js";

let server: ReturnType<typeof app.listen> | undefined;

async function shutdown(signal: string) {
  console.log("shutdown", signal);
  if (server) {
    await new Promise<void>((res, rej) => server!.close((e) => (e ? rej(e) : res())));
  }
  await disconnectDatabase();
}

for (const sig of ["SIGINT", "SIGTERM"] as const) {
  process.once(sig, () => {
    shutdown(sig).then(() => process.exit(0)).catch(() => process.exit(1));
  });
}

connectDatabase()
  .then(() => { server = app.listen(env.PORT); })
  .catch((e) => { console.error(e); process.exit(1); });

Gotcha: server.close waits for keep-alive connections — add a force-exit timer if deploys hang.

2. Express patterns

2.1 asyncHandler

import type { RequestHandler } from "express";

export const asyncHandler = (fn: RequestHandler): RequestHandler =>
  (req, res, next) => { Promise.resolve(fn(req, res, next)).catch(next); };

Gotcha: Express 5 already forwards rejected promises from handlers — this wrapper is harmless but optional.

2.2 ApiError

export class ApiError extends Error {
  constructor(
    public readonly statusCode: number,
    message: string,
    public readonly code = "API_ERROR",
  ) {
    super(message);
    this.name = "ApiError";
  }
}

Gotcha: keep code machine-readable; the frontend branches on it, not on message.

2.3 Central error handler

import type { ErrorRequestHandler } from "express";
import { ZodError } from "zod";
import mongoose from "mongoose";
import { ApiError } from "../utils/api-error.js";

const fail = (res: any, status: number, code: string, message: string, details?: unknown) =>
  res.status(status).json({ success: false, error: { code, message, details } });

export const errorHandler: ErrorRequestHandler = (err, _req, res, _next) => {
  if (err instanceof ZodError)
    return fail(res, 400, "VALIDATION_ERROR", "Validation failed",
      err.issues.map(({ path, message, code }) => ({ path, message, code })));
  if (err instanceof mongoose.Error.CastError) return fail(res, 400, "INVALID_ID", "Invalid id");
  if (err?.code === 11000) return fail(res, 409, "DUPLICATE_KEY", "Already exists");
  if (["JsonWebTokenError", "TokenExpiredError", "NotBeforeError"].includes(err?.name))
    return fail(res, 401, "UNAUTHORIZED", "Invalid or expired token");
  if (err instanceof ApiError) return fail(res, err.statusCode, err.code, err.message);
  console.error(err);
  return fail(res, 500, "INTERNAL_SERVER_ERROR", "Internal server error");
};

Gotcha: it must have 4 args (even if unused) or Express won't treat it as an error handler; mount it last.

2.4 validate middleware

import type { RequestHandler } from "express";
import type { ZodType } from "zod";

export const validateBody = <T>(schema: ZodType<T>): RequestHandler =>
  (req, _res, next) => { req.body = schema.parse(req.body); next(); };

export const validateQuery = <T>(schema: ZodType<T>): RequestHandler =>
  (req, res, next) => { res.locals.query = schema.parse(req.query); next(); };

Gotcha: Express 5 req.query is a getter — don't assign to it; read res.locals.query (my repo parses the query inside the controller instead). validateQuery is my addition, not in the repo.

2.5 404

import type { RequestHandler } from "express";
import { ApiError } from "../utils/api-error.js";

export const notFound: RequestHandler = (req) => {
  throw new ApiError(404, `Route ${req.method} ${req.originalUrl} not found`, "NOT_FOUND");
};

Gotcha: mount after all routes, before errorHandler.

2.6 helmet (not in my repo — verify)

import helmet from "helmet";

app.use(helmet());

Gotcha: for a pure JSON API the defaults are fine; only tune CSP if you serve HTML.

2.7 cors with credentials (not in my repo — verify)

import cors from "cors";

app.use(cors({
  origin: ["http://localhost:5173"],
  credentials: true,
}));

Gotcha: with credentials: true the origin can't be *, and axios needs withCredentials: true. My Vite dev proxy avoids CORS entirely.

2.8 Rate limit

import { ipKeyGenerator, rateLimit } from "express-rate-limit";
import { ApiError } from "../utils/api-error.js";

export const loginLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  limit: 10,
  skipSuccessfulRequests: true,
  standardHeaders: true,
  legacyHeaders: false,
  keyGenerator: (req) =>
    `${ipKeyGenerator(req.ip ?? "")}:${String(req.body?.email ?? "").trim().toLowerCase()}`,
  handler: (_req, _res, next) => next(new ApiError(429, "Too many requests", "RATE_LIMITED")),
});

Gotcha: the default store is in-memory per process — use a shared store (e.g. Redis) with multiple instances.

2.9 trust proxy

// TRUST_PROXY=1 when behind exactly one proxy (nginx, a load balancer)
app.set("trust proxy", env.TRUST_PROXY);

Gotcha: wrong hop count = every client looks like the proxy IP (rate limit blocks everyone) or spoofable via X-Forwarded-For.

3. Mongoose

3.1 Connect

import mongoose from "mongoose";
import { env } from "./env.js";

export const connectDatabase = () => mongoose.connect(env.MONGO_URI);
export const disconnectDatabase = () => mongoose.disconnect();

Gotcha: call connect once at startup; Mongoose buffers queries until it's connected.

3.2 Typed schema + model

import { Schema, model, type HydratedDocument, type Model, Types } from "mongoose";

export interface Item {
  owner: Types.ObjectId;
  title: string;
  status: "open" | "done";
  rating?: number;
  createdAt: Date;
  updatedAt: Date;
}
export type ItemDocument = HydratedDocument<Item>;

const itemSchema = new Schema<Item>({
  owner: { type: Schema.Types.ObjectId, ref: "User", required: true },
  title: { type: String, required: true, trim: true, minlength: 1, maxlength: 120 },
  status: { type: String, enum: ["open", "done"], default: "open", required: true },
  rating: { type: Number, min: 1, max: 5, validate: { validator: Number.isInteger, message: "Integer only" } },
}, { timestamps: true });

export const ItemModel: Model<Item> = model<Item>("Item", itemSchema);

Gotcha: min/max/validate only run on create/save; for updates pass runValidators: true.

3.3 Indexes (compound, unique, TTL)

itemSchema.index({ owner: 1, createdAt: -1 });   // compound: owner first, matches every list query
itemSchema.index({ owner: 1, status: 1 });

userSchema.path("email").index({ unique: true }); // or: email: { type: String, unique: true }

sessionSchema.index({ expiresAt: 1 }, { expireAfterSeconds: 0 }); // TTL: delete at expiresAt

Gotcha: unique is an index, not a validator — a violation throws error code 11000; TTL deletion runs roughly every 60s.

3.4 Timestamps

new Schema<Item>({ /* ... */ }, { timestamps: true });                          // createdAt + updatedAt
new Schema<Session>({ /* ... */ }, { timestamps: { createdAt: true, updatedAt: false } });

Gotcha: findOneAndUpdate/updateOne bump updatedAt automatically; $set: { updatedAt } manually isn't needed.

3.5 toJSON transform + select: false

const userSchema = new Schema<User>({
  email: { type: String, required: true, unique: true, lowercase: true, trim: true },
  password: { type: String, required: true, select: false },
}, {
  timestamps: true,
  toJSON: { transform: (_doc, ret) => { delete (ret as Partial<typeof ret>).password; return ret; } },
});

await UserModel.findOne({ email }).select("+password"); // opt in only for login

Gotcha: toJSON only runs on res.json(doc) / doc.toJSON(), not on .lean() results.

3.6 Owner-scoped CRUD

const oid = (id: string) => new Types.ObjectId(id);

export const createItem = (userId: string, input: CreateItemInput) =>
  ItemModel.create({ ...input, owner: oid(userId) });

export const getItem = (userId: string, id: string) =>
  ItemModel.findOne({ _id: oid(id), owner: oid(userId) });

export const updateItem = (userId: string, id: string, input: UpdateItemInput) =>
  ItemModel.findOneAndUpdate(
    { _id: oid(id), owner: oid(userId) },
    { $set: input },
    { new: true, runValidators: true },
  );

export const deleteItem = (userId: string, id: string) =>
  ItemModel.findOneAndDelete({ _id: oid(id), owner: oid(userId) });

Gotcha: filter by owner in the query itself, and return 404 (not 403) for someone else's id so ids don't leak.

3.7 Pagination + filters + sort whitelist

const sortFields = {
  createdAt: { createdAt: 1 },
  "-createdAt": { createdAt: -1 },
  rating: { rating: -1 },
} as const;

export async function listItems(userId: string, q: ListItemsQuery) {
  const filter: FilterQuery<Item> = { owner: oid(userId) };
  if (q.status) filter.status = q.status;
  if (q.rating) filter.rating = q.rating;

  const [items, total] = await Promise.all([
    ItemModel.find(filter).sort(sortFields[q.sort]).skip((q.page - 1) * q.limit).limit(q.limit),
    ItemModel.countDocuments(filter),
  ]);
  return { items, page: q.page, limit: q.limit, total, totalPages: Math.ceil(total / q.limit) };
}

Gotcha: sort comes from a Zod z.enum([...]) and is looked up in the map — never pass a raw query string into .sort(). Large skip is slow; use range-based cursors at scale.

3.8 Query schema for the above

const page = z.string().regex(/^\d+$/).optional().transform((v) => Number(v ?? "1")).pipe(z.number().int().min(1));
const limit = z.string().regex(/^\d+$/).optional().transform((v) => Number(v ?? "10")).pipe(z.number().int().min(1).max(50));

export const listItemsQuerySchema = z.strictObject({
  page, limit,
  status: z.enum(["open", "done"]).optional(),
  rating: z.string().regex(/^[1-5]$/).transform(Number).optional(),
  q: z.string().trim().max(120).optional(),
  sort: z.enum(["createdAt", "-createdAt", "rating"]).default("-createdAt"),
});

Gotcha: strictObject rejects unknown keys; query values are always strings, so parse before use.

3.9 Regex-safe search

const escapeRegex = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

if (q.q) filter.title = { $regex: escapeRegex(q.q), $options: "i" };

Gotcha: an unescaped user regex is a ReDoS/injection risk; case-insensitive $regex can't use an index well — consider a text index for big collections.

3.10 lean

const items = await ItemModel.find({ owner: oid(userId) }).sort({ createdAt: -1 }).lean();

Gotcha: .lean() returns plain objects — no toJSON transform, virtuals, or .save().

3.11 populate

const reviews = await ReviewModel.find({ location: locationId })
  .populate<{ location: { name: string; city: string } }>("location", "name city")
  .lean();

Gotcha: populate is a second query, not a join — use $lookup for filtering/aggregating across collections.

4. Aggregation + indexing

Models used below: Item { owner, status, rating, createdAt }, Review { location, rating, createdAt }, Location { owner, name, city }.

4.1 $match + $group (count, sum, avg) + $sort

await ItemModel.aggregate([
  { $match: { owner: oid(userId) } },
  { $group: {
      _id: "$status",
      count: { $sum: 1 },
      ratingSum: { $sum: "$rating" },
      avgRating: { $avg: "$rating" },
  } },
  { $sort: { count: -1 } },
]);

Gotcha: aggregate() does NOT auto-cast — wrap ids with new Types.ObjectId(...) in $match. $avg ignores missing values.

4.2 $project, $addFields, $round

[
  { $project: { _id: 0, title: 1, rating: 1 } },
  { $addFields: {
      ratingPct: { $round: [{ $multiply: [{ $divide: ["$rating", 5] }, 100] }, 1] },
  } },
]

Gotcha: $project with any 1 is an inclusion projection (only _id can be 0 there); $addFields keeps all other fields.

4.3 $lookup (with pipeline) + $unwind

await ReviewModel.aggregate([
  { $lookup: {
      from: "locations",                 // collection name (lowercase plural), not model name
      let: { locId: "$location" },
      pipeline: [
        { $match: { $expr: { $eq: ["$_id", "$$locId"] } } },
        { $project: { name: 1, city: 1, owner: 1 } },
      ],
      as: "loc",
  } },
  { $unwind: "$loc" },                   // drops reviews with no matching location
  { $match: { "loc.owner": oid(userId) } },
]);

Gotcha: inside the sub-pipeline use $expr + $$var to compare to outer fields; simple form is localField/foreignField/as.

4.4 $facet (summary + histogram in one pass)

const [r] = await ItemModel.aggregate([
  { $match: { owner: oid(userId) } },
  { $facet: {
      summary: [{ $group: { _id: null, total: { $sum: 1 }, avg: { $avg: "$rating" } } }],
      ratings: [
        { $match: { rating: { $gte: 1, $lte: 5 } } },
        { $group: { _id: "$rating", count: { $sum: 1 } } },
      ],
  } },
]);

Gotcha: each facet's output is a single document capped at 16 MB, and it can't use indexes after the first stage — $match first.

4.5 Zero-filled rating histogram (JS side)

const byRating = new Map<number, number>(r.ratings.map((x: any) => [x._id, x.count]));
const ratingHistogram = [1, 2, 3, 4, 5].map((rating) => ({ rating, count: byRating.get(rating) ?? 0 }));

Gotcha: $group only returns buckets that exist, so fill missing stars with 0 in code.

4.6 $bucket

{ $bucket: {
    groupBy: "$rating",
    boundaries: [1, 2, 3, 4, 5, 6],   // [1,2) [2,3) ... [5,6)
    default: "unrated",
    output: { count: { $sum: 1 } },
} }

Gotcha: lower bound inclusive, upper exclusive; without default, a value outside the boundaries throws.

4.7 $dateTrunc (by day or month)

{ $group: {
    _id: { $dateTrunc: { date: "$createdAt", unit: "month" } },  // or "day"
    count: { $sum: 1 },
} },
{ $sort: { _id: 1 } }

Gotcha: needs MongoDB 5.0+; add timezone: "Asia/Kolkata" to bucket by local days (default UTC).

4.8 Top-N per group (verify server >= 5.2)

await ReviewModel.aggregate([
  { $group: {
      _id: "$location",
      top: { $topN: { n: 3, sortBy: { rating: -1, createdAt: -1 }, output: "$$ROOT" } },
  } },
]);

Gotcha: older servers: $sort → $group with $push → $project with { $slice: ["$arr", 3] }.

4.9 Per-owner stats

await ItemModel.aggregate([
  { $group: {
      _id: "$owner",
      total: { $sum: 1 },
      done: { $sum: { $cond: [{ $eq: ["$status", "done"] }, 1, 0] } },
      avgRating: { $avg: "$rating" },
  } },
  { $addFields: { avgRating: { $round: ["$avgRating", 1] } } },
  { $sort: { total: -1 } },
]);

Gotcha: $cond: [cond, then, else] is the conditional-count trick; $round returns null for null input.

4.10 explain("executionStats")

const plan = await ItemModel.find({ owner: oid(userId), status: "open" })
  .sort({ createdAt: -1 })
  .explain("executionStats");
// aggregate: ItemModel.aggregate([...]).explain("executionStats")

Gotcha: compare totalDocsExamined to nReturned — a big gap means a poor index.

4.11 COLLSCAN vs IXSCAN

winningPlan.stage / inputStage.stage:
  COLLSCAN -> reads every document (no usable index)
  IXSCAN   -> uses an index
  FETCH    -> then loads the documents
  SORT     -> in-memory sort (index doesn't cover the sort)

Gotcha: want IXSCAN with totalKeysExamined ≈ nReturned and no SORT stage.

4.12 Compound index order (ESR rule)

// Equality -> Sort -> Range
itemSchema.index({ owner: 1, status: 1, createdAt: -1 });
// find({ owner, status }).sort({ createdAt: -1 })           -> equality, equality, sort
// find({ owner, createdAt: { $gte: d } }).sort({ rating:-1 }) -> owner(E), rating(S), createdAt(R)

Gotcha: an index serves its prefixes only — {owner, status} can't help a query on status alone.

5. Auth

5.1 bcrypt hash + compare

import bcrypt from "bcryptjs";

const hash = await bcrypt.hash(password, 12);
const ok = await bcrypt.compare(password, user.password); // needs .select("+password")

// unknown email: still burn the time
await bcrypt.compare(password, DUMMY_HASH);

Gotcha: bcrypt ignores bytes past 72 — cap password length in the Zod schema (Buffer.byteLength(p) <= 72).

5.2 JWT sign + verify (HS256, expiry)

import jwt from "jsonwebtoken";

const accessToken = jwt.sign(
  { sub: userId, sid: sessionId, type: "access" },
  env.ACCESS_TOKEN_SECRET,
  { algorithm: "HS256", expiresIn: 900 },          // seconds
);

const payload = jwt.verify(token, env.ACCESS_TOKEN_SECRET, { algorithms: ["HS256"] });

Gotcha: always pass algorithms on verify; use different secrets for access and refresh, and check a type claim so one can't be used as the other.

5.3 authenticate middleware (+ session check)

export const authenticate: RequestHandler = asyncHandler(async (req, _res, next) => {
  const m = req.get("authorization")?.match(/^Bearer ([^\s]+)$/i);
  if (!m) throw new ApiError(401, "Authentication required", "UNAUTHORIZED");

  const claims = verifyAccessToken(m[1]!);           // verifies + checks type === "access"

  const session = await SessionModel.findOne({
    _id: claims.sid,
    userId: claims.sub,
    revokedAt: { $exists: false },
    expiresAt: { $gt: new Date() },
  }).select("_id");
  if (!session) throw new ApiError(401, "Session is no longer active", "UNAUTHORIZED");

  req.auth = { userId: claims.sub, sessionId: claims.sid };
  next();
});

Gotcha: this DB check is what makes logout/revoke immediate; skip it and a stolen access token lives until expiry. Type req.auth via declare global { namespace Express { interface Request { auth?: {...} } } }.

5.4 Role-based authorize (my addition, not in repo)

export const authorize = (...roles: Array<"user" | "admin">): RequestHandler =>
  asyncHandler(async (req, _res, next) => {
    const user = await UserModel.findById(req.auth!.userId).select("role").lean();
    if (!user || !roles.includes(user.role)) throw new ApiError(403, "Forbidden", "FORBIDDEN");
    next();
  });

router.delete("/:id", authenticate, authorize("admin"), remove);

Gotcha: my token carries no role claim, so this reads the role from the DB (always fresh); put role in the JWT only if you accept stale roles until expiry.

5.5 Refresh cookie options options

res.cookie("refreshToken", token, {
  httpOnly: true,                           // JS can't read it
  secure: env.AUTH_COOKIE_SECURE,           // HTTPS only
  sameSite: env.AUTH_COOKIE_SAME_SITE,      // "lax" | "strict" | "none"
  path: "/api/auth",                        // only sent to auth routes
  maxAge: env.REFRESH_TOKEN_TTL_SECONDS * 1000,   // ms
});

res.clearCookie("refreshToken", { httpOnly: true, secure: env.AUTH_COOKIE_SECURE,
  sameSite: env.AUTH_COOKIE_SAME_SITE, path: "/api/auth" });

Gotcha: clearCookie must repeat the same path/secure/sameSite or the browser keeps the cookie; sameSite: "none" requires secure: true.

5.6 Create session (stable session id)

export async function createSession(userId: string, req: Request) {
  const sessionId = new Types.ObjectId();                      // sid is created up front
  const tokens = signTokenPair(userId, sessionId.toString());

  await SessionModel.create({
    _id: sessionId,
    userId: new Types.ObjectId(userId),
    tokenHash: sha256(tokens.refreshToken),                    // never store the raw token
    userAgent: req.get("user-agent"),
    ip: req.ip,
    lastUsedAt: new Date(),
    expiresAt: new Date(Date.now() + env.REFRESH_TOKEN_TTL_SECONDS * 1000),
  });
  return tokens;
}
// sha256 = (s: string) => createHash("sha256").update(s).digest("hex")

Gotcha: one session doc per device; refresh rotates the token inside the same session, so sid never changes.

5.7 Refresh rotation + previous-hash replay detection

const claims = verifyToken(token, env.REFRESH_TOKEN_SECRET, "refresh");
const session = await SessionModel.findById(claims.sid);
// ...reject if missing / wrong user / revokedAt / expired

const supplied = sha256(token);
if (session.previousTokenHash && supplied === session.previousTokenHash) {
  await SessionModel.updateOne({ _id: session._id }, { $set: { revokedAt: new Date() } }); // replay
  throw new ApiError(401, "Invalid or expired token", "UNAUTHORIZED");
}
if (supplied !== session.tokenHash) throw new ApiError(401, "Invalid or expired token", "UNAUTHORIZED");

const next = signTokenPair(claims.sub, session._id.toString());
const updated = await SessionModel.findOneAndUpdate(
  { _id: session._id, tokenHash: supplied, revokedAt: { $exists: false } },   // compare-and-set
  { $set: { tokenHash: sha256(next.refreshToken), previousTokenHash: supplied, lastUsedAt: new Date() } },
  { new: true },
);
if (!updated) { /* lost the race: revoke this session, throw 401 */ }
return next;

Gotcha: concurrent refreshes look like replay and kill that device's session — the client must serialize refreshes (see Part 2, single-flight + navigator.locks). Compare hashes with timingSafeEqual in real code (hashesEqual in my repo).

5.8 Why jti

jwt.sign({ sub, sid, type: "refresh", jti: randomUUID() }, env.REFRESH_TOKEN_SECRET, { algorithm: "HS256", expiresIn });

Gotcha: two refresh tokens minted in the same second with identical claims would be byte-identical (same hash), so rotation/replay detection would break — jti makes every token unique.

5.9 Logout (current device)

export const logout = asyncHandler(async (req, res) => {
  const bearer = req.get("authorization")?.match(/^Bearer ([^\s]+)$/i)?.[1];
  const token = cookie.parse(req.headers.cookie ?? "").refreshToken;
  const claims =
    (bearer && verifyAccessTokenForLogout(bearer)) || (token && verifyRefreshTokenForLogout(token));

  if (claims) {
    await SessionModel.updateOne(
      { _id: claims.sid, userId: claims.sub, revokedAt: { $exists: false } },
      { $set: { revokedAt: new Date() } },
    );
  }
  clearRefreshCookie(res);
  res.status(204).end();
});

Gotcha: logout is idempotent and falls back to the refresh cookie when the access token has expired; always bind sid to userId.

5.10 Logout-all

export const revokeAllSessions = (userId: string) =>
  SessionModel.updateMany(
    { userId: new Types.ObjectId(userId), revokedAt: { $exists: false } },
    { $set: { revokedAt: new Date() } },
  );

router.post("/logout-all", authenticate, logoutAll);

Gotcha: also call it after a password change.

5.11 Session list + revoke

export const listSessions = asyncHandler(async (req, res) => {
  const { userId, sessionId } = req.auth!;
  const sessions = await SessionModel.find({
    userId, revokedAt: { $exists: false }, expiresAt: { $gt: new Date() },
  }).select("_id userAgent ip createdAt lastUsedAt expiresAt").sort({ createdAt: -1 });

  res.json({ success: true, data: { sessions: sessions.map((s) => ({
    ...s.toJSON(), current: s._id.toString() === sessionId,
  })) } });
});

// revoke: findOneAndUpdate({ _id: req.params.id, userId: req.auth!.userId }, { $set: { revokedAt: new Date() } })
// -> null => 404

Gotcha: include userId in the revoke filter or any user can kill any session id; 404 (not 403) when it's not theirs.

Web Scraping in 2025: A Python Survival Story

Mohd Amir — Sat, 27 Sep 2025 10:29:52 +0000

You’re a digital detective. Your mission: extract the truth from the tangled web. But the web fights back—anti-bot walls, JavaScript mazes, CAPTCHA sentinels. This isn’t a side hustle; it’s a heist. And every good heist needs the right crew.

Here’s my A-team of Python libraries for 2025—the ones that actually get you in, out, and home before your coffee gets cold.

The Scout: BeautifulSoup

Your quiet, sharp-eyed partner. They can look at a wall of messy HTML and instantly spot the hidden door. No dynamite, no drama—just elegant precision.

Their Vibe: "I see the data. Follow me."
Call Sign: soup.find('div', class_='secret-data')

The Driver: Requests

The getaway driver. Reliable, fearless, and knows every HTTP highway. They get you to the location and back, no questions asked. Over 50 million rides a week don’t lie.

Their Vibe: "Get in. We're going."
Call Sign: requests.get(url, headers=disguise)

The Mastermind: Scrapy

The architect. When one page isn’t enough, Scrapy plans the entire operation. It builds pipelines, manages spiders, and crawls entire domains like a shadow.

Their Vibe: "Why steal a file when you can take the whole server?"
Call Sign: scrapy crawl entire_website

The Shape-Shifter: Selenium

The infiltrator. They don’t just knock on the door—they walk in, click buttons, scroll pages, and make the JavaScript think they’re a real user. A bit heavy, but unstoppable.

Their Vibe: "I live in the browser. The browser thinks I'm human."
Call Sign: driver.find_element(By.ID, 'click-me').click()

The New Agent: Playwright

Selenium’s cooler, faster cousin. Cuts through modern web apps with slick moves and async flair. The future of browser automation is here, and it’s wearing sunglasses.

Their Vibe: "Selenium could do it. I just do it better."
Call Sign: page.goto(url); page.click('text=Submit')

The Sniper: lxml

Speed is their weapon. When BeautifulSoup is taking a stroll, lxml is already on the roof with a laser sight. Blazing-fast parsing for when milliseconds matter.

Their Vibe: "I don’t parse HTML. I dismantle it."
Call Sign: etree.XPath('//data[@secret="true"]')

The Con Artist: MechanicalSoup

The smooth talker. Need to log in, fill a form, and follow a session? They handle stateful conversations with a website like a seasoned spy.

Their Vibe: "The website thinks we're old friends."
Call Sign: browser.submit_form(form_name='login')

The Gadget Guru: Requests-HTML

Requests, but with tricked-out upgrades. Renders JavaScript, uses real CSS selectors, and works async. The perfect fusion of simplicity and power.

Their Vibe: "I brought a browser to a request fight."
Call Sign: r.html.render(sleep=2)

The Lockpick: Parsel

A specialist in extraction. Uses XPath and CSS like a master thief uses lockpicks. Small, precise, and deadly efficient.

Their Vibe: "Give me any HTML. I’ll find your key."
Call Sign: selector.css('div.price::text').get()

The Ghost: Urllib3

The legend working behind the scenes. Manages connections, pools resources, and never leaves a trace. The foundation everything else is built on.

Their Vibe: "You never see me. But you’d fail without me."
Call Sign: http.request('GET', url)

The Escape Plan

Every good heist needs an exit strategy.

The Quick Snatch: BeautifulSoup + Requests. In and out in 60 seconds.
The Big Score: Scrapy + Playwright. For when you’re taking everything.
The Deep Undercover Op: Selenium/Playwright solo. When you have to become the website to survive.

Remember: Scrape like a ghost. Leave no trace, respect the robots.txt, and always wear a proxy.

Mission accomplished.

Tags: #PythonCrew #WebScrapingHeist #DataExtraction2025 #AutomationNation

Steal this post and make the web your playground. 🕶️
Follow For More

Facebook Pixel with React by Mohd Amir

Mohd Amir — Fri, 20 Sep 2024 20:23:35 +0000

About Me
Creating Facebook Pixel
Domain Verification for Facebook Pixel
Implementing Facebook Pixel in Vite React App
Ensuring Security While Loading Facebook Pixel
Code Structure
How to Use

About Me

Hi, I’m Mohd Amir, a full-stack developer with expertise in scalable and maintainable apps. I enjoy diving into cutting-edge tech. You can check out my work on GitHub or follow me on Twitter.

Creating Facebook Pixel

To get started with Facebook Pixel:

Log in to your Facebook Events Manager.
Go to the Pixels tab under Data Sources.
Click Create a Pixel and give it a name.
You'll be provided with a Pixel ID and a base code to implement on your website.

Domain Verification for Facebook Pixel

To verify your domain on Facebook:

Go to Facebook Business Settings > Brand Safety > Domains.
Add your domain, and Facebook will give you one of three methods:
- Meta-tag: Add the meta tag to your website’s <head>.
- HTML file upload: Upload an HTML verification file to your root directory.
- DNS TXT Record: Add a DNS record to your domain’s DNS configuration.
Verify once the appropriate method is implemented.

Implementing Facebook Pixel in Vite React App

Now, let’s integrate Facebook Pixel into your Vite React app:

1. Set up Environment Variable

Create a .env file in the root of your Vite project and add your Facebook Pixel ID:

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. Create a Custom Hook to Load Facebook Pixel

Create a facebookPixelHook.js inside the hooks/ directory:

import { useEffect } from "react";

const useFacebookPixel = (pixelId) => {
  useEffect(() => {
    // Load the Pixel script only if it's not already loaded
    if (!window.fbq) {
      (function(f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function() {
          n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = "2.0";
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      })(
        window,
        document,
        "script",
        "https://connect.facebook.net/en_US/fbevents.js"
      );

      // Initialize Facebook Pixel
      window.fbq("init", pixelId);
    }

    // Track page view
    window.fbq("track", "PageView");
  }, [pixelId]);
};

export default useFacebookPixel;

3. Use the Hook in Your React Component

Use this hook in your component to initialize and track events:

import React from "react";
import useFacebookPixel from "./hooks/facebookPixelHook";

const MyApp = () => {
  const pixelId = import.meta.env.VITE_FB_PIXEL_ID;

  useFacebookPixel(pixelId);

  return <div>Your app is being tracked by Facebook Pixel.</div>;
};

export default MyApp;

Ensuring Security While Loading Facebook Pixel

Although the Pixel ID is safe to expose, it’s good practice to:

Store Pixel ID in environment variables (as shown above).
Load the Pixel script dynamically from the backend if desired, which avoids direct exposure of the Pixel ID in the front-end code.
Consider Facebook Conversions API for server-side event tracking if you're looking for an even more secure method.

Code Structure

Here is the general structure of the codebase:

src/
- main.jsx: Entry point for the React application.
- App.jsx: Main component of the application.
- hooks/
- facebookPixelHook.js: Custom hook to load Facebook Pixel.
- utils/
- facebookEvents.js: (Optional) You can add utility functions for custom events.
- config.js: (Optional) Store the Pixel ID configuration.
index.html: Entry point for the HTML.
vite.config.js: Vite configuration.
.env: Environment variables (like VITE_FB_PIXEL_ID).

How to Use

Here’s how to use the project:

Clone the repository:

   git clone https://github.com/webdev-mohdamir/facebook-pixel-with-react.git

Install the dependencies:

   npm install

Start the development server:

   npm run dev

Open the application in your browser at http://localhost:3000.
Submit the form to track custom events (if you added custom events).

Final Thoughts

That’s it! Now you have a fully functioning Facebook Pixel implementation in your React app. Don’t forget to verify your domain and use Meta Pixel Helper for debugging your Pixel events.

Also, remember: Coffee is the key to debugging success ☕!

Exploring OpenAI's Project Strawberry: The Future of AI Language Models

Mohd Amir — Fri, 09 Aug 2024 17:41:18 +0000

Artificial intelligence is evolving at a breakneck pace, and OpenAI is right at the forefront, pushing the boundaries of what’s possible with language models. Their latest project, the mysterious Project Strawberry, has been generating a lot of buzz lately. Although the details are still under wraps, there’s a growing sense that this project could be a significant leap forward—not just for AI language models, but possibly for the entire field of artificial intelligence.

So, what exactly is Project Strawberry? And why is it making waves? Let’s dive into what we know, what we’re speculating, and what this could mean for the future of AI.

A Strawberry Garden Sparks Curiosity

It all started with a simple, yet puzzling post from OpenAI’s CEO, Sam Altman. He shared a photo of a strawberry garden—innocent enough, right? But in the world of AI, even a garden photo can set off a wave of speculation. In the image, there are five strawberries, and that’s led many to wonder: Is this a hint at GPT-5?

Adding fuel to the fire, an internal document obtained by Reuters hints at a new language model tied to Project Strawberry. This model is said to have advanced reasoning capabilities and could even navigate the internet autonomously for deep research. It sounds like something straight out of science fiction, but it’s very much grounded in reality—or at least, it will be soon.

The Legacy of OpenAI’s Language Models

To understand why Project Strawberry is such a big deal, it’s worth looking back at what OpenAI has achieved so far. Starting with GPT-2, each new iteration of their language models has pushed the envelope of what’s possible in natural language processing (NLP). GPT-3 and GPT-4 were game-changers, showcasing AI that could generate text, comprehend complex language, and even perform creative tasks.

But there’s one goal that still looms large: artificial general intelligence (AGI). That’s the holy grail of AI—an AI that can perform any intellectual task a human can. Many in the AI community believe that Project Strawberry is a big step toward this goal.

What’s the Buzz About Q* and GPT-5?

Back to the strawberry garden. The five strawberries have led many to speculate that GPT-5 is on the horizon. But there’s another name that keeps popping up: Q*. According to that same internal document, Q* could be a major breakthrough in AGI. Is Q* the codename for GPT-5? Or is it something even more groundbreaking?

The intrigue doesn’t stop there. A model known as "anonymous-chatbot" has been making waves on the LMSYS Chatbot Arena. This model shows off some seriously impressive reasoning abilities—better than GPT-4o, in fact. While it hasn’t officially confirmed itself as Strawberry or Q*, its performance and ties to GPT-4 architecture have people wondering if this is a sneak peek at what’s coming.

Why the "Anonymous-Chatbot" Matters

So, why should we care about this "anonymous-chatbot"? If it’s connected to Project Strawberry, it could be our first glimpse of a new era in AI language models. This bot’s advanced reasoning suggests it can tackle more complex tasks than its predecessors. We’re talking about things like autonomous internet navigation and deep research capabilities—areas that are crucial for reaching AGI.

Imagine an AI that can sift through the vast expanse of the internet, gathering and analyzing information on its own. The implications are massive. Such a model could revolutionize industries that depend on data analysis, content generation, and customer service. And that’s just the beginning.

What’s Next for AI and AGI?

The potential of Project Strawberry is enormous. If it really does involve a model like Q* or an advanced version of GPT-5, we could be on the brink of something truly groundbreaking. This could be the moment when AI takes a giant leap forward, bringing us closer to the elusive goal of AGI.

But for now, we’re left with more questions than answers. What exactly is Project Strawberry? When will it be officially unveiled? And how will it change the landscape of AI?

Wrapping Up: The Future Looks Exciting

While we wait for more details to emerge, one thing is clear: Project Strawberry has the potential to push the boundaries of what AI can do. Whether it’s the launch of GPT-5, the introduction of Q*, or something even more innovative, the AI world is watching closely.

For those of us who are fascinated by the future of technology, this is an exciting time. The advancements we might soon witness could redefine our understanding of AI, and who knows—maybe even our understanding of intelligence itself.

So, keep an eye on OpenAI and Project Strawberry. The future of AI might just be getting started.

4 Best Practices for Building a Robust Backend

Mohd Amir — Sun, 14 Apr 2024 14:06:46 +0000

When developing a backend system, following best practices is crucial for ensuring a reliable, scalable, and maintainable codebase. Here are four essential best practices to keep in mind:

1. Modular Architecture

Embrace a modular approach to your backend architecture. Break down your codebase into smaller, reusable components or modules that handle specific functionalities. This approach promotes code organization, reusability, and testability. Each module should have a well-defined responsibility and a clear interface for interacting with other modules.

2. Separation of Concerns

Adhere to the principle of Separation of Concerns (SoC) by separating your application's logic into distinct layers or components. Common layers include the presentation layer (e.g., APIs, web services), the business logic layer, and the data access layer. This separation promotes code maintainability, testability, and flexibility, as changes in one layer have minimal impact on the others.

3. Error Handling and Logging

Implement robust error handling and logging mechanisms throughout your backend application. Proper error handling ensures that your application gracefully handles and recovers from unexpected situations, providing meaningful error messages to users or logging critical information for debugging purposes. Incorporate centralized logging to aid in troubleshooting and monitoring your application's performance and behavior.

4. Security Best Practices

Security should be a top priority when building a backend system. Implement industry-standard security practices, such as:

Input Validation: Validate and sanitize all user input to prevent vulnerabilities like SQL injection, cross-site scripting (XSS), and other code injection attacks.
Authentication and Authorization: Implement secure authentication and authorization mechanisms to control access to your application's resources and functionalities.
Encryption: Encrypt sensitive data, both at rest (e.g., in databases) and in transit (e.g., during network communication), using strong encryption algorithms and key management practices.
Regular Updates and Patches: Keep your backend software, frameworks, libraries, and dependencies up-to-date with the latest security patches and updates to mitigate known vulnerabilities.

By following these best practices, you can create a robust, maintainable, and secure backend system that serves as a solid foundation for your application. Additionally, consider implementing industry-specific best practices, adhering to coding standards and guidelines, and leveraging automated testing and continuous integration/continuous deployment (CI/CD) practices for a more efficient and reliable development process.

GraphQL vs. REST: The Ultimate Showdown

Mohd Amir — Tue, 09 Apr 2024 10:01:55 +0000

In the world of API development, two major paradigms have emerged: REST (Representational State Transfer) and GraphQL. Both approaches offer different solutions for building and consuming APIs, each with its own strengths and weaknesses. In this article, we'll dive deep into the differences between GraphQL and REST, exploring their architectural patterns, data fetching mechanisms, and the scenarios where one may be preferable over the other.

Understanding REST

REST is an architectural style for building web services that has been around for more than two decades. It is based on the principles of HTTP, leveraging its methods (GET, POST, PUT, DELETE) to perform operations on resources identified by URLs. REST APIs follow a client-server model, where the client initiates requests to the server, and the server responds with the requested data or the appropriate action.

Here's an example of a REST API endpoint for retrieving a list of users:

// GET /api/users
fetch('/api/users')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Output: [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]
  })
  .catch(error => console.error(error));

In this example, the client sends a GET request to the /api/users endpoint, and the server responds with a JSON representation of the user data.

The Rise of GraphQL

GraphQL, developed by Facebook in 2012, is a query language for APIs and a runtime for fulfilling those queries with existing data. Unlike REST, which follows a resource-based approach, GraphQL is designed around the concept of a single endpoint that accepts queries and returns the requested data.

Here's an example of a GraphQL query for fetching user data:

query {
  users {
    id
    name
    email
  }
}

And here's how you can execute this query using JavaScript:

fetch('/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    query: `
      query {
        users {
          id
          name
          email
        }
      }
    `
  })
})
  .then(response => response.json())
  .then(data => {
    console.log(data.data.users);
    // Output: [{ id: 1, name: 'John', email: 'john@example.com' }, { id: 2, name: 'Jane', email: 'jane@example.com' }]
  })
  .catch(error => console.error(error));

In this example, the client sends a POST request to the /graphql endpoint with the GraphQL query in the request body. The server responds with the requested user data, including the id, name, and email fields.

Key Differences between GraphQL and REST

Data Fetching

One of the most significant differences between GraphQL and REST lies in the way data is fetched.

In REST, clients typically need to make multiple requests to different endpoints to retrieve the necessary data, leading to over-fetching (retrieving more data than needed) or under-fetching (not retrieving enough data, requiring additional requests). This can result in increased latency and network overhead.

With GraphQL, clients can define precisely the data they need using a single query. This query is sent to a single endpoint, and the server responds with the requested data, eliminating the need for multiple round trips and reducing over-fetching or under-fetching issues.

Query Language and Schema

REST APIs do not have a formal query language or schema. Instead, they rely on predefined endpoints and HTTP methods to perform operations on resources.

In contrast, GraphQL introduces a strongly-typed query language and a schema that defines the structure of the data. This schema acts as a contract between the client and the server, allowing clients to explore the available data and its types through introspection.

Versioning

Versioning in REST APIs is typically achieved by creating new endpoints or modifying the existing ones, which can lead to breaking changes and compatibility issues.

GraphQL, on the other hand, simplifies versioning by allowing fields and types to be added or deprecated without breaking existing clients. This is achieved through the schema's capability to evolve over time while maintaining backwards compatibility.

Caching

REST APIs often rely on traditional HTTP caching mechanisms, such as cache headers and ETags, which can be challenging to implement and maintain.

GraphQL introduces a more efficient caching strategy by leveraging the shape of the query itself. Since the client specifies exactly the data it needs, the server can cache the response based on the query and its parameters, improving performance and reducing redundant computations.

When to Choose GraphQL or REST

Both GraphQL and REST have their strengths and weaknesses, making them suitable for different scenarios. Here are some general guidelines:

Choose GraphQL when:

You need to fetch data from multiple sources or services in a single request.
Your application requires complex and nested data structures.
You want to avoid over-fetching or under-fetching data, improving performance and reducing network overhead.
You need to evolve your API without breaking existing clients.

Choose REST when:

You have a simple API with well-defined resources and operations.
Your application follows a strict CRUD (Create, Read, Update, Delete) pattern.
You need to maintain compatibility with existing clients or tools that expect a RESTful API.
You prefer a more familiar and widely adopted architectural style.

It's important to note that GraphQL and REST are not mutually exclusive. In some cases, you might choose to adopt a hybrid approach, using GraphQL for specific parts of your application while maintaining existing RESTful APIs.

Conclusion

The debate between GraphQL and REST has been ongoing for several years, and there is no one-size-fits-all solution. Both approaches have their strengths and weaknesses, and the choice ultimately depends on your application's requirements, the complexity of your data structures, and the development team's familiarity with each paradigm.

GraphQL offers a powerful and flexible approach to data fetching, enabling clients to retrieve precisely the data they need in a single request. However, it introduces a learning curve and may not be suitable for simple APIs with well-defined resources and operations.

REST, on the other hand, is a widely adopted and familiar architectural style that works well for CRUD-based applications and has a strong ecosystem of tools and libraries. However, it can struggle with over-fetching, under-fetching, and versioning challenges as applications grow in complexity.

Ultimately, the decision between GraphQL and REST should be driven by a careful evaluation of your project's needs, the skills and experience of your development team, and the long-term maintainability and scalability of your API.

10 Must-Read JavaScript Books for Every Developer

Mohd Amir — Wed, 03 Apr 2024 06:29:03 +0000

In the world of web development, JavaScript remains a fundamental language, powering interactive and dynamic features across the web. Whether you're a beginner looking to grasp the basics or an experienced developer seeking to deepen your understanding, these 10 JavaScript books are essential additions to your library:

1. "Eloquent JavaScript" by Marijn Haverbeke:

This book is a comprehensive guide to JavaScript, covering everything from basic syntax to complex concepts like closures and prototypes. With exercises and examples throughout, it's perfect for both beginners and experienced developers looking to sharpen their skills.

Available for purchase on the No Starch Press website for $39.99 (physical book) and $31.99 (e-book) : https://nostarch.com/ejs3

2. "JavaScript: The Good Parts" by Douglas Crockford:

Douglas Crockford, a renowned JavaScript expert, distills the language down to its most essential and powerful parts in this book. It's a must-read for developers who want to write cleaner, more maintainable code.

Available for purchase on Amazon for $27.99 (physical book) and $11.99 (Kindle): https://www.amazon.com/JavaScript-Good-Parts-ebook/dp/B0026OR2ZY

3. "You Don't Know JS" Series by Kyle Simpson:

This series of books dives deep into the core mechanisms of JavaScript, covering topics like scope, closures, and async programming. With a focus on practical examples and real-world applications, it's an invaluable resource for developers looking to master JavaScript's nuances.

Available for purchase on Amazon. Individual book prices may vary: https://www.amazon.com/You-Dont-Know-JS-Yet-ebook/dp/B084BNMN7T

4. "JavaScript: The Definitive Guide" by David Flanagan:

Considered a classic in the JavaScript community, this book provides comprehensive coverage of the language, its core features, and its standard APIs. It's an indispensable reference for both beginners and experienced developers alike.

Available for purchase on Amazon for $49.22 (physical book) and $39.99 (Kindle): https://www.amazon.com/JavaScript-Definitive-Most-Used-Programming-Language/dp/1491952024

5. "Secrets of the JavaScript Ninja" by John Resig and Bear Bibeault:

Written by the creators of the jQuery library, this book explores advanced JavaScript concepts and best practices for writing efficient and maintainable code. It's a must-read for developers looking to take their skills to the next level.

Unfortunately, this book is out of print, but you may be able to find used copies online or through libraries.

6. "JavaScript Patterns" by Stoyan Stefanov:

In this book, Stoyan Stefanov explores common JavaScript patterns and best practices for writing scalable and maintainable code. It's a valuable resource for developers looking to improve their code quality and design skills.

Available for purchase on Amazon for $39.31 (physical book) and $29.99 (Kindle): https://www.amazon.com/Learning-JavaScript-Design-Patterns-Developers/dp/1449331815

7. "High-Performance JavaScript" by Nicholas C. Zakas:

Nicholas C. Zakas shares techniques for optimizing JavaScript performance, covering topics like loading and executing scripts, DOM manipulation, and network communication. It's essential reading for developers seeking to build faster and more responsive web applications.

Available for purchase on Amazon for $35.99 (physical book) and $27.99 (Kindle): https://www.amazon.com/High-Performance-JavaScript-Application-Interfaces/dp/059680279X

8. "Effective JavaScript" by David Herman:

This book offers 68 specific ways to improve your JavaScript code, covering topics like objects, functions, arrays, and asynchronous programming. It's filled with practical advice and real-world examples that will help you write better code.

Available for purchase on Amazon for $39.03 (physical book) and $29.99 (Kindle): https://www.amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182

9. "Learning JavaScript Design Patterns" by Addy Osmani:

Addy Osmani explores common design patterns and best practices for organizing and structuring JavaScript code. Whether you're building small scripts or large-scale applications, this book will help you write more modular and maintainable code.

Available for purchase on Amazon for $37.99 (physical book) and $27.99 (Kindle): https://www.amazon.com/Learning-JavaScript-Design-Patterns-Developers/dp/1449331815

10. "Node.js Design Patterns" by Mario Casciaro:

For developers working with Node.js, this book offers insights into design patterns and best practices for building scalable and maintainable applications. It covers topics like asynchronous programming, error handling, and module design, making it an essential resource for Node.js developers.

Available for purchase on Amazon for $43.99 (physical book) and $29.99 (Kindle): https://www.amazon.com/Node-js-Design-Patterns-server-side-applications-ebook/dp/B01D8HIIFU

By investing time in reading these JavaScript books, developers can deepen their understanding of the language, improve their coding skills, and stay updated with the latest best practices and techniques. Whether you're a beginner or an experienced developer, these books will help you become a more proficient JavaScript programmer.

10 JavaScript Sites Every Web Developer Should Know

Mohd Amir — Sun, 31 Mar 2024 07:04:55 +0000

Introduction:

As a web developer, mastering JavaScript is essential for creating dynamic and interactive web experiences. To hone your skills and stay updated with the latest trends and tools, here are 10 JavaScript sites that you should know about.

1. MDN Web Docs (Mozilla Developer Network):

(https://developer.mozilla.org/)
MDN Web Docs is the go-to resource for comprehensive documentation on JavaScript. From beginner tutorials to advanced references, it covers everything you need to know about JavaScript, including syntax, methods, and APIs.

2. JavaScript.info:

(https://javascript.info/)
JavaScript.info offers in-depth tutorials and articles on JavaScript concepts, ranging from basic to advanced topics. Whether you're learning the fundamentals or exploring modern JavaScript features, this site has you covered.

3. Eloquent JavaScript:

(https://eloquentjavascript.net/)
Eloquent JavaScript is an online book that teaches JavaScript programming in a clear and engaging manner. With interactive code examples and exercises, it's perfect for both beginners and experienced developers looking to deepen their understanding of the language.

4. JSFiddle:

(https://jsfiddle.net/)
JSFiddle is an online code editor that allows you to experiment with HTML, CSS, and JavaScript code in real-time. It's a valuable tool for testing ideas, debugging code, and sharing snippets with others in the developer community.

5. Stack Overflow:

(https://stackoverflow.com/questions/tagged/javascript)
Stack Overflow is a question and answer site where developers can seek help, share knowledge, and collaborate on JavaScript-related issues. It's a treasure trove of solutions to common coding problems and a great place to learn from experienced developers.

6. Codecademy:

(https://www.codecademy.com/learn/introduction-to-javascript)
Codecademy offers interactive JavaScript courses that guide you through the basics of the language to more advanced topics like asynchronous programming and APIs. With hands-on projects and quizzes, it's an effective way to learn JavaScript at your own pace.

7. JavaScript Weekly:

(https://javascriptweekly.com/)
JavaScript Weekly is a newsletter that curates the latest news, articles, and tutorials from the JavaScript community. Stay updated with the newest libraries, frameworks, and tools shaping the JavaScript ecosystem.

8. DevDocs:

(https://devdocs.io/javascript/)
DevDocs provides fast, offline access to documentation for JavaScript and other programming languages. Its clean interface and powerful search functionality make it easy to find information on JavaScript APIs, methods, and browser compatibility.

9. You Don't Know JS:

(https://github.com/getify/You-Dont-Know-JS)
You Don't Know JS is a series of books that dives deep into the inner workings of JavaScript. Written by Kyle Simpson, these books explore topics like scope, closures, and prototypes, helping you master JavaScript's more complex concepts.

10. JavaScript Garden:

(https://bonsaiden.github.io/JavaScript-Garden/)
JavaScript Garden is a collection of documentation on JavaScript pitfalls, oddities, and best practices. It helps developers navigate the tricky aspects of the language and write cleaner, more maintainable code.

Conclusion:

With these 10 JavaScript sites at your disposal, you'll have access to a wealth of resources, tutorials, and tools to enhance your JavaScript skills and become a more proficient web developer. Whether you're a beginner or an experienced coder, exploring these sites will deepen your understanding of JavaScript and empower you to create more dynamic and interactive web applications.

10 Websites Every Web Developer Should Bookmark

Mohd Amir — Sat, 30 Mar 2024 08:28:14 +0000

As a web developer, staying up-to-date with the latest trends, technologies, and best practices is crucial. Fortunately, the internet is teeming with valuable resources that can help you enhance your skills, find solutions to coding problems, and keep pace with the ever-evolving web development landscape. In this article, we'll explore 10 essential websites that every web developer should bookmark.

1. MDN Web Docs(Mozilla Developer Network):

(https://developer.mozilla.org/) This is your official guide to all things web development, straight from the team behind the popular Firefox browser. MDN boasts comprehensive documentation on HTML, CSS, JavaScript, and web APIs, making it an invaluable reference for developers of all levels.

2. A List Apart:

(https://alistapart.com/article/writing-for-the-web/) This online magazine focuses on the art and science of web design and development. Featuring insightful articles, interviews, and discussions from industry experts, A List Apart helps you stay informed about the latest trends and best practices in web development.

3. Creative Bloq:

(https://www.creativebloq.com/) Tired of staring at a blank screen? Creative Bloq offers a daily dose of inspiration for web designers and developers. Find fresh ideas, explore design trends, and discover new tools and resources to elevate your web projects.

4. FreeCodeCamp:

(https://www.freecodecamp.org/) This non-profit organization offers a fantastic platform to learn web development for free. Their interactive curriculum combines video lectures, coding challenges, and real-world projects, allowing you to build your skills while working on practical applications.

5. CodePen:

(https://codepen.io/) This online code editor and community is a playground for developers. Experiment with HTML, CSS, and JavaScript code snippets, create visual demos, and share your creations with the world. CodePen is a great way to showcase your coding skills and learn from others.

6. CSS-Tricks:

(https://css-tricks.com/) CSS-Tricks is a renowned blog and online guide dedicated to CSS, covering topics such as layouts, animations, responsive design, and advanced CSS techniques. This website is an essential resource for mastering CSS and staying up-to-date with the latest CSS developments.

7. DEV Community:

DEV Community (formerly known as DEV.to) is a community-driven platform where developers can share their thoughts, experiences, and insights through blog posts, discussions, and coding challenges. This website is an excellent place to connect with other developers, learn from their experiences, and contribute to the community.

8. Can I Use:

(https://caniuse.com/) A handy tool for checking the browser compatibility of HTML, CSS, and JavaScript features. Can I Use provides up-to-date support tables for various web technologies across different browsers.

9. Google Developers:

(https://developers.google.com/) Google Developers offers a wealth of resources, including documentation, tutorials, and tools for building web apps, mobile apps, and more using Google's technologies and APIs.

10. GitHub:

(https://github.com/Index) This web-based version control system is a must-have in your developer toolkit. GitHub allows you to store, track changes, and collaborate on code projects with ease. It's also a fantastic platform to discover open-source projects, contribute code, and build your developer portfolio.

These 10 websites are essential resources for web developers of all levels, offering a wealth of information, tools, and communities to help you stay informed, learn new skills, and advance your career. Bookmark these websites and make them a part of your regular routine to stay ahead in the rapidly evolving world of web development.

Free AI Online Courses

Mohd Amir — Tue, 26 Mar 2024 13:26:41 +0000

Boost your career with AI skills! These free online AI courses will equip you with the knowledge you need to understand and leverage Artificial Intelligence in today's job market.

Note: Don't miss out on the last two resources:

1. AI for Everyone (Coursera)

🎓 Provider: Deeplearning.ai
👨‍🏫 Instructor: Andrew Ng
📝 Description: Join Andrew Ng as he demystifies AI and its real-world applications. Perfect for beginners, this course offers a broad understanding of AI's impact on society. Enroll Now

2. Machine Learning (Coursera)

🎓 Provider: Coursera
👨‍🏫 Instructor: Andrew Ng
📝 Description: Delve into the world of machine learning with Andrew Ng and learn essential algorithms and techniques to build intelligent systems. Start Learning

3. Introduction to Artificial Intelligence (AI) (edX)

🎓 Provider: edX
👨‍🏫 Instructor: Microsoft
📝 Description: Microsoft's course covers AI fundamentals, including problem-solving and machine learning. Explore Course

4. Artificial Intelligence: Principles and Techniques (edX)

🎓 Provider: University of Adelaide
👨‍🏫 Instructor: University Professors
📝 Description: Gain insights into AI principles and techniques with this comprehensive course. Start Learning

5. Intro to Artificial Intelligence (Udacity)

🎓 Provider: Udacity
👨‍🏫 Instructor: Industry Experts
📝 Description: Dive into the basics of AI, including search algorithms and logic. Enroll Now

6. Elements of AI (University of Helsinki)

🎓 Provider: University of Helsinki
👨‍🏫 Instructor: Industry Experts
📝 Description: Explore AI concepts interactively, covering machine learning and neural networks. Start Learning

7. Introduction to Artificial Intelligence (AI) (MIT OpenCourseWare)

🎓 Provider: MIT OpenCourseWare
👨‍🏫 Instructor: MIT Professors
📝 Description: Get a comprehensive overview of AI concepts from MIT. Explore Course

8. Artificial Intelligence for Robotics (Udacity)

🎓 Provider: Udacity
👨‍🏫 Instructor: Industry Experts
📝 Description: Apply AI techniques to robotics, covering probabilistic reasoning and planning. Enroll Now

9. Artificial Intelligence Courses (Fast.ai)

🎓 Provider: Fast.ai
👨‍🏫 Instructor: Industry Experts
📝 Description: Fast.ai offers free courses on deep learning and computer vision. Start Learning

10. Artificial Intelligence (AI) (Harvard's CS50)

🎓 Provider: Harvard's CS50
👨‍🏫 Instructor: Harvard Professors
📝 Description: Explore AI fundamentals and applications with Harvard's renowned CS50 program. Enroll Now

11. Machine Learning for All (University of London)

🎓 Provider: University of London

👨‍🏫 Instructor: University Professors
📝 Description: Learn about classification, regression, and clustering algorithms. Start Learning

12. Intro to Artificial Intelligence (Kaggle)

🎓 Provider: Kaggle
👨‍🏫 Instructor: Industry Experts
📝 Description: Discover real-world applications of AI and its transformative potential. Explore Course

13. Artificial Intelligence (AI) Courses (IBM)

🎓 Provider: IBM
👨‍🏫 Instructor: IBM Experts
📝 Description: IBM offers free courses on machine learning, deep learning, and more. Start Learning

14. Artificial Intelligence (AI) Tutorials (GeeksforGeeks):

🎓 Provider: GeeksforGeeks
👨‍🏫 Instructor: GeeksforGeeks Experts
📝 Description: GeeksforGeeks offers a collection of free tutorials and articles on AI concepts and techniques. Whether you're a beginner or an experienced practitioner, you'll find valuable resources to enhance your understanding of artificial intelligence. Start Learning

15. Artificial Intelligence Courses (Google):

🎓 Provider: Google
👨‍🏫 Instructor: Google Experts
📝 Description: Google provides a variety of free online courses on AI through its various platforms, such as Google AI Education and Google Developers. These courses cover various aspects of artificial intelligence, from machine learning and deep learning to natural language processing and computer vision. With Google's expertise in AI, you can access high-quality educational content to advance your skills in this rapidly evolving field. Enroll Now

Ready to dive into the world of AI? Don't miss out on these fantastic opportunities to learn and grow! 🚀🧠

Master JavaScript Array Methods Like a Pro (Part-1)

Mohd Amir — Fri, 22 Mar 2024 11:44:51 +0000

Are you ready to embark on a journey through the whimsical world of JavaScript arrays? Strap in, because we're about to dive into some of the quirkiest and most useful methods that arrays have to offer. From pushing and popping elements to slicing and dicing arrays, So grab your coding coffee and let's get started!

push(): Adding Elements to the End of an Array
pop(): Removing the Last Element from an Array
shift(): Removing the First Element from an Array
unshift(): Adding Elements to the Beginning of an Array
concat(): Combining Arrays
slice(): Extracting a Section of an Array
splice(): Adding or Removing Elements from an Array
join(): Joining Array Elements into a String
indexOf(): Finding the First Index of an Element in an Array
lastIndexOf(): Finding the Last Index of an Element in an Array

1. push(): 🚀

Ah, the mighty push() method – the hero of array manipulation! With a single push, you can send your elements soaring to the end of the array like rockets blasting off into space.

const planets = ['Mercury', 'Venus', 'Earth'];
planets.push('Mars');
console.log(planets); // Output: ["Mercury", "Venus", "Earth", "Mars"]

Explanation:

The push() method adds one or more elements to the end of an array and returns the new length of the array. In this example, we're adding the planet Mars to our array of planets.

Real-Life Use Case:

Imagine you're organizing a space-themed party, and you need to keep track of the guest list. You can use push() to add new guests to your array of attendees as they RSVP.

2. pop():💥

When it's time to bid farewell to the last element in your array, the pop() method swoops in like a magician, making it disappear in a puff of smoke (or should we say, in a pop of fun?).

const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.pop();
console.log(removedFruit); // Output: "cherry"

Explanation:

pop() removes the last element from an array and returns that element. In this fruity example, we're saying goodbye to the cherry – but don't worry, there are plenty more fruits in the basket!

Real-Life Use Case:

Picture yourself at a fruit stand, arranging your produce for display. As customers purchase fruits, you can use pop() to remove them from your array of available fruits.

3. shift(): 🚦

Rev your engines and get ready to shift gears with the shift() method! This nifty little function lets you kick things off by removing the first element from your array.

const cars = ['BMW', 'Mercedes', 'Audi'];
const shiftedCar = cars.shift();
console.log(shiftedCar); // Output: "BMW"

Explanation:

shift() removes the first element from an array and returns that element. It's like saying goodbye to the car at the front of the line – sorry BMW, but it's time to hit the road!

Real-Life Use Case:

Imagine you're managing a car dealership, and you want to keep track of the cars as they're sold. You can use shift() to remove the first car from your array of available inventory as it drives off the lot.

4. unshift(): 🛣️

Clear the runway and make way for the unshift() method! This versatile function lets you add one or more elements to the beginning of your array, paving the way for new arrivals.

const animals = ['lion', 'tiger', 'leopard'];
const newLength = animals.unshift('cheetah', 'panther');
console.log(newLength); // Output: 5

Explanation:

unshift() adds one or more elements to the beginning of an array and returns the new length of the array. In this example, we're welcoming the cheetah and panther to the jungle of animals.

Real-Life Use Case:

Picture yourself as the curator of a zoo, preparing to introduce new species to the public. You can use unshift() to add the latest arrivals to your array of exhibit animals at the front of the line.

5. concat(): 🤝

It's time to bring out the welcome mat and extend a friendly hand with the concat() method! This cooperative function lets you merge two or more arrays into a single, harmonious array.

const fruits1 = ['apple', 'banana'];
const fruits2 = ['cherry', 'orange'];
const allFruits = fruits1.concat(fruits2);
console.log(allFruits); // Output: ["apple", "banana", "cherry", "orange"]

Explanation:

concat() combines two or more arrays and returns a new array containing the merged elements. It's like hosting a fruit salad party and inviting all the fruits to come together for a delicious mix!

Real-Life Use Case:

Imagine you're compiling a list of ingredients for a recipe, and some ingredients are stored in separate arrays. You can use concat() to combine all the arrays into a single list of ingredients for easy reference.

6. slice(): 🍰

Slice up some fun with the slice() method! This handy tool lets you cut out a portion of your array and serve it up as a fresh slice of data goodness.

const pizzaToppings = ['pepperoni', 'mushrooms', 'onions', 'sausage', 'green peppers'];
const vegetarianSlice = pizzaToppings.slice(1, 4);
console.log(vegetarianSlice); // Output: ["mushrooms", "onions", "sausage"]

Explanation:

slice() extracts a section of an array and returns a new array containing the selected elements. It's like slicing a pizza – you can choose exactly which toppings you want on your slice!

Real-Life Use Case:

Imagine you're planning a pizza party, and some guests prefer vegetarian options. You can use slice() to create a separate array of vegetarian toppings to cater to their dietary preferences.

7. splice(): 🎣

Cast your line and reel in some fishy fun with the splice() method! This versatile function lets you add or remove elements from an array, giving you ultimate control over your data.

const fish = ['trout', 'salmon', 'bass', 'pike'];
const removedFish = fish.splice(2, 1, 'catfish', 'perch');
console.log(removedFish); // Output: ["bass"]
console.log(fish); // Output: ["trout", "salmon", "catfish", "perch", "pike"]

Explanation:

splice() adds or removes elements from an array and returns an array containing the removed elements. In this example, we're removing one element at index 2 (bass) and adding two new elements (catfish and perch) in its place.

Real-Life Use Case:

Imagine you're organizing a fishing tournament, and you need to keep track of the types of fish caught by each angler. You can use splice() to update the array of fish caught whenever a new catch is recorded.

8. join(): 🧩

It's time to join forces and unite your array elements with the join() method! This cooperative function transforms your array into a single string, ready to be shared with the world.

const ingredients = ['flour', 'sugar', 'eggs', 'butter'];
const recipe = ingredients.join(', ');
console.log(recipe); // Output: "flour, sugar, eggs, butter"

Explanation:

join() joins all elements of an array into a string, using a specified separator between each element. It's like mixing all the ingredients together to create a delicious recipe!

Real-Life Use Case:

Imagine you're writing a shopping list for baking a cake, and you want to list all the ingredients in a single line. You can use join() to convert your array of ingredients into a comma-separated string for easy reference at the store.

9. indexOf(): 🔍

Embark on a quest for knowledge with the indexOf() method! This intrepid function searches for a specified element in your array and returns its index – like a treasure map leading you to buried treasure!

const fruits = ['apple', 'banana', 'cherry', 'banana'];
const bananaIndex = fruits.indexOf('banana');
console.log(bananaIndex); // Output: 1

Explanation:

indexOf() returns the first index at which a given element can be found in the array, or -1 if it is not present. It's like scanning through a fruit bowl to find the elusive banana hiding among the apples and cherries.

Real-Life Use Case:

Imagine you're sorting through a basket of fruit, looking for a specific type of apple. You can use indexOf() to quickly locate the apple and determine its position in the basket.

10. lastIndexOf(): 🔍

When one search isn't enough, turn to the lastIndexOf() method for a second chance at finding your elusive element! This trusty function searches for a specified element in your array, starting from the end, and returns its last index.

const fruits = ['apple', 'banana', 'cherry', 'banana'];
const lastBananaIndex = fruits.lastIndexOf('banana');
console.log(lastBananaIndex); // Output: 3

Explanation:

lastIndexOf() returns the last index at which a given element can be found in the array, or -1 if it is not present. It's like retracing your steps in search of that missing banana, starting from the back of the fruit bowl.

Real-Life Use Case:

Imagine you're hunting for your favorite pair of socks in a drawer filled with socks of various colors. You can use lastIndexOf() to search for the last occurrence of your favorite color sock, helping you find it faster amidst the sea of socks.

Stay tuned for Part 2, where we'll continue our journey through the fascinating world of JavaScript array methods! We've only scratched the surface – there's so much more to explore. 🚀💻

DEV Community: Mohd Amir

MERN + TypeScript Code Cheat Sheet — Part 2 (BullMQ, Puppeteer, SQL, Testing, React, Git/Docker/curl)

MERN Cheat Sheet — Part 2

Table of contents

6. BullMQ + Redis

6.1 Folder structure

6.2 ioredis connection

6.3 Queue

6.4 Add job (attempts, backoff, deterministic jobId)

6.5 Worker with concurrency

6.6 Job events

6.7 Job status endpoint

6.8 Separate worker process (src/workers/index.ts)

6.9 Graceful close (API side)

6.10 docker-compose for Redis + Mongo

7. Puppeteer PDF

7.1 Launch + render

7.2 setContent + pdf options

7.3 Close page and browser

7.4 Reuse one browser

7.5 Inside a BullMQ worker

8. SQL (MySQL)

8.1 INNER JOIN / LEFT JOIN

8.2 GROUP BY + HAVING

8.3 Subqueries

8.4 Window functions: ROW_NUMBER, RANK

8.5 Top-N per group

8.6 Second-highest value

8.7 Composite and covering indexes

8.8 EXPLAIN

8.9 Transactions

9. Testing

9.1 Vitest config + env setup

9.2 mongodb-memory-server setup + teardown

9.3 supertest + authenticated request helper

9.4 Cross-user access test

9.5 Validation test

10. React + Vite + TypeScript

10.1 Setup with Tailwind v4

10.2 Router with protected and public-only routes

10.3 axios client + interceptors

10.4 Single-flight refresh + navigator.locks

10.5 TanStack Query: client + key factory

10.6 useQuery + keepPreviousData

10.7 useMutation + invalidate

10.8 Optimistic update with rollback

10.9 react-hook-form + zod resolver

10.10 AuthContext with useAuth

10.11 useEffect cleanup

10.12 useMemo

10.13 useCallback

10.14 useRef

11. Git, Docker and curl

11.1 Init + commit conventions

11.2 .gitignore for Node

11.3 Docker Compose basics

11.4 Dockerfile for the API (verify)

11.5 curl: JSON

11.6 curl: cookies (-c and -b)

11.7 curl: bearer auth

MERN + TypeScript Code Cheat Sheet — Part 1 (Setup, Express, Mongoose, Aggregation, Auth)

MERN Cheat Sheet — Part 1

Versions assumed (from package.json)

Repo bugs I found while extracting (fixed in snippets)

Table of contents

1. Setup

1.1 Install

1.2 package.json scripts

1.3 tsconfig.json

1.4 Env validation with Zod (src/config/env.ts)

1.5 app.ts

1.6 server.ts + graceful shutdown

2. Express patterns

2.1 asyncHandler

2.2 ApiError

2.3 Central error handler

2.4 validate middleware

2.5 404

2.6 helmet (not in my repo — verify)

2.7 cors with credentials (not in my repo — verify)

6.8 Separate worker process (`src/workers/index.ts`)

1.4 Env validation with Zod (`src/config/env.ts`)