چالش اصلی

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

ساختار پروژه از چند نوع کاربر و پنل مختلف تشکیل شده بود و به همین دلیل مدیریت Roleها، دسترسی‌ها و جریان‌های کاری مختلف یکی از بخش‌های مهم پروژه محسوب می‌شد.

در این پروژه علاوه بر توسعه بخش‌های مختلف Frontend، روی Performance، SEO و قابلیت‌های Real-Time نیز به‌صورت عملی کار کردم.

پنل‌های مختلف

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

پنل کاربری

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

پنل کارفرما

برای کارفرمایان پنل اختصاصی طراحی شد تا بتوانند فرآیند انتشار و مدیریت پروژه‌ها و تعامل با افرادی که روی پروژه‌ها فعالیت می‌کنند را مدیریت کنند.

پنل فریلنسر

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

پنل مدیریت

در کنار پنل‌های مربوط به کاربران، کارفرما و فریلنسر، یک پنل مدیریت برای کنترل بخش‌های مختلف پلتفرم نیز در نظر گرفته شد.

این ساختار باعث شد پروژه با چند سطح دسترسی و جریان کاری متفاوت سروکار داشته باشد.

سیستم Real-Time

یکی از تجربیات مهم من در این پروژه، کار با ارتباطات Real-Time بود.

برای این بخش از Pusher و Laravel Echo استفاده شد تا رویدادهای مختلف بتوانند بدون نیاز به Refresh صفحه به Client منتقل شوند.

در این فرآیند با مفاهیمی مانند:

• اتصال Client به کانال‌های Real-Time
• دریافت Eventها
• مدیریت وضعیت اتصال
• انتشار و دریافت داده‌های لحظه‌ای
• هماهنگ کردن Eventهای Backend با رابط کاربری

آشنا شدم و این ساختار را در پروژه پیاده‌سازی کردم.

سیستم Notification

یکی دیگر از بخش‌های مهم پروژه، مدیریت سیستم Notification بود.

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

به همین دلیل سیستم اعلان‌ها به‌گونه‌ای طراحی شد که رویدادهای مختلف بتوانند به شکل Real-Time به کاربر منتقل شوند.

همچنین با مفهوم Push Notification و نحوه مدیریت اعلان‌ها در سمت Client آشنا شدم.

این تجربه شامل مدیریت وضعیت اعلان‌ها، نمایش Notification در رابط کاربری و هماهنگ کردن آن‌ها با Eventهای Real-Time بود.

SEO و بهینه‌سازی فنی

یکی از بخش‌های مهم این پروژه، تمرکز جدی روی Technical SEO و Performance بود.

در این پروژه با ابزارها و مفاهیمی مانند Lighthouse و PageSpeed Insights کار کردم و تلاش شد مشکلاتی که روی امتیازهای Performance، SEO، Accessibility و سایر شاخص‌های فنی تأثیر می‌گذارند شناسایی و برطرف شوند.

برای این منظور موارد مختلفی مانند:

• بهینه‌سازی بارگذاری صفحات
• مدیریت تصاویر
• کاهش منابع غیرضروری
• بهینه‌سازی JavaScript
• مدیریت Hydration
• بررسی حجم Bundle
• بهینه‌سازی Metadata
• ساختار صحیح صفحات
• اعتبارسنجی HTML
• بهینه‌سازی تجربه کاربری

مورد بررسی قرار گرفتند.

از ابزارهایی مانند @nuxtjs/seo، @nuxt/image، @nuxtjs/html-validator و nuxt-delay-hydration نیز برای پیاده‌سازی و بهبود این بخش‌ها استفاده شد.

Lighthouse و PageSpeed

یکی از اهداف پروژه، رسیدن به عملکرد مناسب در تست‌های Lighthouse و PageSpeed بود.

در این مسیر یاد گرفتم که Performance تنها به سرعت اجرای کد محدود نمی‌شود و عواملی مانند نحوه بارگذاری منابع، تصاویر، JavaScript، Hydration، ساختار HTML و تجربه کاربر نیز در نتیجه نهایی تأثیرگذار هستند.

همچنین شاخص‌هایی مانند Performance، SEO و Accessibility در فرآیند توسعه مورد بررسی قرار گرفتند تا مشکلات احتمالی شناسایی و برطرف شوند.

رابط کاربری

رابط کاربری پروژه با استفاده از Nuxt، Vue و Tailwind CSS توسعه داده شد.

برای مدیریت State از Pinia و برای برخی تعاملات و قابلیت‌های رابط کاربری از ابزارهایی مانند VueUse، Swiper، Vue Draggable و Vue Toastification استفاده شد.

همچنین به دلیل نیاز پروژه به نمایش تاریخ و اطلاعات فارسی، ابزارهایی مانند vue3-persian-datetime-picker و jalali-moment نیز مورد استفاده قرار گرفتند.

نتیجه

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

مهم‌ترین تجربیات این پروژه شامل طراحی و پیاده‌سازی پنل‌های مختلف، مدیریت Roleها، سیستم Notification، Push Notification، ارتباطات Real-Time با Pusher و Laravel Echo و بهینه‌سازی فنی SEO و Performance بود.

همچنین کار با Lighthouse و PageSpeed باعث شد درک عملی‌تری از بهینه‌سازی Performance، SEO و Accessibility پیدا کنم و یاد بگیرم چگونه مشکلات فنی یک پروژه را با استفاده از ابزارهای ارزیابی و تحلیل عملکرد شناسایی و برطرف کنم.