[{"data":1,"prerenderedAt":254},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Funitech":26,"challenges-\u002Fprojects\u002Funitech":113},[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":59,"meta":65,"navigation":66,"order":67,"path":68,"seo":69,"startDate":70,"stem":71,"tags":72,"technologies":78,"url":62,"__hash__":112},"projects\u002Fprojects\u002Funitech.yml","فروشگاه اینترنتی یونیتک",null,"ویاناسیستم","2024-012-01","توسعه و پیاده‌سازی یک فروشگاه اینترنتی با پشتیبانی از پنل کاربری، پنل مدیریت و پنل فروشندگان، با تمرکز بر معماری Atomic Design، جداسازی رابط کاربری از منطق برنامه و ایجاد ساختاری ماژولار و قابل توسعه.","2025-03-01","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_.png",[37,39,41,43,45,47,48,50,52,54,56,58],{"src":35,"alt":38},"فروشگاه یونیتک",{"src":40,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_%20%282%29.png",{"src":42,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_%20%283%29.png",{"src":44,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_computer%28Samsung%20Galaxy%20S8%2B%29.png",{"src":46,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_p_634816_samsung-galaxy-s26-plus-5g-dual-sim-256gb-12gb%20%281%29.png",{"src":46,"alt":38},{"src":49,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_%28Samsung%20Galaxy%20S8%2B%29.png",{"src":51,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_p_634816_samsung-galaxy-s26-plus-5g-dual-sim-256gb-12gb%28Samsung%20Galaxy%20S8%2B%29.png",{"src":53,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_%20%284%29.png",{"src":55,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_%20%281%29.png",{"src":57,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Funitech\u002Funitech.ir_%28Samsung%20Galaxy%20S8%2B%29%20%281%29.png",{"src":44,"alt":38},[60],{"label":61,"to":62,"target":63,"icon":64},"مشاهده سایت","https:\u002F\u002Funitech.ir","_blank","i-lucide-external-link",{},true,"2","\u002Fprojects\u002Funitech",{"title":28,"description":32},"2024-11-01","projects\u002Funitech",[73,74,75,76,77],"فروشگاه اینترنتی","Atomic Design","panels","Vue.js","Nuxt.js",[79,89,94,103],{"category":80,"items":81},"frontend",[82,83,84,85,86,87,88],"Nuxt.js 4","Vue.js 3","Vue Router","Pinia","Tailwind CSS","DaisyUI","Sass",{"category":90,"items":91},"architecture",[74,92,93],"Component-Based Architecture","Separation of UI and Logic",{"category":95,"items":96},"seo",[97,98,99,100,101,102],"Nuxt SEO","Nuxt Schema.org","Nuxt Sitemap","Nuxt Robots","Nuxt OG Image","HTML Validator",{"category":104,"items":105},"state & utilities",[85,106,107,108,109,110,111],"VueUse","Lodash","Swiper","Vue Toastification","Vue3 Zoomer","AOS","lLhUIErQlIPgGuofskdLS6IjijTmdvMOZ2J-1eZKEB0",{"id":114,"title":115,"body":116,"description":238,"extension":248,"meta":249,"navigation":66,"path":250,"seo":251,"stem":252,"__hash__":253},"projectChallenges\u002Fprojects\u002Funitech-challenges.md","Unitech Challenges",{"type":117,"value":118,"toc":237},"minimark",[119,124,133,139,144,147,150,153,169,173,180,187,190,194,197,217,220,224,231,234],[120,121,123],"h2",{"id":122},"چالش-اصلی","چالش اصلی",[125,126,127,128,132],"p",{},"یونیتک یک فروشگاه اینترنتی بود که در کنار بخش اصلی فروشگاه، چندین فضای کاربری مجزا شامل ",[129,130,131],"strong",{},"پنل کاربری، پنل مدیریت و پنل فروشندگان"," داشت. به همین دلیل، یکی از چالش‌های اصلی پروژه ایجاد معماری‌ای بود که بتواند حجم بالای کامپوننت‌ها و منطق‌های مختلف را بدون ایجاد وابستگی و پیچیدگی غیرضروری مدیریت کند.",[125,134,135,136,138],{},"برای حل این مسئله، ساختار پروژه بر پایه ",[129,137,74],{}," و تفکیک مسئولیت‌ها طراحی شد.",[140,141,143],"h3",{"id":142},"معماری-atomic-design","معماری Atomic Design",[125,145,146],{},"ساختار رابط کاربری از کوچک‌ترین اجزای قابل استفاده مجدد شروع می‌شد و به‌صورت مرحله‌ای به کامپوننت‌های پیچیده‌تر می‌رسید.",[125,148,149],{},"در لایه‌های ابتدایی، کامپوننت‌های پایه و اتمیک مانند ورودی‌ها، دکمه‌ها، لیبل‌ها و سایر عناصر ساده رابط کاربری قرار می‌گرفتند. سپس با ترکیب این اجزا، کامپوننت‌های پیچیده‌تر و در نهایت بخش‌های کامل رابط کاربری ساخته می‌شدند.",[125,151,152],{},"این رویکرد باعث شد:",[154,155,156,160,163,166],"ul",{},[157,158,159],"li",{},"کامپوننت‌های پایه در بخش‌های مختلف پروژه قابل استفاده مجدد باشند.",[157,161,162],{},"تغییرات ظاهری در یک نقطه، تا حد امکان بدون تأثیرگذاری مستقیم بر منطق سایر بخش‌ها انجام شوند.",[157,164,165],{},"ساخت صفحات و پنل‌های مختلف با ترکیب کامپوننت‌های موجود ساده‌تر شود.",[157,167,168],{},"توسعه و نگهداری رابط کاربری در یک پروژه بزرگ و چندپنلی قابل کنترل‌تر باشد.",[140,170,172],{"id":171},"جداسازی-ui-از-logic","جداسازی UI از Logic",[125,174,175,176,179],{},"یکی دیگر از اصول اصلی پروژه، جدا کردن ",[129,177,178],{},"رابط کاربری از منطق برنامه"," بود.",[125,181,182,183,186],{},"کامپوننت‌های UI تا حد امکان مسئول نمایش و تعاملات مربوط به رابط کاربری بودند و منطق مربوط به دریافت داده، مدیریت وضعیت، درخواست‌های سرویس و رفتارهای قابل استفاده مجدد در بخش‌های جداگانه، به‌خصوص ",[129,184,185],{},"Composableها","، قرار می‌گرفت.",[125,188,189],{},"به این ترتیب، کامپوننت‌ها وابستگی کمتری به منطق اختصاصی یک صفحه پیدا می‌کردند و منطق مشترک می‌توانست در بخش‌های مختلف پروژه مورد استفاده مجدد قرار بگیرد.",[140,191,193],{"id":192},"مدیریت-پنلهای-مختلف","مدیریت پنل‌های مختلف",[125,195,196],{},"با توجه به وجود سه فضای اصلی شامل:",[154,198,199,205,211],{},[157,200,201,204],{},[129,202,203],{},"پنل کاربری:"," مدیریت اطلاعات و فعالیت‌های مربوط به مشتری",[157,206,207,210],{},[129,208,209],{},"پنل مدیریت:"," مدیریت بخش‌های مختلف فروشگاه و کنترل داده‌ها",[157,212,213,216],{},[129,214,215],{},"پنل فروشندگان:"," مدیریت فعالیت‌ها و اطلاعات مربوط به فروشندگان",[125,218,219],{},"ساختار پروژه به‌گونه‌ای سازمان‌دهی شد که هر بخش بتواند منطق و رابط کاربری اختصاصی خود را داشته باشد، در حالی که اجزای مشترک از طریق ساختار کامپوننتی پروژه قابل استفاده مجدد باشند.",[140,221,223],{"id":222},"رویکرد-فنی","رویکرد فنی",[125,225,226,227,230],{},"پروژه با ",[129,228,229],{},"Nuxt 4 و Vue 3"," توسعه داده شد و برای مدیریت وضعیت از Pinia و برای ایجاد رابط کاربری از ترکیب Tailwind CSS و DaisyUI استفاده شد.",[125,232,233],{},"در کنار معماری کامپوننتی، مجموعه‌ای از ابزارهای اکوسیستم Nuxt برای بهبود کیفیت، عملکرد و سئوی پروژه مورد استفاده قرار گرفت؛ از جمله Nuxt Image، Nuxt SEO، Schema.org، Sitemap، Robots و OG Image.",[125,235,236],{},"در نهایت، هدف اصلی معماری این بود که پروژه بتواند با وجود چندین پنل و حجم قابل توجهی از قابلیت‌ها، ساختاری منظم، قابل نگهداری و قابل توسعه داشته باشد.",{"title":238,"searchDepth":239,"depth":239,"links":240},"",2,[241],{"id":122,"depth":239,"text":123,"children":242},[243,245,246,247],{"id":142,"depth":244,"text":143},3,{"id":171,"depth":244,"text":172},{"id":192,"depth":244,"text":193},{"id":222,"depth":244,"text":223},"md",{},"\u002Fprojects\u002Funitech-challenges",{"description":238},"projects\u002Funitech-challenges","FpApB1AyLdpX-KVHG_IWyz2vzzXJSmmca4ufzEWd_u8",1786900461727]