[{"data":1,"prerenderedAt":290},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Fanbarchin":26,"challenges-\u002Fprojects\u002Fanbarchin":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":56,"meta":62,"navigation":63,"order":64,"path":65,"seo":66,"startDate":31,"stem":67,"tags":68,"technologies":74,"url":111,"__hash__":112},"projects\u002Fprojects\u002Fanbarchin.yml","انبارچین — پلتفرم اجاره انبار و پارکینگ",null,"ویاناسیستم","2025-09-23","توسعه و پیاده‌سازی پلتفرم اجاره انباری و پارکینگ که کاربران می‌توانند فضای موردنظر خود را برای اجاره ثبت کنند و مشتریان نیز بر اساس موقعیت مکانی، فضای مناسب را پیدا و اجاره کنند؛ با تمرکز بر ارتباطات لحظه‌ای، نقشه‌های تعاملی، داده‌های وکتوری، لایه‌ها و کلاسترهای نقشه و رابط کاربری مبتنی بر Vuetify.\n","2025-11-21","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002Fhero.jpg",[37,39,41,43,45,46,48,50,52,54],{"src":35,"alt":38},"پروژه انبارچین",{"src":40,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002FFrame%20932.png",{"src":42,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002FFrame%20941.png",{"src":44,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002FStorages%20list.jpg",{"src":44,"alt":38},{"src":47,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002Fhost-chat.jpg",{"src":49,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002Fhost-my%20ads%20%281%29.png",{"src":51,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002Fhost-my%20ads.png",{"src":53,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002Fhost-personal%20info.jpg",{"src":55,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fanbarchin\u002Fhost-personal%20info.png",[57],{"label":58,"to":59,"target":60,"icon":61},"مشاهده پروژه","","_blank","i-lucide-external-link",{},true,"6","\u002Fprojects\u002Fanbarchin",{"title":28,"description":32},"projects\u002Fanbarchin",[69,70,71,72,73],"WebSocket","Maps","Vuetify","Nuxt.js","Chat",[75,85,91,98,105],{"category":76,"items":77},"frontend",[78,79,80,81,82,83,84,69],"Nuxt.js 3","Vue.js 3","Vuetify 3","Pinia","VueUse","Vue Router","Axios",{"category":86,"items":87},"maps",[88,89,90],"OpenLayers","Clustering","Neshan",{"category":92,"items":93},"ui & content",[71,94,95,96,97],"TinyMCE","FilePond","Swiper","Vue Draggable",{"category":99,"items":100},"utilities",[101,102,103,104],"Lodash","Jalali Moment","AOS","Nuxt i18n",{"category":106,"items":107},"seo & pwa",[108,109,110],"Nuxt SEO","Vite PWA","Nuxt Delay Hydration","https:\u002F\u002Fwww.figma.com\u002Fproto\u002FzBjS5LV9fNWEHEUg9vAPRf\u002Fanbarchin?node-id=180-3451&t=QcK8dU9L0pblUFIq-1","6i5ezb1jUlvV-_QhEVI_SBcZ4WGr0rHnRM4tkoBAscc",{"id":114,"title":115,"body":116,"description":59,"extension":284,"meta":285,"navigation":63,"path":286,"seo":287,"stem":288,"__hash__":289},"projectChallenges\u002Fprojects\u002Fanbarchin-challenges.md","Anbarchin Challenges",{"type":117,"value":118,"toc":276},"minimark",[119,130,135,149,159,162,171,182,185,192,202,209,223,230,234,240,249,252,259],[120,121,122],"warning",{},[123,124,125,129],"p",{},[126,127,128],"strong",{},"وضعیت پروژه:"," وبسایت این پروژه دیگر در دسترس نیست و شما به پروتوتایپ آن متصل می شوید.",[131,132,134],"h2",{"id":133},"چالش-اصلی","چالش اصلی",[123,136,137,140,141,144,145,148],{},[126,138,139],{},"انبارچین"," یکی از پروژه‌هایی بود که در آن تجربه عملی من در دو حوزه مهم توسعه وب، یعنی ",[126,142,143],{},"ارتباطات Real-Time"," و ",[126,146,147],{},"کار با نقشه‌های تعاملی و داده‌های مکانی"," گسترش پیدا کرد.",[123,150,151,152,154,155,158],{},"این پروژه برای ",[126,153,30],{}," توسعه داده شد و رابط کاربری آن با ",[126,156,157],{},"Nuxt.js، Vue.js و Vuetify"," پیاده‌سازی شد.",[123,160,161],{},"یکی از اهداف اصلی در این پروژه، آشنایی عمیق‌تر با نحوه ارتباط لحظه‌ای بین Client و Server و همچنین کار با داده‌های مکانی و مدیریت نقشه‌های پیچیده بود.",[131,163,165,166],{"id":164},"ارتباطات-real-time-و-websocket","ارتباطات Real-Time و WebSocket ",[167,168],"span",{"className":169},[170],"PDq2pG_selectionAnchor",[123,172,173,174,177,178,181],{},"یکی از مهم‌ترین تجربیات این پروژه، آشنایی عملی با ",[126,175,176],{},"WebSocket و ارتباطات Real-Time"," و استفاده از آن در پیاده‌سازی ",[126,179,180],{},"سیستم چت"," بود.",[123,183,184],{},"در این پروژه، ارتباط Socket بین Client و Server برای ایجاد یک تجربه چت لحظه‌ای پیاده‌سازی شد؛ به‌گونه‌ای که پیام‌های ارسال‌شده بدون نیاز به Refresh یا درخواست‌های مکرر HTTP در اختیار طرف مقابل قرار می‌گرفتند.",[123,186,187,188,191],{},"در این مسیر با نحوه ",[126,189,190],{},"برقراری و مدیریت اتصال Socket، ارسال و دریافت پیام‌ها، مدیریت چرخه عمر اتصال و همگام‌سازی داده‌های دریافتی با رابط کاربری"," آشنا شدم و این مفاهیم را در سیستم چت پروژه به‌صورت عملی پیاده‌سازی کردم.",[123,193,194,195,198,199,201],{},"این تجربه همچنین درک بهتری از تفاوت میان درخواست‌های معمول ",[126,196,197],{},"HTTP"," و ارتباطات دائمی و دوطرفه ",[126,200,69],{}," ایجاد کرد و نحوه مدیریت داده‌های Real-Time و به‌روزرسانی وضعیت رابط کاربری بر اساس رویدادهای دریافتی را به‌صورت عملی تجربه کردم.",[131,203,205,206],{"id":204},"کار-با-نقشه-و-دادههای-مکانی","کار با نقشه و داده‌های مکانی ",[167,207],{"className":208},[170],[123,210,211,212,144,214,218,219,222],{},"یکی از بخش‌های اصلی انبارچین، کار با ",[126,213,88],{},[215,216,217],"code",{},"vue3-openlayers"," بود. در این پروژه با مفاهیم ",[126,220,221],{},"Vector Data، Custom Styling، Layer Management، Clustering و Popup"," آشنا شدم و آن‌ها را در یک نقشه تعاملی پیاده‌سازی کردم.",[123,224,225,226,229],{},"همچنین نحوه مدیریت ",[126,227,228],{},"Zoom، Eventها و Interactionهای نقشه"," و هماهنگ‌سازی رفتار Map با تعاملات کاربر را تجربه کردم.",[131,231,233],{"id":232},"رابط-کاربری","رابط کاربری",[123,235,236,237,239],{},"رابط کاربری پروژه با ",[126,238,80],{}," و Vue.js توسعه داده شد.",[123,241,242,243,245,246,248],{},"برای مدیریت State از ",[126,244,81],{}," و برای برخی قابلیت‌های کاربردی از ",[126,247,82],{}," استفاده شد.",[123,250,251],{},"همچنین در پروژه قابلیت‌هایی مانند آپلود و مدیریت فایل با FilePond، ویرایش محتوای متنی با TinyMCE، مرتب‌سازی داده‌ها با Vue Draggable و نمایش محتوای اسلایدی با Swiper نیز مورد استفاده قرار گرفتند.",[131,253,255,256],{"id":254},"نتیجه","نتیجه ",[167,257],{"className":258},[170],[123,260,261,262,144,265,268,269,271,272,275],{},"انبارچین تجربه‌ای عملی در ",[126,263,264],{},"Real-Time Web Applications",[126,266,267],{},"Interactive Maps"," بود؛ از پیاده‌سازی ارتباطات ",[126,270,69],{}," تا کار با ",[126,273,274],{},"OpenLayers، Vector Data، Layerها، Clustering، Popup و Map Interaction",".",{"title":59,"searchDepth":277,"depth":277,"links":278},2,[279,280,281,282,283],{"id":133,"depth":277,"text":134},{"id":164,"depth":277,"text":165},{"id":204,"depth":277,"text":205},{"id":232,"depth":277,"text":233},{"id":254,"depth":277,"text":255},"md",{},"\u002Fprojects\u002Fanbarchin-challenges",{"title":115,"description":59},"projects\u002Fanbarchin-challenges","DyPTeTCA9VRy9K_IGId4P6Mv4lvurq0CEu7OkiIk1B8",1786900462546]