📂 Cấu trúc thư mục

src/
│
├── lib/                     # Code tái sử dụng (không phụ thuộc route)
│   ├── components/           # Component UI (Button, Modal, Navbar...)
│   ├── layouts/              # Layouts chung (MainLayout, AuthLayout...)
│   ├── stores/               # Global state (Svelte store: user, cart...)
│   ├── utils/                # Hàm helper (format date, validate...)
│   ├── services/             # Service gọi API (axios/fetch wrapper)
│   └── styles/               # SCSS/Tailwind global, biến theme
│
├── routes/                   # Routing theo file system (SvelteKit convention)
│   ├── +layout.svelte        # Layout gốc (wrapper toàn app)
│   ├── +layout.ts            # Load data global (vd: check auth, settings)
│   ├── +page.svelte          # Trang chủ (/)
│   ├── about/
│   │   └── +page.svelte      # /about
│   ├── auth/
│   │   ├── login/
│   │   │   ├── +page.svelte  # /auth/login
│   │   │   └── +page.ts      # Logic load/submit login
│   │   └── register/
│   │       └── +page.svelte  # /auth/register
│   ├── dashboard/
│   │   ├── +layout.svelte    # Layout riêng cho dashboard
│   │   └── +page.svelte      # /dashboard
│   └── api/                  # (Optional) API routes (server endpoints)
│       └── users/
│           └── +server.ts    # Ví dụ: GET/POST /api/users
│
├── app.css                   # CSS global
├── app.d.ts                  # Type definition cho SvelteKit
└── app.html                  # Template HTML gốc

📦 Các file cấu hình

svelte.config.js → Config cho SvelteKit (preprocess, alias).

vite.config.js → Config cho Vite bundler (plugin, optimize).

tsconfig.json → Config TypeScript.

.env / .env.production → Biến môi trường (API URL, secrets).

.gitignore → Ignore file không cần push lên Git.

🔑 Alias gợi ý

alias: {
    $components: "./src/lib/components",
    $layouts: "./src/lib/layouts",
    $stores: "./src/lib/stores",
    $utils: "./src/lib/utils",
    $services: "./src/lib/services"
}