شرح پروژه: پلتفرم اینفلوئنسری مارکتینگ فیواستار

2024توسعه‌دهنده فرانت‌اند
PWAJavaScriptjQueryAjaxBootstrap 5Django Template

فیواستار یک PWA با رویکرد Mobile-First بود که تبلیغ‌دهندگان را برای اجرای کمپین‌های تبلیغاتی ساختاریافته و چندمرحله‌ای به اینفلوئنسرهای شبکه‌های اجتماعی متصل می‌کرد. تبلیغ‌دهندگان هدف‌گذاری و شرایط کمپین را مشخص می‌کردند و اینفلوئنسرها پیشنهادها را بررسی، درآمد احتمالی را تخمین و گزارش انجام کار را ارسال می‌کردند.

این محصول تحت یک شرکت بازاریابی و با رویکردی شبیه یک محصول استارتاپی ساخته شد، به مرحله استفاده در محیط عملیاتی رسید، اما بعدها به دلیل گسترش دامنه پروژه، طولانی شدن زمان توسعه و محدودیت بودجه متوقف شد.

داشبورد فیواستار

نمای کلی پلتفرم

سه داشبورد در یک سیستم مبتنی بر جنگو:

تبلیغ‌دهنده: یک فرآیند ۱۱ مرحله‌ای ایجاد کمپین با هدف‌گذاری بر اساس پلتفرم، نوع محتوا، مخاطب و موقعیت مکانی از طریق نقشه SVG، قوانین فیلتر صفحات، صفحات پیشنهادی اینفلوئنسرها همراه با اطلاعات قیمت‌گذاری، ذخیره پیش‌نویس، پیگیری وضعیت کمپین و گزارش‌ها.

نمای کمپین فیواستار

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

پاپ آپ های فیواستار

اپراتور: یک پنل سبک با جداول و گزارش‌های مبتنی بر DataTables و مدیریت تنظیمات سیستم.

داشبورد اپراتور فیواستار

چندزبانه، دارک مود و رابط کاربری

رابط کاربری انگلیسی/فارسی با پشتیبانی کامل از تغییر چیدمان راست چین/چپ چین و همچنین حالت تاریک/روشن (که بعدها حذف شد). این موارد از نظر فنی پیچیده نبودند، اما حجم تست و هماهنگی موردنیاز را در تمام قابلیت‌ها افزایش می‌دادند. همچنین برای هماهنگی با ذی‌نفعان، چند ماکاپ رابط کاربری در Figma ایجاد کردم.

نقش من

مسئولیت کامل فرانت‌اند را بر عهده داشتم و به‌صورت تمام‌وقت در کنار یک مدیر، توسعه‌دهنده بک‌اند، تسترها و ذی‌نفعان کار می‌کردم. منطق رابط کاربری، یکپارچه‌سازی Ajax، مدیریت State، پشتیبانی چندزبانه و معماری بر پایه یک قالب موجود که به بازطراحی گسترده نیاز داشت، مدیریت می‌کردم.

معماری و پیاده‌سازی

فرانت‌اند با jQuery، Bootstrap 5 و Ajax و بر پایه Django Template ساخته شده بود، اما با استفاده از درخواست‌های ajax و به‌روزرسانی پویای DOM، رفتاری شبیه SPA داشت. کد JavaScript به فایل‌های پایه مشترک، فایل‌های اختصاصی هر داشبورد و اسکریپت‌های هر صفحه تقسیم شده بود. گسترش مداوم قابلیت‌ها باعث شد برخی کامپوننت‌ها، مانند کارت‌های کمپین، به چند نسخه مختلف تبدیل شوند و در هم پیچیدگی افزایش پیدا کند؛ هر زمان فرصت وجود داشت، ریفکتور های جزئی انجام میشدند.

چالش اصلی

ارائه یک محصول در حال رشد سریع، در شرایطی که نیازمندی‌ها دائماً تغییر می‌کردند و ظرفیت توسعه محدود بود: نگهداری عمده سه داشبورد به‌صورت مستقل، بهبود ویزارد ۱۱ مرحله‌ای، مدیریت کامپوننت‌های مشترک تحت فشار و رفع مشکلات انیمیشن در Safari و Samsung Internet. در بسیاری از موارد، ارائه قابلیت‌های پایدار نسبت به ریفکتور عمیق‌تر اولویت داشت.

دستاوردها

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

LinkedIn
Telegram