[{"data":1,"prerenderedAt":331},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Ftask":26,"challenges-\u002Fprojects\u002Ftask":99},[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":51,"meta":57,"navigation":58,"order":29,"path":59,"seo":60,"startDate":31,"stem":61,"tags":62,"technologies":70,"url":97,"__hash__":98},"projects\u002Fprojects\u002Ftask.yml","مدیریت وظایف و پروژه‌ها",null,"ویاناسیستم","2024-12-22","طراحی و پیاده‌سازی یک سیستم مدیریت وظایف و پروژه‌ها با قابلیت‌هایی مشابه Trello، شامل نمایش‌های کانبان، کارتی و تایم‌لاین، با تمرکز بر مدیریت وظایف، تجربه کاربری و معماری قابل توسعه.","2025-03-20","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Ftask\u002FKanban.png",[37,39,41,43,45,47,49],{"src":35,"alt":38},"مدیریت پروژه و وظایف",{"src":40,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Ftask\u002Foverview.png",{"src":42,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Ftask\u002FGantt.png",{"src":44,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Ftask\u002Fcard.png",{"src":46,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Ftask\u002Fworkspace-%20teams.png",{"src":48,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Ftask\u002Fresponsive%20card.png",{"src":50,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Ftask\u002Flog%20in%207.png",[52],{"label":53,"to":54,"target":55,"icon":56},"مشاهده پروژه","","_blank","i-lucide-external-link",{},true,"\u002Fprojects\u002Ftask",{"title":28,"description":32},"projects\u002Ftask",[63,64,65,66,67,68,69],"Task Manager","Project Management","Kanban","Timeline","UI\u002FUX","Tailwind CSS","Nuxt.js",[71,79,85,91],{"category":72,"items":73},"frontend",[74,75,76,77,78],"Nuxt.js 3","Vue.js 3","Pinia","Vue Router","VueUse",{"category":80,"items":81},"styling",[68,82,83,84],"Sass","DaisyUI","Tailwind Merge",{"category":86,"items":87},"ui & interaction",[88,89,90],"Swiper","Vue Toastification","Vue Draggable",{"category":92,"items":93},"utilities",[94,95,96],"Axios","Lodash","Jalali Moment","https:\u002F\u002Fwww.figma.com\u002Fproto\u002FswWlrSzaQWzZFRJLNeI90t\u002FViana-System--website--stories--posts-?node-id=15740-140690&t=TMeyeGvKEwzvCzOF-1","YJ2tKNpqu0Rs8FYOqfUJe3OpcPce67fu71SMJA2PQBY",{"id":100,"title":101,"body":102,"description":54,"extension":325,"meta":326,"navigation":58,"path":327,"seo":328,"stem":329,"__hash__":330},"projectChallenges\u002Fprojects\u002Ftask-challenges.md","چالش اصلی",{"type":103,"value":104,"toc":310},"minimark",[105,109,120,126,129,134,137,140,143,147,154,157,162,165,168,172,175,178,182,187,190,193,197,200,203,210,214,217,220,223,251,254,258,261,264,267,271,277,280,288,291,294,300,303],[106,107,101],"h1",{"id":108},"چالش-اصلی",[110,111,112],"warning",{},[113,114,115,119],"p",{},[116,117,118],"strong",{},"وضعیت پروژه:"," وبسایت این پروژه دیگر در دسترس نیست و شما به پروتوتایپ آن متصل می شوید.",[113,121,122,125],{},[116,123,124],{},"پروژه مدیریت وظایف ویاناسیستم"," یک سیستم مدیریت پروژه و Task Management بود که با هدف مدیریت بهتر وظایف، پروژه‌ها و فعالیت‌های تیمی توسعه داده شد.",[113,127,128],{},"ساختار کلی این پروژه از ابزارهایی مانند Trello الهام گرفته بود و تمرکز آن روی ایجاد یک محیط منعطف برای مدیریت وظایف و مشاهده وضعیت پروژه‌ها از طریق نماهای مختلف بود.",[130,131,133],"h2",{"id":132},"مدیریت-وظایف","مدیریت وظایف",[113,135,136],{},"یکی از بخش‌های اصلی پروژه، پیاده‌سازی سیستم مدیریت Taskها بود.",[113,138,139],{},"کاربر می‌توانست وظایف مختلف را ایجاد و مدیریت کند و وضعیت آن‌ها را در ساختار پروژه مشاهده کند.",[113,141,142],{},"اطلاعات مربوط به هر Task به شکلی نمایش داده می‌شد که کاربر بتواند وضعیت کلی فعالیت‌ها و پیشرفت پروژه را به‌سادگی دنبال کند.",[130,144,146],{"id":145},"نماهای-مختلف","نماهای مختلف",[113,148,149,150,153],{},"یکی از چالش‌های اصلی پروژه، ارائه یک داده یکسان در قالب ",[116,151,152],{},"Viewهای مختلف"," بود.",[113,155,156],{},"برای این منظور چند نوع نمایش برای مدیریت وظایف پیاده‌سازی شد.",[158,159,161],"h3",{"id":160},"نمای-kanban","نمای Kanban",[113,163,164],{},"در نمای Kanban، وظایف بر اساس وضعیت خود در ستون‌های مختلف قرار می‌گرفتند.",[113,166,167],{},"این ساختار امکان مشاهده سریع وضعیت وظایف و جابه‌جایی آن‌ها میان مراحل مختلف را فراهم می‌کرد.",[158,169,171],{"id":170},"نمای-card","نمای Card",[113,173,174],{},"در نمای Card، اطلاعات وظایف به صورت کارت‌های مستقل نمایش داده می‌شد.",[113,176,177],{},"این مدل نمایش برای مشاهده جزئیات Taskها و مدیریت آن‌ها در قالبی ساده و بصری طراحی شده بود.",[158,179,181],{"id":180},"نمای-timeline","نمای Timeline",[113,183,184,185,153],{},"یکی دیگر از نماهای پروژه، ",[116,186,66],{},[113,188,189],{},"در این نما وظایف و فعالیت‌ها بر اساس زمان نمایش داده می‌شدند و کاربر می‌توانست ارتباط میان فعالیت‌ها و بازه زمانی انجام آن‌ها را مشاهده کند.",[113,191,192],{},"پیاده‌سازی این View نیازمند مدیریت صحیح اطلاعات زمانی و تبدیل داده‌های Task به یک ساختار قابل نمایش روی Timeline بود.",[130,194,196],{"id":195},"مدیریت-جابهجایی-وظایف","مدیریت جابه‌جایی وظایف",[113,198,199],{},"یکی از قابلیت‌های مهم پروژه، امکان جابه‌جایی و مدیریت بصری Taskها بود.",[113,201,202],{},"این قابلیت باعث می‌شد کاربر بتواند بدون انجام عملیات پیچیده، وضعیت و ترتیب وظایف را از طریق رابط کاربری مدیریت کند.",[113,204,205,206,209],{},"در این بخش با مفهوم ",[116,207,208],{},"Drag & Drop و مدیریت State پس از جابه‌جایی عناصر"," نیز کار شد.",[130,211,213],{"id":212},"طراحی-ui-و-ux","طراحی UI و UX",[113,215,216],{},"با توجه به ماهیت پروژه، رابط کاربری نقش مهمی در تجربه استفاده از سیستم داشت.",[113,218,219],{},"هدف این بود که کاربر بتواند تعداد زیادی Task و اطلاعات پروژه را بدون پیچیدگی بصری مدیریت کند.",[113,221,222],{},"برای همین مواردی مانند:",[224,225,226,230,233,236,239,242,245,248],"ul",{},[227,228,229],"li",{},"Hierarchy اطلاعات",[227,231,232],{},"نمایش وضعیت Taskها",[227,234,235],{},"دسته‌بندی وظایف",[227,237,238],{},"فاصله‌گذاری و Layout",[227,240,241],{},"تعاملات Drag & Drop",[227,243,244],{},"تغییر View",[227,246,247],{},"نمایش اطلاعات زمانی",[227,249,250],{},"Responsive بودن صفحات",[113,252,253],{},"در طراحی و توسعه مورد توجه قرار گرفتند.",[130,255,257],{"id":256},"معماری-قابل-توسعه","معماری قابل توسعه",[113,259,260],{},"از آنجا که یک Task می‌توانست در Viewهای مختلف نمایش داده شود، ساختار پروژه به شکلی طراحی شد که داده‌های اصلی از نحوه نمایش آن‌ها تا حد امکان مستقل باشند.",[113,262,263],{},"به این ترتیب یک Task می‌توانست بدون ایجاد داده‌های تکراری در نماهای مختلف مانند Kanban، Card و Timeline نمایش داده شود.",[113,265,266],{},"این رویکرد باعث شد اضافه کردن Viewهای جدید یا تغییر نحوه نمایش اطلاعات در آینده ساده‌تر باشد.",[130,268,270],{"id":269},"استفاده-از-tailwind-css","استفاده از Tailwind CSS",[113,272,273,274,276],{},"در این پروژه برخلاف برخی پروژه‌های قبلی، برای طراحی رابط کاربری از ",[116,275,68],{}," استفاده شد.",[113,278,279],{},"استفاده از Utility Classها امکان پیاده‌سازی سریع Layoutها و کنترل دقیق جزئیات ظاهری را فراهم کرد.",[113,281,282,283,287],{},"همچنین از ابزارهایی مانند ",[284,285,286],"code",{},"tailwind-merge"," برای مدیریت و ترکیب کلاس‌های Tailwind استفاده شد.",[130,289,290],{"id":290},"نتیجه",[113,292,293],{},"پروژه Task Manager ویاناسیستم تجربه‌ای عملی در زمینه طراحی و توسعه یک ابزار مدیریت پروژه و وظایف بود.",[113,295,296,297,153],{},"مهم‌ترین بخش‌های این پروژه شامل پیاده‌سازی ",[116,298,299],{},"Kanban، Card View، Timeline، Drag & Drop و مدیریت State وظایف",[113,301,302],{},"همچنین این پروژه تجربه خوبی در زمینه طراحی رابط‌هایی بود که باید حجم زیادی از اطلاعات را به شکل ساده و قابل فهم نمایش دهند.",[113,304,305,306,309],{},"در این پروژه با استفاده از ",[116,307,308],{},"Nuxt.js، Vue.js، Pinia و Tailwind CSS"," ساختاری برای مدیریت وظایف ایجاد شد که قابلیت توسعه و اضافه شدن Viewهای جدید را نیز داشته باشد.",{"title":54,"searchDepth":311,"depth":311,"links":312},2,[313,314,320,321,322,323,324],{"id":132,"depth":311,"text":133},{"id":145,"depth":311,"text":146,"children":315},[316,318,319],{"id":160,"depth":317,"text":161},3,{"id":170,"depth":317,"text":171},{"id":180,"depth":317,"text":181},{"id":195,"depth":311,"text":196},{"id":212,"depth":311,"text":213},{"id":256,"depth":311,"text":257},{"id":269,"depth":311,"text":270},{"id":290,"depth":311,"text":290},"md",{},"\u002Fprojects\u002Ftask-challenges",{"title":101,"description":54},"projects\u002Ftask-challenges","8fFQzENKNkpWrhthvaRRWRbpXeiTQ5-to8-DDLcYbzk",1786900462784]