TanStackAdvanced

Complete Project — সব snippet

পুরো Project-এর সংক্ষিপ্ত tour — folder structure, প্রতিটি file-এর কাজ — বাংলায়।

7টি অংশবাংলা ভাষায়

একবারে-একবার পুরো প্রজেক্ট দেখে নেওয়া যাক — কোথায় কী থাকে। প্রতিটি folder/file-এর ভূমিকা এক নজরে:

final folder structuretext

text

src/
├─ app/
│  ├─ layout.tsx            # Providers wrap
│  ├─ page.tsx              # landing
│  └─ products/
│     └─ page.tsx           # dashboard (client)
├─ components/
│  ├─ ui/                   # shadcn (button, table, dialog …)
│  └─ products/
│     ├─ product-filters.tsx
│     ├─ product-list.tsx
│     ├─ product-columns.tsx
│     ├─ product-table.tsx
│     ├─ product-form.tsx
│     ├─ create-edit-dialog.tsx
│     └─ delete-alert-dialog.tsx
├─ lib/
│  ├─ axios.ts              # instance + interceptors
│  ├─ query-client.ts       # QueryClient+ defaults
│  ├─ query-keys.ts         # productKeys hierarchy
│  ├─ products-api.ts       # API functions + types
│  ├─ validators/
│  │  └─ product-schema.ts  # zod
│  └─ hooks/
│     ├─ use-debounce.ts
│     ├─ use-products.ts
│     └─ use-product-mutations.ts
└─ types/
   └─ product.ts            # shared types

শুরু থেকে শেষ: ক্রম

types/product.ts — model + API shapes
lib/validators/product-schema.ts — zod
lib/query-client.ts + lib/axios.ts — setup
lib/query-keys.ts + lib/hooks/* — query layer
components/products/* — UI
app/products/page.tsx — composition

সম্ভাব্য টুইট

useProducts-এ enabled flag (focus/search এড়ায় আলতো fetch)
server-side initialData seed (SSR)
URL searchParams sync (shareable filters)
row selection (bulk delete)

আর এটাই basis

এটা সাদা 'reference implementation'। এ-কাঠামোতে আরো feature (bulk, export, drag-sort) যোগ করা যায় — প্রতিটি _এখানেই TanStack pattern-ই অনুসরণ করে।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।