وبسایت نمونهکار هنری با مدیریت محتوای اختصاصی
وبسایتی سینمایی و اسکرولمحور برای معرفی آثار، کلاسها، کارگاهها و نمایشگاههای یک هنرمند، که صاحب اثر تمام بخشهای آن را با کشیدن و رها کردن، خودش مدیریت میکند.
- نوع پروژه: وبسایت محتوامحور با سامانهٔ مدیریت محتوای سرویسی
- کارفرما: یک هنرمند (نام صاحب اثر بنا بر توافق منتشر نمیشود)
- نقش سپرو وب: طراحی و پیادهسازی سایت عمومی، پنل مدیریت اختصاصی، استودیوی محتوای جاسازیشده، احراز هویت و ارسال ایمیل
- وضعیت: تکمیلشده و تحویلشده
مسئلهای که حل کردیم
نمونهکار یک هنرمند دو نیاز متضاد دارد: باید مثل یک اثر هنری دیده شود و در عین حال بدون کمک فنی بهروز بماند. هر بار افزودن یک اثر تازه یا اعلام یک کارگاه نباید به تماس با توسعهدهنده ختم شود.
آنچه طراحی و پیادهسازی کردیم
سمت عمومی سایت یک تجربهٔ اسکرولمحور است: قهرمانِ صفحهٔ اول با ویدئویی که همراستا با اسکرول باز میشود، حرکت نرم صفحه، و گالریهای چیدمان آجری برای آثار. بخشهای آثار، کلاسهای هنری، کارگاهها و نمایشگاهها همگی از محتوای مدیریتشده تغذیه میشوند.
برای صاحب اثر، یک پنل مدیریت اختصاصی ساخته شد که در آن میتوان بخشها را با کشیدن و رها کردن مرتب کرد و تصاویر را مستقیم بارگذاری نمود؛ در کنار آن، استودیوی کامل محتوا نیز درون همان سایت جاسازی شده است. ورود به بخش مدیریت با حساب Google و فقط برای نشانیهای مجاز ممکن است.
فرم تماس در سمت سرور اعتبارسنجی میشود، تلهٔ ربات دارد و پیامها را با یک سرویس ایمیل تحویل میدهد. نقشهٔ سایت و فایل راهنمای خزندهها بهصورت پویا تولید و سرآیندهای امنیتی سختگیرانهای روی پاسخها اعمال میشوند.
مقیاس پروژه
- حدود ۳۶ مسیر صفحه
- ۱۴ ساختار محتوایی تعریفشده در سامانهٔ مدیریت محتوا
- پنل مدیریت اختصاصی بههمراه استودیوی محتوای جاسازیشده
معماری فنی
سایت با Next.js 16 و React 19 و TypeScript ساخته شده و محتوای آن از Sanity بهعنوان سامانهٔ مدیریت محتوای سرویسی تأمین میشود. احراز هویت با Auth.js و ورود Google همراه با فهرست مجاز انجام میگیرد، مرتبسازی کشیدنی با dnd-kit پیاده شده و ایمیلها با Resend ارسال میشوند.
آنچه این پروژه دارد.
- قهرمان ویدئویی با باز شدن همراستا با اسکرول
- حرکت نرم صفحه و گالری چیدمان آجری
- بخشهای آثار، کلاس، کارگاه و نمایشگاه از محتوای مدیریتشده
- پنل مدیریت اختصاصی با مرتبسازی کشیدنی و بارگذاری تصویر
- استودیوی محتوای جاسازیشده درون خود سایت
- ورود مدیریت با حساب Google و فهرست نشانیهای مجاز
- فرم تماس با اعتبارسنجی سمت سرور و تلهٔ ربات
- نقشهٔ سایت پویا و سرآیندهای امنیتی سختگیرانه