[{"data":1,"prerenderedAt":415},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Fvlancer":26,"challenges-\u002Fprojects\u002Fvlancer":114},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","\u002Fblog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"body":29,"company":30,"date":31,"description":32,"endDate":33,"extension":34,"image":35,"images":36,"links":57,"meta":63,"navigation":64,"order":65,"path":66,"seo":67,"startDate":31,"stem":68,"tags":69,"technologies":77,"url":112,"__hash__":113},"projects\u002Fprojects\u002Fvlancer.yml","ویانا فریلنسر — پلتفرم کاریابی و پروژه‌های فریلنسری",null,"ویاناسیستم","2025-05-01","توسعه و پیاده‌سازی یک پلتفرم فریلنسری برای انتشار و دریافت پروژه، شامل پنل کاربری، پنل کارفرما، پنل فریلنسر و پنل مدیریت، با تمرکز بر ارتباطات Real-Time، سیستم نوتیفیکیشن، SEO فنی و بهینه‌سازی عملکرد.","2025-07-01","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Ffreelancer%20home%20page.png",[37,39,41,43,45,47,49,51,53,55],{"src":35,"alt":38},"ویانا فریلنسر",{"src":40,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Ffreelancer%20search%20results%20%281%29.png",{"src":42,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Fclient%20dashboard.png",{"src":44,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Ffreelancer%20profile.png",{"src":46,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Ffreelancer%20profile-desk.png",{"src":48,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Fdesk-conflict.png",{"src":50,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Fdesk-%20payment.png",{"src":52,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Ffreelancer%20profile-portfolio.png",{"src":54,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Ffreelancer%20profile-finances.png",{"src":56,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fvlancer\u002Fdesk-files.png",[58],{"label":59,"to":60,"target":61,"icon":62},"مشاهده پروژه","","_blank","i-lucide-external-link",{},true,"7","\u002Fprojects\u002Fvlancer",{"title":28,"description":32},"projects\u002Fvlancer",[70,71,72,73,74,75,76],"Freelancing","Real-Time","Notifications push","SEO","Performance","Nuxt.js","Tailwind",[78,88,95,103],{"category":79,"items":80},"frontend",[81,82,83,84,85,86,87],"Nuxt.js 4","Vue.js 3","Pinia","Tailwind CSS","DaisyUI","VueUse","Vue Router",{"category":89,"items":90},"realtime",[91,92,93,94],"Pusher","Laravel Echo","Real-Time Events","Push Notifications",{"category":96,"items":97},"seo & performance",[98,99,100,101,102],"Nuxt SEO","Nuxt HTML Validator","Nuxt Delay Hydration","Lighthouse","Bundle Analysis",{"category":104,"items":105},"ui & utilities",[106,107,108,109,110,111],"Swiper","Vue Toastification","Vue3 Persian DateTime Picker","AOS","Lodash","Sass","https:\u002F\u002Fwww.figma.com\u002Fproto\u002FswWlrSzaQWzZFRJLNeI90t\u002FViana-System--website--stories--posts-?node-id=15201-34686&t=TMeyeGvKEwzvCzOF-1","gvEn5FUoCasEZtqwFO_jDctf28GA_WOj6dHUo9FI3gw",{"id":115,"title":116,"body":117,"description":60,"extension":409,"meta":410,"navigation":64,"path":411,"seo":412,"stem":413,"__hash__":414},"projectChallenges\u002Fprojects\u002Fvlancer-challenges.md","چالش اصلی",{"type":118,"value":119,"toc":393},"minimark",[120,124,135,140,143,146,151,154,159,162,166,169,173,176,180,183,186,190,196,205,208,227,230,234,240,243,246,253,256,260,266,273,276,308,311,329,333,338,341,348,352,359,365,375,378,381,387],[121,122,116],"h1",{"id":123},"چالش-اصلی",[125,126,127],"warning",{},[128,129,130,134],"p",{},[131,132,133],"strong",{},"وضعیت پروژه:"," وبسایت این پروژه دیگر در دسترس نیست و شما به پروتوتایپ آن متصل می شوید.",[128,136,137,139],{},[131,138,38],{}," یک پلتفرم فریلنسری و کاریابی پروژه‌محور بود که با هدف ایجاد بستری برای انتشار پروژه‌ها، پیدا کردن فرصت‌های کاری و ارتباط میان کارفرما و فریلنسر توسعه داده شد.",[128,141,142],{},"ساختار پروژه از چند نوع کاربر و پنل مختلف تشکیل شده بود و به همین دلیل مدیریت Roleها، دسترسی‌ها و جریان‌های کاری مختلف یکی از بخش‌های مهم پروژه محسوب می‌شد.",[128,144,145],{},"در این پروژه علاوه بر توسعه بخش‌های مختلف Frontend، روی Performance، SEO و قابلیت‌های Real-Time نیز به‌صورت عملی کار کردم.",[147,148,150],"h2",{"id":149},"پنلهای-مختلف","پنل‌های مختلف",[128,152,153],{},"یکی از بخش‌های اصلی پروژه، طراحی و پیاده‌سازی پنل‌های مختلف برای نقش‌های متفاوت سیستم بود.",[155,156,158],"h3",{"id":157},"پنل-کاربری","پنل کاربری",[128,160,161],{},"کاربران می‌توانستند از طریق پنل شخصی خود اطلاعات حساب، فعالیت‌ها و تعاملات مرتبط با پروژه‌ها را مدیریت کنند.",[155,163,165],{"id":164},"پنل-کارفرما","پنل کارفرما",[128,167,168],{},"برای کارفرمایان پنل اختصاصی طراحی شد تا بتوانند فرآیند انتشار و مدیریت پروژه‌ها و تعامل با افرادی که روی پروژه‌ها فعالیت می‌کنند را مدیریت کنند.",[155,170,172],{"id":171},"پنل-فریلنسر","پنل فریلنسر",[128,174,175],{},"فریلنسرها نیز محیط اختصاصی خود را داشتند تا بتوانند پروژه‌های موجود را مشاهده کرده و فرآیندهای مربوط به فعالیت حرفه‌ای خود را مدیریت کنند.",[155,177,179],{"id":178},"پنل-مدیریت","پنل مدیریت",[128,181,182],{},"در کنار پنل‌های مربوط به کاربران، کارفرما و فریلنسر، یک پنل مدیریت برای کنترل بخش‌های مختلف پلتفرم نیز در نظر گرفته شد.",[128,184,185],{},"این ساختار باعث شد پروژه با چند سطح دسترسی و جریان کاری متفاوت سروکار داشته باشد.",[147,187,189],{"id":188},"سیستم-real-time","سیستم Real-Time",[128,191,192,193,195],{},"یکی از تجربیات مهم من در این پروژه، کار با ارتباطات ",[131,194,71],{}," بود.",[128,197,198,199,201,202,204],{},"برای این بخش از ",[131,200,91],{}," و ",[131,203,92],{}," استفاده شد تا رویدادهای مختلف بتوانند بدون نیاز به Refresh صفحه به Client منتقل شوند.",[128,206,207],{},"در این فرآیند با مفاهیمی مانند:",[209,210,211,215,218,221,224],"ul",{},[212,213,214],"li",{},"اتصال Client به کانال‌های Real-Time",[212,216,217],{},"دریافت Eventها",[212,219,220],{},"مدیریت وضعیت اتصال",[212,222,223],{},"انتشار و دریافت داده‌های لحظه‌ای",[212,225,226],{},"هماهنگ کردن Eventهای Backend با رابط کاربری",[128,228,229],{},"آشنا شدم و این ساختار را در پروژه پیاده‌سازی کردم.",[147,231,233],{"id":232},"سیستم-notification","سیستم Notification",[128,235,236,237,195],{},"یکی دیگر از بخش‌های مهم پروژه، مدیریت سیستم ",[131,238,239],{},"Notification",[128,241,242],{},"در یک پلتفرم فریلنسری، کاربران باید بتوانند از اتفاقات مهم مرتبط با پروژه‌ها و فعالیت‌های خود به‌صورت سریع مطلع شوند.",[128,244,245],{},"به همین دلیل سیستم اعلان‌ها به‌گونه‌ای طراحی شد که رویدادهای مختلف بتوانند به شکل Real-Time به کاربر منتقل شوند.",[128,247,248,249,252],{},"همچنین با مفهوم ",[131,250,251],{},"Push Notification"," و نحوه مدیریت اعلان‌ها در سمت Client آشنا شدم.",[128,254,255],{},"این تجربه شامل مدیریت وضعیت اعلان‌ها، نمایش Notification در رابط کاربری و هماهنگ کردن آن‌ها با Eventهای Real-Time بود.",[147,257,259],{"id":258},"seo-و-بهینهسازی-فنی","SEO و بهینه‌سازی فنی",[128,261,262,263,195],{},"یکی از بخش‌های مهم این پروژه، تمرکز جدی روی ",[131,264,265],{},"Technical SEO و Performance",[128,267,268,269,272],{},"در این پروژه با ابزارها و مفاهیمی مانند ",[131,270,271],{},"Lighthouse و PageSpeed Insights"," کار کردم و تلاش شد مشکلاتی که روی امتیازهای Performance، SEO، Accessibility و سایر شاخص‌های فنی تأثیر می‌گذارند شناسایی و برطرف شوند.",[128,274,275],{},"برای این منظور موارد مختلفی مانند:",[209,277,278,281,284,287,290,293,296,299,302,305],{},[212,279,280],{},"بهینه‌سازی بارگذاری صفحات",[212,282,283],{},"مدیریت تصاویر",[212,285,286],{},"کاهش منابع غیرضروری",[212,288,289],{},"بهینه‌سازی JavaScript",[212,291,292],{},"مدیریت Hydration",[212,294,295],{},"بررسی حجم Bundle",[212,297,298],{},"بهینه‌سازی Metadata",[212,300,301],{},"ساختار صحیح صفحات",[212,303,304],{},"اعتبارسنجی HTML",[212,306,307],{},"بهینه‌سازی تجربه کاربری",[128,309,310],{},"مورد بررسی قرار گرفتند.",[128,312,313,314,318,319,318,322,201,325,328],{},"از ابزارهایی مانند ",[315,316,317],"code",{},"@nuxtjs\u002Fseo","، ",[315,320,321],{},"@nuxt\u002Fimage",[315,323,324],{},"@nuxtjs\u002Fhtml-validator",[315,326,327],{},"nuxt-delay-hydration"," نیز برای پیاده‌سازی و بهبود این بخش‌ها استفاده شد.",[147,330,332],{"id":331},"lighthouse-و-pagespeed","Lighthouse و PageSpeed",[128,334,335,336,195],{},"یکی از اهداف پروژه، رسیدن به عملکرد مناسب در تست‌های ",[131,337,332],{},[128,339,340],{},"در این مسیر یاد گرفتم که Performance تنها به سرعت اجرای کد محدود نمی‌شود و عواملی مانند نحوه بارگذاری منابع، تصاویر، JavaScript، Hydration، ساختار HTML و تجربه کاربر نیز در نتیجه نهایی تأثیرگذار هستند.",[128,342,343,344,347],{},"همچنین شاخص‌هایی مانند ",[131,345,346],{},"Performance، SEO و Accessibility"," در فرآیند توسعه مورد بررسی قرار گرفتند تا مشکلات احتمالی شناسایی و برطرف شوند.",[147,349,351],{"id":350},"رابط-کاربری","رابط کاربری",[128,353,354,355,358],{},"رابط کاربری پروژه با استفاده از ",[131,356,357],{},"Nuxt، Vue و Tailwind CSS"," توسعه داده شد.",[128,360,361,362,364],{},"برای مدیریت State از ",[131,363,83],{}," و برای برخی تعاملات و قابلیت‌های رابط کاربری از ابزارهایی مانند VueUse، Swiper، Vue Draggable و Vue Toastification استفاده شد.",[128,366,367,368,201,371,374],{},"همچنین به دلیل نیاز پروژه به نمایش تاریخ و اطلاعات فارسی، ابزارهایی مانند ",[315,369,370],{},"vue3-persian-datetime-picker",[315,372,373],{},"jalali-moment"," نیز مورد استفاده قرار گرفتند.",[147,376,377],{"id":377},"نتیجه",[128,379,380],{},"ویانا فریلنسر تجربه‌ای بود که در آن علاوه بر توسعه یک پلتفرم چندنقشی، با بخش‌های مهمی از توسعه یک محصول واقعی وب آشنا شدم.",[128,382,383,384,195],{},"مهم‌ترین تجربیات این پروژه شامل ",[131,385,386],{},"طراحی و پیاده‌سازی پنل‌های مختلف، مدیریت Roleها، سیستم Notification، Push Notification، ارتباطات Real-Time با Pusher و Laravel Echo و بهینه‌سازی فنی SEO و Performance",[128,388,389,390,392],{},"همچنین کار با ",[131,391,332],{}," باعث شد درک عملی‌تری از بهینه‌سازی Performance، SEO و Accessibility پیدا کنم و یاد بگیرم چگونه مشکلات فنی یک پروژه را با استفاده از ابزارهای ارزیابی و تحلیل عملکرد شناسایی و برطرف کنم.",{"title":60,"searchDepth":394,"depth":394,"links":395},2,[396,403,404,405,406,407,408],{"id":149,"depth":394,"text":150,"children":397},[398,400,401,402],{"id":157,"depth":399,"text":158},3,{"id":164,"depth":399,"text":165},{"id":171,"depth":399,"text":172},{"id":178,"depth":399,"text":179},{"id":188,"depth":394,"text":189},{"id":232,"depth":394,"text":233},{"id":258,"depth":394,"text":259},{"id":331,"depth":394,"text":332},{"id":350,"depth":394,"text":351},{"id":377,"depth":394,"text":377},"md",{},"\u002Fprojects\u002Fvlancer-challenges",{"title":116,"description":60},"projects\u002Fvlancer-challenges","F3-8GDF7DowkSywjMiccOeEwnDIvWHNQJuWkcP8zdYo",1786900462687]