১৫ মিনিট / intermediate / 5 ধাপ

Senior dev-এর মতো debug আর refactor করুন

Senior engineer-রা আসলে যেভাবে Claude Code ব্যবহার করেন, আপনিও সেভাবে করুন। আসল stack trace দিন, test green রেখে component refactor করুন, আর debugging-এর এমন একটা systematic অভ্যাস তৈরি করুন যা project বড় হলেও কাজ করে।

Claude Code কোনো জাদুর কাঠি নয়। এটা একজন pair programmer, যে আপনার codebase পড়ে, data flow trace করে, git history দেখে, আর একবারে একটা করে hypothesis দাঁড় করায়। Team-এ সদ্য join করা একজন senior engineer-এর সঙ্গে যেভাবে কাজ করতেন, ঠিক সেভাবে ভেবেচিন্তে এই process কীভাবে চালাবেন, এই tutorial-এ সেটা দেখবেন।

কোথায় follow করবেন

যা লাগবে: আপনার কম্পিউটারে Claude Code install করা থাকতে হবে। Install guide (English)

ধাপ 01 / 05

আপনার project-এর context setup করুন

Claude-এর কাজে লাগার মতো output আর গতানুগতিক generic output-এর পার্থক্য প্রায় সব সময় CLAUDE.md-তে। React/TypeScript project-এর জন্য এতে রাখুন build command, test command, মূল pattern, আর যেসব convention বাইরে থেকে দেখে বোঝা যায় না। প্রতিটি request-এ Claude এটা ব্যবহার করবে, আপনাকে বারবার একই কথা বলতে হবে না।

markdown

# React/Next.js/TypeScript project-এর CLAUDE.md

## Stack
Next.js 15 (App Router), TypeScript strict, Tailwind CSS, Prisma, Vitest

## Commands
npm run dev          # Dev server
npm run build        # Production build (tsc + next build চালায়)
npm test             # Vitest unit test
npm run test:e2e     # Playwright end-to-end test
npx tsc --noEmit    # শুধু type check

## মূল pattern
- শুধু functional component, prop interface explicit
- কোনো barrel file নয় (source থেকে সরাসরি import করুন)
- Default হিসেবে Server Component, দরকার হলেই শুধু 'use client'
- বাইরে থেকে আসা সব input Zod দিয়ে validate করুন
- প্রতিটি বড় route segment-এ error boundary

## Testing-এর নিয়ম
- Refactor করার পর সব সময় test চালান
- Unit test-এ database layer mock করবেন না (Prisma test DB ব্যবহার করুন)
- Test file পাশাপাশি রাখুন: UserCard.tsx-এর পাশেই UserCard.test.tsx

## যা কখনো করবেন না
- কোনো any type নয়
- Production code-এ কোনো console.log নয়
- Component file থেকে কোনো default export নয়

আপনি যা দেখবেন

প্রতিটি request-এর আগে Claude আপনার context পড়ে নেয়

ধাপ 02 / 05
একটা আসল error debug করুন
Bug-এর বর্ণনা লিখে বোঝানো বন্ধ করুন। হুবহু stack trace paste করুন। Claude আসল file-গুলো ধরে trace করবে, recent git change দেখবে, আর fix suggest করার আগে root cause বলবে। আসল কথা: hypothesis দাঁড় করানোর আগে ওকে code দেখতে দিন।
bash
```
# Summary নয়, পুরো stack trace paste করুন
claude "এই error-টা fix করে দিন:

TypeError: Cannot read properties of undefined (reading 'userId')
    at getEnrollmentStatus (src/lib/enrollment.ts:47:28)
    at EnrollmentButton (src/components/EnrollmentButton.tsx:23:18)
    at renderWithHooks (react-dom/cjs/react-dom.development.js:14985:18)

Login না করে কেউ /courses/[id]-এ গেলেই এটা হয়।"
```
আপনি যা দেখবেন
Claude আন্দাজ না করে bug trace করে
ধাপ 03 / 05
নিশ্চিন্তে refactor করুন
Claude-কে বলুন কী বদলাতে চান, বলে দিন test green থাকতেই হবে, তারপর ওকে কাজ করতে দিন। CLAUDE.md-এর "refactor করার পর সব সময় test চালান" নিয়মের কারণে Claude নিজেই পুরো test suite চালায়, আর কিছু ভাঙলে জানায়। আপনি review করবেন diff, পুরো process নয়।
bash
```
# ভালো refactoring prompt: scope + constraint
claude "UserCard component থেকে avatar-এর logic বের করে
আলাদা একটা AvatarWithFallback component বানান। আগের সব
test pass করতে হবে। বাইরের props interface একদম বদলাবেন না।"
```
আপনি যা দেখবেন
Test-কে safety net রেখে refactor
ধাপ 04 / 05
Systematic উপায়
Senior engineer-রা আন্দাজে কিছু করেন না। তাঁরা symptom থেকে উল্টো দিকে data flow trace করেন, সম্প্রতি কী বদলেছে দেখেন, আর একবারে একটা hypothesis নিয়ে এগোন। Claude-কেও ঠিক এটাই করতে বলতে পারেন। Prompt-এ পরিষ্কার করে বলে দিন, তাহলে কোনো code-এ হাত দেওয়ার আগে ও কীভাবে ভাবছে সেটা দেখাবে।
bash
```
# Fix করার আগে Claude-কে trace করতে বলুন
claude "User একটা lesson শেষ করার পর CourseProgress component
stale data দেখাচ্ছে। এখনই কোনো fix suggest করবেন না।

আগে API call থেকে UI render পর্যন্ত data flow trace করুন।
এই path-এ recent কোনো change হয়েছে কি না git history দেখুন।
সবচেয়ে likely কারণটা বের করুন। তারপর আমার confirmation-এর জন্য অপেক্ষা করুন।"
```
আপনি যা দেখবেন
আগে trace, পরে fix

ধাপ 05 / 05

শেখাটা ধরে রাখুন

Debugging session শেষে সবচেয়ে ভালো কাজ হলো, যা শিখলেন তা CLAUDE.md-তে যোগ করা। প্রতিটি project-এ এমন কিছু pattern থাকে যেখানে মানুষ বারবার আটকে যায়। একবার লিখে রাখুন, তাহলে এই codebase-এ পরের প্রতিটি request-এ Claude নিজে থেকেই সেই ভুলগুলো এড়িয়ে চলবে।

markdown

# প্রতিটি session-এর পর CLAUDE.md-তে যোগ করুন

## Known Gotchas
- React Query: mutation-এর ওপর নির্ভর করা query-তে কখনো staleTime: Infinity
  set করবেন না। staleTime: 0 দিন, অথবা বাদ দিন (React Query-র default-ই যথেষ্ট)।
- Page (auth) route group-এ না থাকলেও public route-এ session?.user undefined
  হতে পারে। userId access করার আগে সব সময় guard দিন।
- AvatarWithFallback-এ width/height prop explicit দিতে হয়।
  শুধু CSS দিয়ে parent থেকে size নেয় না।

## Debugging-এর preference
- Fix suggest করার আগে data flow trace করুন
- Affected file-এ recent change দেখতে git log check করুন
- প্রতিটি refactor-এর পর npm test চালান
- Code বদলানোর আগে root cause আর এক লাইনের explanation দেখান

আপনি যা দেখবেন

CLAUDE.md হয়ে ওঠে team-এর জমানো অভিজ্ঞতা

আপনি কী বানালেন, কাউকে জানান

Claude Code Guide-এ "Senior dev-এর মতো debug আর refactor করুন" শেষ করলাম। সময় লাগল প্রায় ১৫ মিনিট, আর এটা ফ্রি: https://claudecodeguide.dev/bn/tutorials/debug-and-refactor

Share on LinkedIn

New guides, when they ship

One email, roughly weekly. CLAUDE.md templates, workflows I actually use, and the cut-for-length stuff that does not make the public guides. One-click unsubscribe.

Or read Product Field Notes, the Substack

আপনার project-এর context setup করুন

একটা আসল error debug করুন

নিশ্চিন্তে refactor করুন

Systematic উপায়

শেখাটা ধরে রাখুন