تی‌وی شادفیلم — پلتفرم کاتالوگ و کشف فیلم و سریال
معرفی پروژه
tv.shadfilm.ir زیرپلتفرم و برادر دیجیتال شادفیلم است؛ یک رابط کاربری مدرن برای کشف و مرور فیلم و سریال که کاملاً با Next.js ساخته شده و تمام محتوای خود—از پوستر و خلاصه داستان گرفته تا امتیاز IMDb و دسته‌بندی‌ها—را به‌صورت زنده از NegaTV API دریافت می‌کند. برخلاف شادفیلم اصلی که یک پلتفرم کامل Full-Stack است، این پروژه تمرکز صرف روی معماری فرانت‌اند دارد: چگونه می‌شود با بهترین الگوهای رندرینگ Next.js، یک تجربه‌ی کاربری سریع، روان و حرفه‌ای روی داده‌های یک API ثالث ساخت.
امکانات کلیدی
- کاتالوگ گسترده‌ی فیلم و سریال با پوستر، امتیاز IMDb، ژانر و خلاصه‌ی داستان، همه از طریق اتصال زنده به NegaTV API
- صفحه‌ی اصلی پویا با ردیف‌های دسته‌بندی‌شده (برترین امتیازها، تازه‌ترین‌ها، درام، هیجان‌انگیز، اکشن و…)
- صفحه‌ی کاتالوگ با قابلیت فیلتر بر اساس ژانر و مرتب‌سازی بر اساس امتیاز IMDb یا تاریخ انتشار
- صفحه‌ی اختصاصی برای هر عنوان با جزئیات کامل و دکمه‌های پخش (Play) و ذخیره (Save)
- بخش «ذخیره‌شده‌ها» برای نشان‌کردن و دسترسی سریع به محتوای موردعلاقه‌ی هر کاربر
- طراحی کاملاً ریسپانسیو با اولویت تجربه‌ی موبایل
- بارگذاری تدریجی و هوشمند تصاویر پوستر همراه با حالت‌های اسکلتون (Skeleton Loading) در حین دریافت داده از API
معماری فنی
کل پروژه با Next.js (App Router) و TypeScript پیاده‌سازی شده و از استراتژی رندرینگ ترکیبی بهره می‌برد: صفحات کاتالوگ با ISR رندر می‌شوند تا هم سرعت بارگذاری فوق‌العاده باشد و هم فشار درخواست روی NegaTV API به حداقل برسد، و صفحات نیازمند داده‌ی لحظه‌ای با SSR سرو می‌شوند. به‌جای فراخوانی مستقیم API ثالث از سمت کلاینت، یک لایه‌ی BFF (Backend-for-Frontend) با Route Handlerهای خود Next.js پیاده‌سازی شده که هم کلید و جزئیات اتصال به NegaTV API را از دید کاربر پنهان می‌کند و هم پاسخ‌ها را نرمال‌سازی و کش می‌کند. مدیریت وضعیت و کشِ سمت کلاینت (مثل لیست ذخیره‌شده‌ها) با SWR انجام می‌شود تا داده‌ها همیشه به‌روز و بدون تأخیر محسوس در دسترس باشند. استایل‌دهی با Tailwind CSS و بهینه‌سازی تصاویر با next/image صورت گرفته و متادیتای سئو (عنوان، توضیحات و Open Graph) برای هر صفحه به‌صورت پویا تولید می‌شود تا صفحات هر فیلم و سریال به‌خوبی در نتایج جست‌وجو دیده شوند.
نقش من
طراحی معماری فرانت‌اند، پیاده‌سازی کامل رابط کاربری با Next.js و TypeScript، ساخت لایه‌ی BFF برای اتصال امن و بهینه به NegaTV API، و بهینه‌سازی عملکرد (رندرینگ، کشینگ تصاویر و سئو) به‌طور کامل بر عهده‌ی من بوده است.