[{"data":1,"prerenderedAt":481},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Fzabanjo":26,"challenges-\u002Fprojects\u002Fzabanjo":149},[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":73,"meta":79,"navigation":80,"order":81,"path":82,"seo":83,"startDate":84,"stem":85,"tags":86,"technologies":95,"url":76,"__hash__":148},"projects\u002Fprojects\u002Fzabanjo.yml","زبانجو — پلتفرم جستجو و رزرو کلاس زبان",null,"","2026-03-21","توسعه یک پلتفرم Full-Stack برای جستجو، مقایسه و ثبت‌نام در کلاس‌های زبان، شامل پنل کاربری، پنل مدیریت آموزشگاه و پنل مدیریت سیستم، با تمرکز بر تجربه کاربری، معماری قابل توسعه و مدیریت کامل فرانت‌اند و بک‌اند.","2026-11-11","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_.png",[37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71],{"src":35,"alt":38},"پلتفرم زبانجو",{"src":40,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%287%29.png",{"src":42,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%2810%29.png",{"src":44,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%283%29.png",{"src":46,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%28Samsung%20Galaxy%20S8%2B%29%20%283%29.png",{"src":48,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%281%29.png",{"src":50,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%2813%29.png",{"src":52,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%28Samsung%20Galaxy%20S8%2B%29%20%281%29.png",{"src":54,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%288%29.png",{"src":56,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%28Samsung%20Galaxy%20S8%2B%29%20%282%29.png",{"src":58,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%286%29.png",{"src":60,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%28Samsung%20Galaxy%20S8%2B%29.png",{"src":62,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%282%29.png",{"src":64,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%2812%29.png",{"src":66,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%2811%29.png",{"src":68,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%284%29.png",{"src":70,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%285%29.png",{"src":72,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fzabanjo\u002Fzaban-jo.lovable.app_%20%289%29.png",[74],{"label":75,"to":76,"target":77,"icon":78},"مشاهده نسخه دمو","https:\u002F\u002Fzaban-jo.lovable.app","_blank","i-lucide-external-link",{},true,"5","\u002Fprojects\u002Fzabanjo",{"title":28,"description":32},"2026-05-21","projects\u002Fzabanjo",[87,88,89,90,91,92,93,94],"Full-Stack","Education","Language Learning","Nuxt.js","TypeScript","Prisma","MySQL","PWA",[96,105,114,122,128,134,141],{"category":97,"items":98},"frontend",[99,100,91,101,102,103,104],"Nuxt.js 4","Vue.js 3","Nuxt UI","Tailwind CSS v4","Pinia","VueUse",{"category":106,"items":107},"backend",[108,109,92,110,111,112,113],"Nitro","Node.js","REST API","JWT","bcrypt","Zod",{"category":115,"items":116},"database",[93,117,118,119,120,121],"MariaDB","Prisma ORM","Database Modeling","Migrations","Seed",{"category":123,"items":124},"maps",[125,126,127],"MapLibre GL","OpenLayers","OpenStreetMap",{"category":129,"items":130},"content",[131,132,133],"Nuxt Content","MDC","TipTap",{"category":135,"items":136},"seo",[137,138,139,140],"Nuxt SEO","Nuxt OG Image","Nuxt Schema.org","Nuxt LLMS",{"category":142,"items":143},"other",[144,145,146,147],"Notification Push","Progressive Web App (PWA)","Lottie","MCP (AI accessibility)","YDSOla_Vb0in9XHuX9fgihb4wZaAO2J2P78fq1KZsvA",{"id":150,"title":151,"body":152,"description":30,"extension":475,"meta":476,"navigation":80,"path":477,"seo":478,"stem":479,"__hash__":480},"projectChallenges\u002Fprojects\u002Fzabanjo-challenges.md","Zabanjo Challenges",{"type":153,"value":154,"toc":455},"minimark",[155,173,178,184,190,193,197,200,205,208,212,215,218,221,225,228,231,238,242,245,248,258,262,268,271,274,277,281,288,294,297,321,324,329,333,336,339,342,346,349,356,360,366,372,376,387,390,394,397,402,405,408,412,419,422,425,428,431,442,449],[156,157,158,166],"warning",{},[159,160,161,165],"p",{},[162,163,164],"strong",{},"وضعیت پروژه:"," نسخه نمایش داده‌شده دمو است",[159,167,168,169,172],{},"نسخه موجود در این لینک صرفاً یک ",[162,170,171],{},"Demo"," از پروژه زبانجو است و سایت اصلی در حال توسعه است. نسخه اصلی هنوز به‌صورت عمومی Deploy نشده است.",[174,175,177],"h2",{"id":176},"چالش-اصلی","چالش اصلی",[159,179,180,183],{},[162,181,182],{},"زبانجو"," یک پلتفرم برای پیدا کردن و ثبت‌نام در کلاس‌های زبان است که با هدف ایجاد ارتباط میان زبان‌آموزان و آموزشگاه‌ها طراحی شده است.",[159,185,186,187,189],{},"در این پروژه مسئولیت توسعه به‌صورت کامل بر عهده من بود و پروژه از ابتدا تا انتها به‌صورت ",[162,188,87],{}," توسعه داده شد؛ از طراحی UI و UX و تعریف Featureها و جریان‌های کاربری گرفته تا توسعه فرانت‌اند، طراحی API، منطق بک‌اند، دیتابیس و پنل‌های مدیریتی.",[159,191,192],{},"یکی از ویژگی‌های اصلی پروژه، وجود چند نوع کاربر و پنل متفاوت بود. به همین دلیل معماری سیستم باید به‌گونه‌ای طراحی می‌شد که هر نقش بتواند امکانات و دسترسی‌های مخصوص خود را داشته باشد.",[174,194,196],{"id":195},"پنلهای-مختلف-سیستم","پنل‌های مختلف سیستم",[159,198,199],{},"برای مدیریت نقش‌ها و نیازهای مختلف کاربران، چند محیط مجزا در پروژه طراحی و پیاده‌سازی شد:",[201,202,204],"h3",{"id":203},"پنل-کاربری","پنل کاربری",[159,206,207],{},"زبان‌آموزان از طریق پنل کاربری می‌توانند اطلاعات حساب خود را مدیریت کرده و فرآیندهای مربوط به کلاس‌ها و ثبت‌نام را دنبال کنند.",[201,209,211],{"id":210},"پنل-مدیریت-آموزشگاه","پنل مدیریت آموزشگاه",[159,213,214],{},"یکی از بخش‌های اصلی پروژه، پنل اختصاصی آموزشگاه‌ها بود.",[159,216,217],{},"این پنل برای مدیریت اطلاعات آموزشگاه، کلاس‌ها، دوره‌ها و داده‌های مرتبط با فعالیت آموزشگاه در پلتفرم طراحی شد.",[159,219,220],{},"هدف این بود که آموزشگاه تنها یک ارائه‌دهنده اطلاعات ثابت نباشد و بتواند بخش‌های مختلف مربوط به کلاس‌ها و فعالیت خود را از طریق پنل مدیریت کند.",[201,222,224],{"id":223},"پنل-مدیریت-سیستم","پنل مدیریت سیستم",[159,226,227],{},"در کنار پنل کاربران و آموزشگاه‌ها، یک پنل مدیریتی برای مدیریت کلی پلتفرم نیز طراحی شد.",[159,229,230],{},"این بخش برای مدیریت داده‌ها، کاربران، آموزشگاه‌ها و کنترل بخش‌های مختلف سیستم در نظر گرفته شد.",[159,232,233,234,237],{},"وجود این سه سطح مدیریتی باعث شد پروژه عملاً با یک سیستم چندنقشی و ",[162,235,236],{},"Role-based Access"," مواجه باشد و مدیریت دسترسی‌ها به یکی از بخش‌های مهم معماری پروژه تبدیل شود.",[174,239,241],{"id":240},"طراحی-ui-و-ux","طراحی UI و UX",[159,243,244],{},"طراحی UI و UX پروژه به‌صورت کامل توسط خودم انجام شد.",[159,246,247],{},"از طراحی ساختار صفحات و مسیرهای کاربری گرفته تا طراحی کامپوننت‌ها، فرم‌ها، جداول، پنل‌ها و جزئیات تعاملی رابط کاربری، همه بخش‌ها متناسب با نیازهای پروژه طراحی و پیاده‌سازی شدند.",[159,249,250,251,253,254,257],{},"برای ساخت رابط کاربری از ",[162,252,101],{}," و ",[162,255,256],{},"Tailwind CSS"," استفاده شد و ساختار کامپوننت‌ها به‌گونه‌ای توسعه داده شد که در بخش‌های مختلف پروژه قابلیت استفاده مجدد داشته باشند.",[174,259,261],{"id":260},"توسعه-full-stack","توسعه Full-Stack",[159,263,264,265,267],{},"زبانجو به‌صورت کامل به‌عنوان یک پروژه ",[162,266,87],{}," توسعه داده شد.",[159,269,270],{},"در سمت Frontend، صفحات، کامپوننت‌ها، فرم‌ها، تعاملات کاربری و جریان‌های مختلف سیستم پیاده‌سازی شدند.",[159,272,273],{},"در سمت Backend نیز APIها، منطق تجاری، اعتبارسنجی داده‌ها، احراز هویت، مدیریت دسترسی‌ها و ارتباط با Database توسعه داده شدند.",[159,275,276],{},"به این ترتیب Frontend و Backend پروژه به‌صورت یکپارچه طراحی شدند و Featureهای مختلف از رابط کاربری تا لایه داده به‌صورت کامل توسط خودم پیاده‌سازی شدند.",[174,278,280],{"id":279},"معماری-backend-و-database","معماری Backend و Database",[159,282,283,284,287],{},"برای Backend از قابلیت‌های Server-side در ",[162,285,286],{},"Nuxt و Nitro"," استفاده شد.",[159,289,290,291,293],{},"ارتباط با Database توسط ",[162,292,118],{}," انجام شد و ساختار دیتابیس برای موجودیت‌های مختلف سیستم و روابط میان آن‌ها طراحی شد.",[159,295,296],{},"در این بخش مفاهیمی مانند:",[298,299,300,304,307,310,312,315,318],"ul",{},[301,302,303],"li",{},"طراحی مدل‌های دیتابیس",[301,305,306],{},"روابط بین موجودیت‌ها",[301,308,309],{},"Migration",[301,311,121],{},[301,313,314],{},"Query و مدیریت داده‌ها",[301,316,317],{},"طراحی API",[301,319,320],{},"اعتبارسنجی ورودی‌ها",[159,322,323],{},"به‌صورت عملی در پروژه مورد استفاده قرار گرفتند.",[159,325,326,327,287],{},"برای اعتبارسنجی داده‌ها نیز از ",[162,328,113],{},[174,330,332],{"id":331},"سیستم-احراز-هویت-و-دسترسی","سیستم احراز هویت و دسترسی",[159,334,335],{},"به دلیل وجود چند نوع کاربر و چند پنل مدیریتی، سیستم Authentication و Authorization از اهمیت بالایی برخوردار بود.",[159,337,338],{},"فرآیند ورود کاربران، مدیریت Session، Token و سطح دسترسی هر نقش در Backend و Frontend مدیریت شد.",[159,340,341],{},"این ساختار باعث شد هر کاربر بر اساس Role خود تنها به بخش‌ها و قابلیت‌هایی که مجاز به استفاده از آن‌هاست دسترسی داشته باشد.",[174,343,345],{"id":344},"سیستم-نقشه-و-موقعیت-مکانی","سیستم نقشه و موقعیت مکانی",[159,347,348],{},"از آنجا که یکی از قابلیت‌های اصلی زبانجو پیدا کردن آموزشگاه‌ها و کلاس‌های زبان است، قابلیت‌های مرتبط با موقعیت مکانی و نقشه نیز در پروژه مورد توجه قرار گرفت.",[159,350,351,352,355],{},"برای این بخش از ابزارهایی مانند ",[162,353,354],{},"MapLibre GL، OpenLayers و Neshan Maps"," استفاده شد تا امکان نمایش موقعیت آموزشگاه‌ها و تعامل کاربر با داده‌های مکانی فراهم شود.",[174,357,359],{"id":358},"مدیریت-محتوا","مدیریت محتوا",[159,361,362,363,287],{},"برای بخش‌های محتوایی پروژه از ",[162,364,365],{},"Nuxt Content و MDC",[159,367,368,369,371],{},"همچنین برای ایجاد و مدیریت محتوای ساختاریافته و ویرایش محتوای متنی، ابزارهایی مانند ",[162,370,133],{}," در پروژه مورد استفاده قرار گرفتند.",[174,373,375],{"id":374},"progressive-web-app","Progressive Web App",[159,377,378,379,381,382,386],{},"پروژه با در نظر گرفتن قابلیت‌های ",[162,380,375],{}," توسعه داده شد و زیرساخت PWA با استفاده از ",[383,384,385],"code",{},"@vite-pwa\u002Fnuxt"," در نظر گرفته شد.",[159,388,389],{},"این ساختار امکان ارائه تجربه‌ای نزدیک‌تر به یک اپلیکیشن نصب‌شده را فراهم می‌کند و قابلیت‌هایی مانند Service Worker و مدیریت رفتار اپلیکیشن در محیط مرورگر را در اختیار پروژه قرار می‌دهد.",[174,391,393],{"id":392},"seo-و-open-graph","SEO و Open Graph",[159,395,396],{},"سئوی فنی پروژه نیز در کنار توسعه Featureهای اصلی مورد توجه قرار گرفت.",[159,398,351,399,287],{},[162,400,401],{},"Nuxt SEO، Nuxt Schema.org و Nuxt OG Image",[159,403,404],{},"همچنین ساختار پروژه با در نظر گرفتن Metadata، اطلاعات ساختاریافته و قابلیت‌های مرتبط با موتورهای جستجو توسعه داده شد.",[159,406,407],{},"سیستم Open Graph نیز می‌تواند برای صفحات مختلف بر اساس داده‌های همان صفحه، تصویر مناسب تولید کند و نیازی به ساخت دستی یک تصویر برای تک‌تک صفحات وجود نداشته باشد.",[174,409,411],{"id":410},"mcp-و-دسترسی-agentها","MCP و دسترسی Agentها",[159,413,414,415,418],{},"یکی دیگر از بخش‌های جالب پروژه استفاده از ",[162,416,417],{},"Nuxt MCP Toolkit"," بود.",[159,420,421],{},"این بخش با هدف فراهم کردن ساختاری برای تعامل ابزارهای هوش مصنوعی و Agentها با قابلیت‌های پروژه در نظر گرفته شد.",[159,423,424],{},"این تجربه در ادامه آشنایی با معماری Agentها و MCP، امکان بررسی این موضوع را فراهم کرد که چگونه می‌توان قابلیت‌های یک وب‌سایت را به‌شکل ساختاریافته در اختیار Agentها قرار داد.",[174,426,427],{"id":427},"نتیجه",[159,429,430],{},"زبانجو یکی از پروژه‌های Full-Stack گسترده‌ای بود که در آن مسئولیت توسعه محصول از طراحی تا پیاده‌سازی فنی را بر عهده داشتم.",[159,432,433,434,437,438,441],{},"از ",[162,435,436],{},"طراحی UI و UX، تعریف Featureها و جریان‌های کاربری"," گرفته تا ",[162,439,440],{},"توسعه Frontend، Backend، API، Database، Authentication، پنل کاربری، پنل آموزشگاه و پنل مدیریت سیستم","، بخش‌های اصلی پروژه به‌صورت یکپارچه توسعه داده شدند.",[159,443,444,445,448],{},"همچنین قابلیت‌هایی مانند ",[162,446,447],{},"نقشه و موقعیت مکانی، PWA، SEO، Open Graph، مدیریت محتوا و MCP"," نیز در معماری پروژه مورد توجه قرار گرفتند.",[159,450,451,452,454],{},"نسخه‌ای که در حال حاضر برای نمایش در دسترس است یک ",[162,453,171],{}," از پروژه است و نسخه اصلی محصول همچنان در حال توسعه بوده و هنوز به‌صورت عمومی Deploy نشده است.",{"title":30,"searchDepth":456,"depth":456,"links":457},2,[458,459,465,466,467,468,469,470,471,472,473,474],{"id":176,"depth":456,"text":177},{"id":195,"depth":456,"text":196,"children":460},[461,463,464],{"id":203,"depth":462,"text":204},3,{"id":210,"depth":462,"text":211},{"id":223,"depth":462,"text":224},{"id":240,"depth":456,"text":241},{"id":260,"depth":456,"text":261},{"id":279,"depth":456,"text":280},{"id":331,"depth":456,"text":332},{"id":344,"depth":456,"text":345},{"id":358,"depth":456,"text":359},{"id":374,"depth":456,"text":375},{"id":392,"depth":456,"text":393},{"id":410,"depth":456,"text":411},{"id":427,"depth":456,"text":427},"md",{},"\u002Fprojects\u002Fzabanjo-challenges",{"description":30},"projects\u002Fzabanjo-challenges","VXKEDYORq-5nPVfnj5CU4Mm7wZ_ZVrEvaIHlhEI3oQU",1786900462511]