سازنده ارائه پویا دیجی‌کالا

معرفی

پلتفرمی که برای دیجی‌کالا ساخته شد تا بخش‌های گزارش سالانه‌اش را به‌جای فایل‌های ثابت، به‌صورت ارائه‌های آنلاین و تعاملی منتشر کند. یک کارمند یا مدیر می‌تواند بخش‌های دلخواه گزارش را کنار هم بچیند، یک ارائه‌ی آماده بسازد و لینکش را برای جلسه به اشتراک بگذارد. پروژه دو نیمه دارد: نمایشگری که مخاطب می‌بیند، و پنلی که ارائه‌ها در آن ساخته و مدیریت می‌شوند.

نمایشگر — آنچه مخاطب می‌بیند

هر ارائه با یک لینک یکتا و یک کلید دسترسی باز می‌شود. صفحه‌ی کاور یک کارت شیشه‌ای روی تصویر زمینه است که عنوان، ارائه‌دهنده، تاریخ شمسی و تعداد صفحات را نشان می‌دهد و با یک دکمه‌ی «شروع» وارد اسلایدها می‌شوی. ادامه‌اش یک اسلایدشوی کاملا راست‌به‌چپ است: صفحه‌بندی، جابه‌جایی بین اسلایدها با انیمیشن، نمودارهای داده‌ای و تصاویر تولیدشده با هوش مصنوعی.

پنل مدیریت — ساخت و مدیریت

جایی که ارائه‌ها ساخته می‌شوند. کاربر بعد از ورود (با احراز هویت مبتنی بر توکن) وارد داشبوردی می‌شود که همه‌ی ارائه‌ها را با عنوان، ارائه‌دهنده، تاریخ ساخت و تعداد اسلاید فهرست می‌کند، همراه با کلیدهای ویرایش، پیش‌نمایش و حذف. ساخت یک ارائه دو مرحله دارد: یک فرم برای صفحه‌ی کاور (لینک یکتا، تصویر زمینه، عنوان، زیرنویس، ارائه‌دهنده، تاریخ و کلید دسترسی) و یک ویرایشگر اسلاید با قابلیت کشیدن‌ورهاکردن برای افزودن، جابه‌جایی و حذف اسلایدها. ادمین‌ها کاربران را هم مدیریت و تایید می‌کنند.

زیرساخت فنی

• رابط کاربری با React و استایل‌دهی ماژولار با CSS Modules
• مدیریت داده‌ی سمت سرور و کش با React Query (مهاجرت از Context API برای حذف رندرهای اضافه)
• ویرایشگر کشیدن‌ورهاکردن اسلایدها با dnd-kit و مدیریت فرم‌ها با react-hook-form
• نمودارها با Chart.js و انیمیشن اسلایدها با Framer Motion
• آپلود تصاویر روی Supabase و احراز هویت با توکن JWT
• تاریخ شمسی با moment-jalaali و تست با Vitest و React Testing Library