فرانت‌اند وب بدرود یک اپلیکیشن React ساخته شده با TanStack Start، TailwindCSS v4، و shadcn/ui است. در تولید، رندر سمت سرور یک پوسته HTML از پیش رندر می‌کند. باینری Go این پوسته را همراه با دارایی‌های کلاینت استاتیک جاسازی می‌کند.

پشته فناوری

ساختار دایرکتوری

apps/web/
├── src/
│   ├── routes/                    # مسیرهای مبتنی بر فایل TanStack Router
│   │   ├── index.tsx              # خانه / صفحه فرود
│   │   ├── __root.tsx             # layout ریشه
│   │   ├── auth/
│   │   │   ├── login.tsx          # صفحه ورود
│   │   │   └── register.tsx       # صفحه ثبت‌نام
│   │   ├── dashboard/             # داشبورد کاربر
│   │   ├── m.$meetId.tsx          # صفحه اتاق جلسه
│   │   ├── admin/                 # پنل ادمین
│   │   │   ├── index.tsx          # نمای کلی
│   │   │   ├── rooms.$id.tsx      # جزئیات اتاق
│   │   │   ├── users.$id.tsx      # جزئیات کاربر
│   │   │   └── settings.tsx       # تنظیمات سرور + توکن‌های دعوت
│   │   └── settings.tsx           # صفحه تنظیمات حساب
│   ├── components/
│   │   ├── admin/                 # کامپوننت‌های جدول ادمین
│   │   │   ├── RoomTable.tsx
│   │   │   └── UserTable.tsx
│   │   ├── auth/                  # UI احراز هویت (دکمه‌های OAuth، کلید عبور)
│   │   ├── dashboard/             # کارت‌های اتاق، دیالوگ ایجاد اتاق
│   │   ├── meeting/               # کاشی‌های ویدیو، کنترل‌ها، انتخابگر دستگاه
│   │   │   ├── ControlsBar.tsx
│   │   │   ├── DeviceSelector.tsx
│   │   │   ├── ParticipantGrid.tsx
│   │   │   ├── ChatPanel.tsx
│   │   │   └── SpotlightView.tsx
│   │   ├── ui/                    # کتابخانه کامپوننت shadcn/ui
│   │   └── ThemeToggle.tsx        # تغییرده حالت روشن/تاریک
│   └── lib/
│       ├── api.ts                 # wrapper authFetch
│       └── auth.store.ts          # فروشگاه احراز هویت Zustand (توکن‌ها، کاربر)
├── scripts/
│   └── embed.mjs                  # رندر SSR + کپی در server/frontend/
├── public/                        # دارایی‌های استاتیک
├── package.json
├── tsconfig.json
└── vite.config.ts

جریان احراز هویت

وضعیت احراز هویت توسط یک فروشگاه Zustand در src/lib/auth.store.ts مدیریت می‌شود:

۱. ورود - کاربر اعتبارنامه‌ها را به POST /api/auth/login ارسال می‌کند ۲. ذخیره توکن - توکن‌های دسترسی و تازه‌سازی در localStorage ذخیره می‌شوند ۳. تزریق خودکار - authFetch هر تماس API را می‌پیچد و هدر Authorization: Bearer را اضافه می‌کند ۴. تازه‌سازی خودکار - وقتی درخواست ۴۰۱ برمی‌گرداند، authFetch تلاش می‌کند توکن را با استفاده از توکن تازه‌سازی تازه کند ۵. خروج - توکن‌ها را پاک می‌کند و به صفحه ورود هدایت می‌شود

authFetch

تابع authFetch در src/lib/api.ts یک جایگزین drop-in برای fetch است که:

• توکن دسترسی JWT را به هر درخواست متصل می‌کند
• پاسخ‌های ۴۰۱ را می‌گیرد و تلاش می‌کند توکن را تازه کند
• اگر تازه‌سازی شکست خورد، کاربر را خارج می‌کند

صفحه جلسه

اتاق جلسه در /m/$meetId موارد زیر را مدیریت می‌کند:

• اتصال LiveKit - با توکن از API join به media server متصل می‌شود
• رندرینگ ترک - اشتراک در ترک‌های صوتی/ویدیویی از سایر شرکت‌کنندگان
• انتخاب دستگاه - تغییر دوربین، میکروفون، یا اسپیکر در حین تماس بدون ترک اتاق
• کنترل‌های ادمین - سازنده اتاق دکمه‌های حذف، میوت، و خاموش ویدیو را می‌بیند
• چت - چت متنی در اتاق از طریق ChatPanel
• نمای اسپات‌لایت - تمرکز روی یک شرکت‌کننده واحد

پنل ادمین

پنل ادمین در /admin موارد زیر را فراهم می‌کند:

• مدیریت اتاق - نمای جدولی با حفاری به صفحات جزئیات اتاق
• مدیریت کاربر - نمای جدولی با حفاری به حساب‌های کاربر فردی و ویرایش نقش
• تنظیمات سرور - پیکربندی گزینه‌های سراسری، کنترل‌های دسترسی، و لینک‌های دعوت
• توکن‌های دعوت - تولید و لغو لینک‌های دعوت برای کنترل اینکه چه کسی می‌تواند بپیوندد

حالت تاریک

یک کامپوننت ThemeToggle به کاربران اجازه می‌دهد از هر کجای اپلیکیشن بین تم‌های روشن و تاریک سوئیچ کنند. ترجیح در localStorage ذخیره می‌شود و در بارگذاری اعمال می‌شود.

ساخت

توسعه

cd apps/web
bun run dev      # سرور توسعه Vite را با HMR در localhost:3000 شروع می‌کند

سرور توسعه درخواست‌های /api و /livekit را به سرور Go در localhost:8090 پراکسی می‌کند.

تولید (بسته وب مستقل)

cd apps/web
bun run build    # دارایی‌های کلاینت استاتیک را در dist/client/ و سرور SSR را در dist/server/ خروجی می‌دهد

تولید (جاسازی شده در باینری Go)

cd apps/web
bun run build:embed

این scripts/embed.mjs را اجرا می‌کند که:

۱. bun run build را اجرا می‌کند تا dist/client/ و dist/server/ تولید شود ۲. سرور SSR را به صورت محلی شروع می‌کند ۳. / را می‌گیرد تا پوسته HTML رندر شده را ثبت کند ۴. dist/client/ را در server/frontend/ کپی می‌کند ۵. HTML رندر شده را به عنوان server/frontend/index.html می‌نویسد

بررسی نوع

bun run check    # tsc --noEmit را اجرا می‌کند

همچنین ببینید

• سیستم طراحی وب - الگوهای کامپوننت UI، توکن‌های رنگی، و قوانین استایل