[{"data":1,"prerenderedAt":685},["ShallowReactive",2],{"navigation":3,"project-\u002Fprojects\u002Fsellora":26,"challenges-\u002Fprojects\u002Fsellora":152},[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":66,"meta":76,"navigation":77,"order":78,"path":79,"seo":80,"startDate":31,"stem":81,"tags":82,"technologies":96,"url":69,"__hash__":151},"projects\u002Fprojects\u002Fsellora.yml","سلورا — پروژه فول‌استک فروشگاهی",null,"","2025-12-22","توسعه یک پروژه فروشگاهی دمو به‌صورت Full-Stack، از طراحی UI و UX و معماری فرانت‌اند تا طراحی API، منطق بک‌اند، مدل‌سازی دیتابیس، سئوی فنی و استقرار نهایی پروژه.","2026-04-20","yml","https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_.png",[37,39,41,43,45,47,49,51,53,55,57,59,61,63,65],{"src":35,"alt":38},"اصلی سلورا",{"src":40,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-lihthouse.png",{"src":42,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002FScreenshot_20260811_172646_Chrome.jpg",{"src":44,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_products_PQKQ6OQSA_womens-clothing-15-1785929626157%20%283%29.png",{"src":46,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_%20%283%29.png",{"src":48,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_products_PQKQ6OQSA_womens-clothing-15-1785929626157%20%282%29.png",{"src":50,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_products_PLU6UHH0F_hats-19-1785929631114.png",{"src":52,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002FScreenshot_20260811_172639_Chrome%20%281%29.jpg",{"src":54,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_products_PQKQ6OQSA_womens-clothing-15-1785929626157.png",{"src":56,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_products_PQKQ6OQSA_womens-clothing-15-1785929626157%20%281%29.png",{"src":58,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_%20%281%29.png",{"src":60,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_%20%282%29.png",{"src":62,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002Fselora-kiumarsi.up.railway.app_products_PLU6UHH0F_hats-19-1785929631114%20%281%29.png",{"src":64,"alt":38},"https:\u002F\u002Fqr2tnegks1uabe3e.public.blob.vercel-storage.com\u002Fselora\u002FScreenshot_20260811_172639_Chrome.jpg",{"src":40,"alt":38},[67,72],{"label":68,"to":69,"target":70,"icon":71},"مشاهده سایت","https:\u002F\u002Fselora-kiumarsi.up.railway.app\u002F","_blank","i-lucide-external-link",{"label":73,"to":74,"target":70,"icon":75},"مشاهده Sitemap","https:\u002F\u002Fselora-kiumarsi.up.railway.app\u002Fsitemap_index.xml","i-lucide-map",{},true,"3","\u002Fprojects\u002Fsellora",{"title":28,"description":32},"projects\u002Fsellora",[83,84,85,86,87,88,89,90,91,92,93,94,95],"Full-Stack","Nuxt.js","Vue.js","TypeScript","Backend","MySQL","Atomic Design","SEO","PWA","Caching","Lighthouse","Testing","CI\u002FCD",[97,106,117,122,131,137,145],{"category":98,"items":99},"frontend",[100,101,86,102,103,104,105],"Nuxt.js 4","Vue.js 3","Nuxt UI","Tailwind CSS v4","Pinia","VueUse",{"category":107,"items":108},"backend",[109,110,111,112,113,114,115,116],"Nitro","Node.js","REST API","JWT","bcrypt","Prisma","Firebase Admin","Object Storage (S3)",{"category":118,"items":119},"database",[88,114,120,121],"Drizzle","Database Modeling",{"category":123,"items":124},"notifications",[125,126,127,128,129,130],"Push Notifications","Firebase Cloud Messaging (FCM)","Firebase Admin SDK","Web Push","Service Worker","Notification APIs",{"category":132,"items":133},"architecture",[89,134,135,136],"Modular Architecture","Component-Based Architecture","Nuxt Layers",{"category":138,"items":139},"seo",[140,141,142,143,144],"Nuxt Sitemap","Multi Sitemap","Nuxt Schema.org","Nuxt OG Image","Nuxt Robots",{"category":146,"items":147},"testing",[148,149,150],"Vitest","Playwright","Nuxt Test Utils","ajAbDNRYGmLKVvRm4nS3GHLdGoVZJakK1OHTTgUzUzY",{"id":153,"title":154,"body":155,"description":30,"extension":679,"meta":680,"navigation":77,"path":681,"seo":682,"stem":683,"__hash__":684},"projectChallenges\u002Fprojects\u002Fsellora-challenges.md","Sellora Challenges",{"type":156,"value":157,"toc":660},"minimark",[158,172,177,183,186,189,193,196,206,209,212,215,224,232,236,246,249,252,264,268,275,278,281,289,292,296,299,306,314,317,321,324,335,341,344,348,351,354,394,397,401,408,411,418,421,424,428,431,434,437,441,447,462,465,468,485,488,491,498,502,507,510,517,524,527,531,534,545,552,561,564,568,574,577,587,590,593,600,604,611,614,617,621,628,631,638,641,646,649],[159,160,161,169],"warning",{},[162,163,164,168],"p",{},[165,166,167],"strong",{},"وضعیت پروژه:"," پروژه دمو",[162,170,171],{},"سلورا یک پروژه شخصی و آزمایشی است و برای یک شرکت یا کارفرمای مشخص توسعه داده نشده است.",[173,174,176],"h2",{"id":175},"چالش-اصلی","چالش اصلی",[162,178,179,180,182],{},"سلورا اولین پروژه‌ای بود که در آن یک محصول را به‌صورت ",[165,181,83],{}," و از ابتدا تا مرحله استقرار نهایی توسعه دادم.",[162,184,185],{},"در این پروژه مسئولیت من تنها به توسعه رابط کاربری محدود نبود و تمام بخش‌های اصلی محصول را شخصاً پیاده‌سازی کردم؛ از طراحی UI و UX و معماری فرانت‌اند گرفته تا طراحی API، منطق بک‌اند، اعتبارسنجی، ساختار دیتابیس، سئوی فنی، بهینه‌سازی عملکرد و در نهایت Deployment و Hosting.",[162,187,188],{},"این پروژه نقطه عطفی در مسیر یادگیری من بود، زیرا برای اولین بار مفاهیم فرانت‌اند، بک‌اند، دیتابیس و زیرساخت را در قالب یک پروژه واحد و به‌صورت عملی در کنار یکدیگر تجربه کردم.",[173,190,192],{"id":191},"بهینهسازی-performance","بهینه‌سازی Performance",[162,194,195],{},"یکی از اهداف اصلی پروژه، رسیدن به عملکرد مناسب و تجربه کاربری سریع بود.",[162,197,198,199,201,202,205],{},"برای بررسی عملکرد پروژه از ابزارهایی مانند ",[165,200,93],{}," و ",[165,203,204],{},"PageSpeed Insights"," استفاده شد و بخش‌های مختلف برنامه به‌صورت مستمر از نظر Performance و کیفیت فنی بررسی شدند.",[162,207,208],{},"روی خروجی این ابزارها به‌صورت دقیق کار شد؛ تک‌تک موارد و هشدارهای مطرح‌شده در Lighthouse و PageSpeed بررسی، دسته‌بندی و اولویت‌بندی شدند و برای هرکدام اصلاح لازم در پروژه اعمال شد تا نتیجه نهایی هم از نظر امتیاز و هم از نظر تجربه واقعی کاربر مرتب و قابل قبول باشد.",[162,210,211],{},"در فرآیند بهینه‌سازی، موارد مختلفی مانند حجم منابع، نحوه بارگذاری JavaScript و تصاویر، کشینگ، Rendering، زمان پاسخ‌دهی و رفتار صفحات در نظر گرفته شد.",[162,213,214],{},"هدف تنها افزایش یک امتیاز عددی نبود؛ بلکه تلاش شد ساختار پروژه به‌گونه‌ای پیاده‌سازی شود که در شرایط واقعی نیز تجربه کاربری مناسبی ارائه دهد.",[162,216,217],{},[218,219,223],"a",{"href":220,"rel":221},"https:\u002F\u002Fpagespeed.web.dev\u002Fanalysis\u002Fhttps-selora-kiumarsi-up-railway-app\u002Fbnw96pyxkf?form_factor=desktop",[222],"nofollow","مشاهده نتایج PageSpeed",[162,225,227,228],{"align":226},"center","\n  ",[229,230],"img",{"src":40,"alt":231},"Example",[173,233,235],{"id":234},"معماری-فرانتاند","معماری فرانت‌اند",[162,237,238,239,242,243,245],{},"فرانت‌اند پروژه با ",[165,240,241],{},"Nuxt.js 4، Vue.js 3 و TypeScript"," توسعه داده شد و ساختار رابط کاربری بر پایه ",[165,244,89],{}," شکل گرفت.",[162,247,248],{},"کامپوننت‌ها از کوچک‌ترین اجزای قابل استفاده مجدد شروع می‌شوند و با ترکیب آن‌ها، کامپوننت‌های پیچیده‌تر و در نهایت بخش‌های مختلف رابط کاربری ساخته می‌شوند.",[162,250,251],{},"در کنار ساختار Atomic Design، تلاش شد منطق برنامه از لایه UI جدا نگه داشته شود. منطق‌های قابل استفاده مجدد و رفتارهای مرتبط با داده در لایه‌های جداگانه قرار گرفتند تا کامپوننت‌های رابط کاربری تا حد امکان مستقل، خوانا و قابل استفاده مجدد باقی بمانند.",[162,253,254,255,257,258,201,260,263],{},"برای مدیریت وضعیت نیز از ",[165,256,104],{}," استفاده شد و رابط کاربری با ",[165,259,102],{},[165,261,262],{},"Tailwind CSS"," پیاده‌سازی شد.",[173,265,267],{"id":266},"معماری-بکاند","معماری بک‌اند",[162,269,270,271,274],{},"بک‌اند پروژه با استفاده از ",[165,272,273],{},"Nitro و Node.js"," توسعه داده شد.",[162,276,277],{},"در این پروژه برای اولین بار به‌صورت عملی با معماری بک‌اند و چرخه کامل ارتباط بین Frontend، API و Database کار کردم.",[162,279,280],{},"طراحی و پیاده‌سازی APIها، منطق سمت سرور، اعتبارسنجی ورودی‌ها، مدیریت خطا، احراز هویت و سایر منطق‌های موردنیاز پروژه به‌صورت مستقل انجام شد.",[162,282,283,284,201,286,288],{},"برای احراز هویت و مدیریت امنیت نیز از ابزارهایی مانند ",[165,285,112],{},[165,287,113],{}," استفاده شد.",[162,290,291],{},"این تجربه باعث شد درک عمیق‌تری از نحوه طراحی API، تفکیک مسئولیت‌ها در سمت سرور و ارتباط میان لایه‌های مختلف یک اپلیکیشن Full-Stack پیدا کنم.",[173,293,295],{"id":294},"معماری-و-مدلسازی-دیتابیس","معماری و مدل‌سازی دیتابیس",[162,297,298],{},"یکی از بخش‌های مهم پروژه، آشنایی عملی با معماری دیتابیس و طراحی مدل‌های داده بود.",[162,300,301,302,305],{},"در طول توسعه با دیتابیس‌هایی مانند ",[165,303,304],{},"MySQL و SQLite"," کار کردم و مفاهیمی مانند طراحی جداول، روابط بین داده‌ها، مدل‌سازی، Migration، Seed و نحوه ارتباط لایه بک‌اند با دیتابیس را به‌صورت عملی تجربه کردم.",[162,307,308,309,201,311,313],{},"همچنین با ابزارهایی مانند ",[165,310,114],{},[165,312,120],{}," برای مدل‌سازی و مدیریت داده‌ها کار شد.",[162,315,316],{},"این بخش از پروژه کمک کرد درک بهتری از ارتباط میان ساختار دیتابیس، مدل‌های برنامه و منطق تجاری شکل بگیرد و معماری دیتابیس به‌عنوان بخشی مستقل از معماری کلی پروژه در نظر گرفته شود.",[173,318,320],{"id":319},"سئوی-فنی","سئوی فنی",[162,322,323],{},"سئوی پروژه در چندین لایه پیاده‌سازی شد و تنها به Meta Tagهای ساده محدود نبود.",[162,325,326,327,331,332,334],{},"برای مدیریت Sitemap از ",[328,329,330],"code",{},"@nuxtjs\u002Fsitemap"," استفاده شد و ساختار ",[165,333,141],{}," برای پروژه در نظر گرفته شد.",[162,336,337],{},[218,338,340],{"href":74,"rel":339},[222],"مشاهده Sitemap چندبخشی پروژه",[162,342,343],{},"همچنین Schema.org و Robots برای بهبود ساختار اطلاعات و کنترل نحوه دسترسی موتورهای جست‌وجو استفاده شدند.",[173,345,347],{"id":346},"web-quality-و-استانداردهای-فنی","Web Quality و استانداردهای فنی",[162,349,350],{},"در کنار Performance، پروژه از نظر سایر شاخص‌های مهم کیفیت وب نیز مورد توجه قرار گرفت.",[162,352,353],{},"تمرکز اصلی روی بهبود و رعایت موارد زیر بود:",[355,356,357,364,370,376,382,388],"ul",{},[358,359,360,363],"li",{},[165,361,362],{},"SEO:"," ساختار مناسب صفحات، Metadata، Sitemap، Schema.org و Open Graph",[358,365,366,369],{},[165,367,368],{},"Accessibility:"," توجه به دسترسی‌پذیری عناصر و تعاملات رابط کاربری",[358,371,372,375],{},[165,373,374],{},"Best Practices:"," رعایت استانداردهای فنی و الگوهای مناسب توسعه",[358,377,378,381],{},[165,379,380],{},"Performance:"," کاهش زمان بارگذاری و بهینه‌سازی منابع",[358,383,384,387],{},[165,385,386],{},"Agent Browsing:"," در نظر گرفتن ساختار و اطلاعات قابل فهم برای ابزارها و Agentهای وب",[358,389,390,393],{},[165,391,392],{},"Availability:"," تلاش برای حفظ دسترسی‌پذیری مناسب و رفتار پایدار سرویس",[162,395,396],{},"این موارد در کنار یکدیگر بررسی شدند تا کیفیت پروژه تنها به ظاهر یا عملکرد یک صفحه محدود نباشد و محصول از دیدگاه‌های مختلف Web Quality نیز وضعیت مناسبی داشته باشد.",[173,398,400],{"id":399},"تولید-خودکار-open-graph-image","تولید خودکار Open Graph Image",[162,402,403,404,407],{},"یکی از بخش‌های جذاب پروژه، پیاده‌سازی سیستم تولید خودکار ",[165,405,406],{},"Open Graph Image"," بود.",[162,409,410],{},"به‌جای اینکه برای هر صفحه یک تصویر جداگانه در نرم‌افزارهای گرافیکی طراحی و ذخیره شود، یک قالب مشخص برای OG Image تعریف شد.",[162,412,413,414,417],{},"اطلاعات هر صفحه به‌صورت ",[165,415,416],{},"داده زنده"," وارد این قالب می‌شود و تصویر Open Graph متناسب با همان صفحه به‌صورت خودکار تولید می‌شود.",[162,419,420],{},"به این ترتیب، برای صفحات جدید نیازی به ساخت دستی تصویر وجود ندارد و هر صفحه می‌تواند بر اساس عنوان، محتوا و داده‌های خودش تصویر Open Graph اختصاصی داشته باشد.",[162,422,423],{},"این روش علاوه بر کاهش کار دستی، مدیریت OG Imageها را در پروژه‌های دارای صفحات پویا بسیار ساده‌تر و مقیاس‌پذیرتر می‌کند.",[173,425,427],{"id":426},"طراحی-ui-و-ux","طراحی UI و UX",[162,429,430],{},"طراحی UI و UX پروژه نیز به‌صورت کامل توسط خودم انجام شد.",[162,432,433],{},"ساختار صفحات، جریان‌های کاربری، کامپوننت‌ها و جزئیات بصری با در نظر گرفتن قابلیت استفاده مجدد طراحی شدند و سپس بر اساس معماری Atomic Design در قالب کامپوننت‌های مختلف پیاده‌سازی شدند.",[162,435,436],{},"هدف این بود که در کنار ظاهر مناسب، ساختار رابط کاربری نیز منظم، قابل توسعه و قابل نگهداری باشد.",[173,438,440],{"id":439},"سیستم-نوتیفیکیشن","سیستم نوتیفیکیشن",[162,442,443,444,407],{},"یکی دیگر از بخش‌های مهم پروژه، پیاده‌سازی و مدیریت ",[165,445,446],{},"سیستم Web Push Notification",[162,448,449,450,453,454,201,457,459,460,288],{},"در این بخش با مفاهیم و فرآیند کامل ارسال نوتیفیکیشن از ",[165,451,452],{},"Backend به Client"," آشنا شدم و آن را به‌صورت عملی پیاده‌سازی کردم. برای این منظور از ",[165,455,456],{},"Firebase",[165,458,128],{}," در کنار ",[165,461,129],{},[162,463,464],{},"Service Worker مربوط به دریافت و مدیریت نوتیفیکیشن‌ها در سمت Client راه‌اندازی و پیکربندی شد و ارتباط آن با بخش Backend برای ارسال پیام‌ها برقرار شد.",[162,466,467],{},"در سمت Backend و Database نیز ساختار لازم برای مدیریت دستگاه‌ها و Subscriptionها طراحی شد تا بتوان اطلاعات مربوط به دستگاه‌های کاربران را ثبت و مدیریت کرد. این ساختار امکان نگهداری و تحلیل اطلاعاتی مانند:",[355,469,470,473,476,479,482],{},[358,471,472],{},"دستگاه‌ها و Subscriptionهای فعال کاربران",[358,474,475],{},"ارتباط دستگاه با User",[358,477,478],{},"وضعیت ارسال نوتیفیکیشن‌ها",[358,480,481],{},"تعداد و آمار کلیک‌ها و تعامل کاربران با نوتیفیکیشن",[358,483,484],{},"مدیریت دستگاه‌ها و Subscriptionهای مختلف یک کاربر",[162,486,487],{},"را فراهم می‌کرد.",[162,489,490],{},"همچنین APIهای موردنیاز برای ثبت، مدیریت و حذف Subscriptionها، ارسال نوتیفیکیشن و دریافت اطلاعات و آمار مرتبط با آن‌ها پیاده‌سازی شدند.",[162,492,493,494,497],{},"این بخش باعث شد با معماری یک سیستم Notification در وب، چرخه کامل ",[165,495,496],{},"ثبت دستگاه → ایجاد Subscription → ذخیره در Database → ارسال از Backend → دریافت توسط Service Worker → تعامل کاربر با Notification → ثبت آمار تعامل"," به‌صورت عملی آشنا شوم.",[173,499,501],{"id":500},"progressive-web-app-pwa","Progressive Web App (PWA)",[162,503,504,505,407],{},"یکی از بخش‌های مهم پروژه، پیاده‌سازی و بهینه‌سازی ",[165,506,501],{},[162,508,509],{},"در این بخش علاوه بر قابلیت نصب پروژه به‌عنوان یک اپلیکیشن، تنظیمات مربوط به تجربه نصب و رفتار اپلیکیشن نیز مورد توجه قرار گرفت.",[162,511,512,513,516],{},"برای نمونه، ",[165,514,515],{},"Screenshotهای نمایش داده‌شده هنگام نصب PWA"," تنظیم شدند تا کاربر هنگام نصب با پیش‌نمایش مناسبی از محیط اپلیکیشن مواجه شود. این قابلیت را می‌توان مستقیماً با استفاده از گزینه نصب پروژه تست کرد.",[162,518,519,520,523],{},"همچنین ",[165,521,522],{},"App Shortcutها"," برای دسترسی سریع به بخش‌های مهم برنامه پیاده‌سازی شدند تا کاربر بتواند پس از نصب، مستقیماً از منوی اپلیکیشن به مسیرهای مشخصی دسترسی داشته باشد.",[162,525,526],{},"در کنار این موارد، تنظیمات مربوط به Manifest، Service Worker و سایر پیکربندی‌های PWA نیز انجام شد تا پروژه تجربه‌ای نزدیک‌تر به یک اپلیکیشن نصب‌شده ارائه دهد.",[173,528,530],{"id":529},"معماری-کش-و-مدیریت-cache","معماری کش و مدیریت Cache",[162,532,533],{},"برای بهبود عملکرد و کاهش درخواست‌های غیرضروری، سیستم کش در چندین لایه طراحی شد.",[162,535,536,537,540,541,544],{},"در سمت ",[165,538,539],{},"Client"," از ترکیبی از ",[165,542,543],{},"Service Worker، مدیریت State و Cache کردن پاسخ‌ها"," استفاده شد تا داده‌ها در صورت امکان از نزدیک‌ترین لایه به کاربر در دسترس قرار بگیرند.",[162,546,547,548,551],{},"همچنین تنظیمات مربوط به ",[165,549,550],{},"Response Headerها و Cache-Control"," انجام شد تا مرورگر و لایه‌های مختلف شبکه بتوانند پاسخ‌های قابل کش را به‌شکل صحیح مدیریت کنند.",[162,553,536,554,556,557,560],{},[165,555,87],{}," نیز از ",[165,558,559],{},"Redis و قابلیت‌های Server-side Caching در Nitro"," استفاده شد. به این ترتیب، داده‌هایی که نیاز به محاسبه یا دریافت مجدد نداشتند می‌توانستند در لایه سرور کش شوند و از ایجاد درخواست‌های تکراری و پردازش غیرضروری جلوگیری شود.",[162,562,563],{},"این معماری چندلایه باعث شد کش تنها به مرورگر محدود نباشد و در بخش‌های مختلف مسیر درخواست، از Client تا Server، مورد استفاده قرار گیرد.",[173,565,567],{"id":566},"احراز-هویت-و-مدیریت-session","احراز هویت و مدیریت Session",[162,569,570,571,407],{},"یکی دیگر از بخش‌های مهم پروژه، طراحی و پیاده‌سازی سیستم کامل ",[165,572,573],{},"Authentication و مدیریت Session",[162,575,576],{},"در این بخش فرآیند ورود و احراز هویت کاربران، ایجاد و مدیریت Tokenها، نگهداری Session و کنترل دسترسی به بخش‌های مختلف سیستم به‌صورت کامل پیاده‌سازی شد.",[162,578,579,580,582,583,586],{},"برای مدیریت Authentication از ",[165,581,112],{}," استفاده شد و چرخه کامل Token شامل ایجاد، اعتبارسنجی، انقضا و ",[165,584,585],{},"Refresh Token"," طراحی و پیاده‌سازی شد. همچنین منطق مربوط به تمدید Session در زمان نیاز و جلوگیری از ایجاد Sessionهای نامعتبر در نظر گرفته شد.",[162,588,589],{},"در سمت Database نیز جداول و روابط موردنیاز برای مدیریت کاربران، Sessionها، Tokenها و اطلاعات مرتبط با آن‌ها طراحی و مدیریت شدند. این ساختار امکان مدیریت چند Session برای یک کاربر، کنترل وضعیت Sessionها و مدیریت چرخه عمر Tokenها را فراهم می‌کرد.",[162,591,592],{},"APIهای موردنیاز برای ورود و خروج کاربران، ایجاد Session، Refresh کردن Token، اعتبارسنجی کاربر و مدیریت Sessionها نیز در Backend پیاده‌سازی شدند.",[162,594,595,596,599],{},"در نهایت، احراز هویت به‌صورت یکپارچه بین ",[165,597,598],{},"Client، API، Database و Session Management"," پیاده‌سازی شد تا فرآیند ورود کاربر از ایجاد Token و Session تا تمدید و خروج از حساب به‌صورت کنترل‌شده انجام شود.",[173,601,603],{"id":602},"تست-و-کیفیت-کد","تست و کیفیت کد",[162,605,606,607,201,609,288],{},"برای تست بخش‌های مختلف پروژه از ابزارهایی مانند ",[165,608,148],{},[165,610,149],{},[162,612,613],{},"Vitest برای تست‌های واحد و تست‌های مرتبط با Nuxt و Playwright برای تست‌های End-to-End در نظر گرفته شد.",[162,615,616],{},"همچنین TypeScript، ESLint و ابزارهای اکوسیستم Nuxt برای افزایش کیفیت، صحت و maintainability کد مورد استفاده قرار گرفتند.",[173,618,620],{"id":619},"deployment-و-hosting","Deployment و Hosting",[162,622,623,624,627],{},"یکی از مهم‌ترین تجربیات این پروژه، آشنایی عملی با فرآیند ",[165,625,626],{},"Build، Deployment و Hosting"," یک پروژه Full-Stack بود.",[162,629,630],{},"بعد از توسعه و آماده‌سازی پروژه، فرآیند Build نسخه Production، تنظیم Environment Variableها، اجرای سرور و استقرار پروژه روی یک محیط واقعی را تجربه کردم.",[162,632,633,634,637],{},"پروژه در نهایت روی ",[165,635,636],{},"Railway"," مستقر شد و نسخه آنلاین آن در دسترس قرار گرفت.",[173,639,640],{"id":640},"نتیجه",[162,642,643,644,407],{},"سلورا برای من فراتر از یک پروژه فروشگاهی بود؛ این پروژه اولین تجربه کامل من در توسعه یک محصول ",[165,645,83],{},[162,647,648],{},"در این پروژه توانستم دانش فرانت‌اند را در کنار مفاهیم بک‌اند، دیتابیس و زیرساخت قرار دهم و چرخه کامل توسعه یک محصول را تجربه کنم.",[162,650,651,652,655,656,659],{},"از ",[165,653,654],{},"طراحی UI و UX، معماری Atomic Design و توسعه فرانت‌اند"," گرفته تا ",[165,657,658],{},"طراحی API، معماری بک‌اند، اعتبارسنجی، احراز هویت، مدل‌سازی دیتابیس، معماری کش چندلایه، PWA، SEO، تولید خودکار OG Image، بهینه‌سازی Performance، تست، Deployment و Hosting","، تمام این بخش‌ها به‌صورت یکپارچه در یک پروژه واحد پیاده‌سازی شدند.",{"title":30,"searchDepth":661,"depth":661,"links":662},2,[663,664,665,666,667,668,669,670,671,672,673,674,675,676,677,678],{"id":175,"depth":661,"text":176},{"id":191,"depth":661,"text":192},{"id":234,"depth":661,"text":235},{"id":266,"depth":661,"text":267},{"id":294,"depth":661,"text":295},{"id":319,"depth":661,"text":320},{"id":346,"depth":661,"text":347},{"id":399,"depth":661,"text":400},{"id":426,"depth":661,"text":427},{"id":439,"depth":661,"text":440},{"id":500,"depth":661,"text":501},{"id":529,"depth":661,"text":530},{"id":566,"depth":661,"text":567},{"id":602,"depth":661,"text":603},{"id":619,"depth":661,"text":620},{"id":640,"depth":661,"text":640},"md",{},"\u002Fprojects\u002Fsellora-challenges",{"title":154,"description":30},"projects\u002Fsellora-challenges","UnRs6iOnGGuI0Kk-pJcuEDx-shSmV21KtnC2GUUYOJM",1786900461727]