TanStackBeginner

Folder Structure

Project-এর পরিষ্কার folder structure — components, lib, hooks, types আলাদা করা — বাংলায়।

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

Project বড় হলেই পরিষ্কার folder structure জীবন বাঁচায়। আমাদের dashboard-এর structure দেখে চোখ বুলিয়ে নিন:

Folder treebash

bash

src/
├─ app/
│  ├─ layout.tsx             # root layout
│  ├─ providers.tsx          # QueryClientProvider (client)
│  ├─ page.tsx               # home page
│  ├─ products/
│  │  └─ page.tsx            # dashboard page (client)
│  └─ api/
│     └─ products/
│        ├─ route.ts         # GET list + POST create
│        └─ [id]/route.ts    # GET one + PUT + DELETE
├─ components/
│  ├─ ui/                    # shadcn/ui components
│  ├─ layout/
│  │  └─ page-header.tsx
│  └─ products/
│     ├─ product-table.tsx
│     ├─ product-columns.tsx
│     ├─ product-form.tsx    # create + edit (একই form)
│     ├─ product-dialog.tsx  # modal wrapper
│     ├─ delete-product-dialog.tsx
│     ├─ product-filters.tsx
│     └─ product-pagination.tsx
├─ lib/
│  ├─ axios.ts               # axios instance + interceptors
│  ├─ products-api.ts        # typed API functions
│  ├─ query-keys.ts          # productKeys
│  ├─ validators/
│  │  └─ product-schema.ts   # zod schema
│  └─ hooks/
│     ├─ use-products.ts     # list/detail queries
│     └─ use-product-mutations.ts
└─ types/
   └─ product.ts             # Product + API types

প্রতিটি folder-এর কাজ

app/products/page.tsx — dashboard page, সবকিছু যুক্ত হয় এখানে
components/products/ — this domain-এর UI টুকরো
lib/hooks/ — TanStack Query hooks (query + mutation)
lib/ — Axios, API functions, query keys, schemas
types/ — ডেটা ও API-এর TypeScript types

Feature-based grouping

ছোট project-এ folder-গুলো flat (সমান স্তরের) রাখা ঠিক; বড় project-এ feature-first grouping (প্রতিটি feature-এর নিজস্ব components/hooks) বেশি maintainable। এই কোর্সে products feature-কে আলাদা রেখেছি — pattern-টা এভাবেই বোঝা যায়।

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