سلورا — پروژه فول‌استک فروشگاهی

چالش اصلی

سلورا اولین پروژه‌ای بود که در آن یک محصول را به‌صورت Full-Stack و از ابتدا تا مرحله استقرار نهایی توسعه دادم.

در این پروژه مسئولیت من تنها به توسعه رابط کاربری محدود نبود و تمام بخش‌های اصلی محصول را شخصاً پیاده‌سازی کردم؛ از طراحی UI و UX و معماری فرانت‌اند گرفته تا طراحی API، منطق بک‌اند، اعتبارسنجی، ساختار دیتابیس، سئوی فنی، بهینه‌سازی عملکرد و در نهایت Deployment و Hosting.

این پروژه نقطه عطفی در مسیر یادگیری من بود، زیرا برای اولین بار مفاهیم فرانت‌اند، بک‌اند، دیتابیس و زیرساخت را در قالب یک پروژه واحد و به‌صورت عملی در کنار یکدیگر تجربه کردم.

بهینه‌سازی Performance

یکی از اهداف اصلی پروژه، رسیدن به عملکرد مناسب و تجربه کاربری سریع بود.

برای بررسی عملکرد پروژه از ابزارهایی مانند Lighthouse و PageSpeed Insights استفاده شد و بخش‌های مختلف برنامه به‌صورت مستمر از نظر Performance و کیفیت فنی بررسی شدند.

روی خروجی این ابزارها به‌صورت دقیق کار شد؛ تک‌تک موارد و هشدارهای مطرح‌شده در Lighthouse و PageSpeed بررسی، دسته‌بندی و اولویت‌بندی شدند و برای هرکدام اصلاح لازم در پروژه اعمال شد تا نتیجه نهایی هم از نظر امتیاز و هم از نظر تجربه واقعی کاربر مرتب و قابل قبول باشد.

در فرآیند بهینه‌سازی، موارد مختلفی مانند حجم منابع، نحوه بارگذاری JavaScript و تصاویر، کشینگ، Rendering، زمان پاسخ‌دهی و رفتار صفحات در نظر گرفته شد.

هدف تنها افزایش یک امتیاز عددی نبود؛ بلکه تلاش شد ساختار پروژه به‌گونه‌ای پیاده‌سازی شود که در شرایط واقعی نیز تجربه کاربری مناسبی ارائه دهد.

مشاهده نتایج PageSpeed

معماری فرانت‌اند

فرانت‌اند پروژه با Nuxt.js 4، Vue.js 3 و TypeScript توسعه داده شد و ساختار رابط کاربری بر پایه Atomic Design شکل گرفت.

کامپوننت‌ها از کوچک‌ترین اجزای قابل استفاده مجدد شروع می‌شوند و با ترکیب آن‌ها، کامپوننت‌های پیچیده‌تر و در نهایت بخش‌های مختلف رابط کاربری ساخته می‌شوند.

در کنار ساختار Atomic Design، تلاش شد منطق برنامه از لایه UI جدا نگه داشته شود. منطق‌های قابل استفاده مجدد و رفتارهای مرتبط با داده در لایه‌های جداگانه قرار گرفتند تا کامپوننت‌های رابط کاربری تا حد امکان مستقل، خوانا و قابل استفاده مجدد باقی بمانند.

برای مدیریت وضعیت نیز از Pinia استفاده شد و رابط کاربری با Nuxt UI و Tailwind CSS پیاده‌سازی شد.

معماری بک‌اند

بک‌اند پروژه با استفاده از Nitro و Node.js توسعه داده شد.

در این پروژه برای اولین بار به‌صورت عملی با معماری بک‌اند و چرخه کامل ارتباط بین Frontend، API و Database کار کردم.

طراحی و پیاده‌سازی APIها، منطق سمت سرور، اعتبارسنجی ورودی‌ها، مدیریت خطا، احراز هویت و سایر منطق‌های موردنیاز پروژه به‌صورت مستقل انجام شد.

برای احراز هویت و مدیریت امنیت نیز از ابزارهایی مانند JWT و bcrypt استفاده شد.

این تجربه باعث شد درک عمیق‌تری از نحوه طراحی API، تفکیک مسئولیت‌ها در سمت سرور و ارتباط میان لایه‌های مختلف یک اپلیکیشن Full-Stack پیدا کنم.

معماری و مدل‌سازی دیتابیس

یکی از بخش‌های مهم پروژه، آشنایی عملی با معماری دیتابیس و طراحی مدل‌های داده بود.

در طول توسعه با دیتابیس‌هایی مانند MySQL و SQLite کار کردم و مفاهیمی مانند طراحی جداول، روابط بین داده‌ها، مدل‌سازی، Migration، Seed و نحوه ارتباط لایه بک‌اند با دیتابیس را به‌صورت عملی تجربه کردم.

همچنین با ابزارهایی مانند Prisma و Drizzle برای مدل‌سازی و مدیریت داده‌ها کار شد.

این بخش از پروژه کمک کرد درک بهتری از ارتباط میان ساختار دیتابیس، مدل‌های برنامه و منطق تجاری شکل بگیرد و معماری دیتابیس به‌عنوان بخشی مستقل از معماری کلی پروژه در نظر گرفته شود.

سئوی فنی

سئوی پروژه در چندین لایه پیاده‌سازی شد و تنها به Meta Tagهای ساده محدود نبود.

برای مدیریت Sitemap از @nuxtjs/sitemap استفاده شد و ساختار Multi Sitemap برای پروژه در نظر گرفته شد.

مشاهده Sitemap چندبخشی پروژه

همچنین Schema.org و Robots برای بهبود ساختار اطلاعات و کنترل نحوه دسترسی موتورهای جست‌وجو استفاده شدند.

Web Quality و استانداردهای فنی

در کنار Performance، پروژه از نظر سایر شاخص‌های مهم کیفیت وب نیز مورد توجه قرار گرفت.

تمرکز اصلی روی بهبود و رعایت موارد زیر بود:

• SEO: ساختار مناسب صفحات، Metadata، Sitemap، Schema.org و Open Graph
• Accessibility: توجه به دسترسی‌پذیری عناصر و تعاملات رابط کاربری
• Best Practices: رعایت استانداردهای فنی و الگوهای مناسب توسعه
• Performance: کاهش زمان بارگذاری و بهینه‌سازی منابع
• Agent Browsing: در نظر گرفتن ساختار و اطلاعات قابل فهم برای ابزارها و Agentهای وب
• Availability: تلاش برای حفظ دسترسی‌پذیری مناسب و رفتار پایدار سرویس

این موارد در کنار یکدیگر بررسی شدند تا کیفیت پروژه تنها به ظاهر یا عملکرد یک صفحه محدود نباشد و محصول از دیدگاه‌های مختلف Web Quality نیز وضعیت مناسبی داشته باشد.

تولید خودکار Open Graph Image

یکی از بخش‌های جذاب پروژه، پیاده‌سازی سیستم تولید خودکار Open Graph Image بود.

به‌جای اینکه برای هر صفحه یک تصویر جداگانه در نرم‌افزارهای گرافیکی طراحی و ذخیره شود، یک قالب مشخص برای OG Image تعریف شد.

اطلاعات هر صفحه به‌صورت داده زنده وارد این قالب می‌شود و تصویر Open Graph متناسب با همان صفحه به‌صورت خودکار تولید می‌شود.

به این ترتیب، برای صفحات جدید نیازی به ساخت دستی تصویر وجود ندارد و هر صفحه می‌تواند بر اساس عنوان، محتوا و داده‌های خودش تصویر Open Graph اختصاصی داشته باشد.

این روش علاوه بر کاهش کار دستی، مدیریت OG Imageها را در پروژه‌های دارای صفحات پویا بسیار ساده‌تر و مقیاس‌پذیرتر می‌کند.

طراحی UI و UX

طراحی UI و UX پروژه نیز به‌صورت کامل توسط خودم انجام شد.

ساختار صفحات، جریان‌های کاربری، کامپوننت‌ها و جزئیات بصری با در نظر گرفتن قابلیت استفاده مجدد طراحی شدند و سپس بر اساس معماری Atomic Design در قالب کامپوننت‌های مختلف پیاده‌سازی شدند.

هدف این بود که در کنار ظاهر مناسب، ساختار رابط کاربری نیز منظم، قابل توسعه و قابل نگهداری باشد.

سیستم نوتیفیکیشن

یکی دیگر از بخش‌های مهم پروژه، پیاده‌سازی و مدیریت سیستم Web Push Notification بود.

در این بخش با مفاهیم و فرآیند کامل ارسال نوتیفیکیشن از Backend به Client آشنا شدم و آن را به‌صورت عملی پیاده‌سازی کردم. برای این منظور از Firebase و Web Push در کنار Service Worker استفاده شد.

Service Worker مربوط به دریافت و مدیریت نوتیفیکیشن‌ها در سمت Client راه‌اندازی و پیکربندی شد و ارتباط آن با بخش Backend برای ارسال پیام‌ها برقرار شد.

در سمت Backend و Database نیز ساختار لازم برای مدیریت دستگاه‌ها و Subscriptionها طراحی شد تا بتوان اطلاعات مربوط به دستگاه‌های کاربران را ثبت و مدیریت کرد. این ساختار امکان نگهداری و تحلیل اطلاعاتی مانند:

• دستگاه‌ها و Subscriptionهای فعال کاربران
• ارتباط دستگاه با User
• وضعیت ارسال نوتیفیکیشن‌ها
• تعداد و آمار کلیک‌ها و تعامل کاربران با نوتیفیکیشن
• مدیریت دستگاه‌ها و Subscriptionهای مختلف یک کاربر

را فراهم می‌کرد.

همچنین APIهای موردنیاز برای ثبت، مدیریت و حذف Subscriptionها، ارسال نوتیفیکیشن و دریافت اطلاعات و آمار مرتبط با آن‌ها پیاده‌سازی شدند.

این بخش باعث شد با معماری یک سیستم Notification در وب، چرخه کامل ثبت دستگاه → ایجاد Subscription → ذخیره در Database → ارسال از Backend → دریافت توسط Service Worker → تعامل کاربر با Notification → ثبت آمار تعامل به‌صورت عملی آشنا شوم.

Progressive Web App (PWA)

یکی از بخش‌های مهم پروژه، پیاده‌سازی و بهینه‌سازی Progressive Web App (PWA) بود.

در این بخش علاوه بر قابلیت نصب پروژه به‌عنوان یک اپلیکیشن، تنظیمات مربوط به تجربه نصب و رفتار اپلیکیشن نیز مورد توجه قرار گرفت.

برای نمونه، Screenshotهای نمایش داده‌شده هنگام نصب PWA تنظیم شدند تا کاربر هنگام نصب با پیش‌نمایش مناسبی از محیط اپلیکیشن مواجه شود. این قابلیت را می‌توان مستقیماً با استفاده از گزینه نصب پروژه تست کرد.

همچنین App Shortcutها برای دسترسی سریع به بخش‌های مهم برنامه پیاده‌سازی شدند تا کاربر بتواند پس از نصب، مستقیماً از منوی اپلیکیشن به مسیرهای مشخصی دسترسی داشته باشد.

در کنار این موارد، تنظیمات مربوط به Manifest، Service Worker و سایر پیکربندی‌های PWA نیز انجام شد تا پروژه تجربه‌ای نزدیک‌تر به یک اپلیکیشن نصب‌شده ارائه دهد.

معماری کش و مدیریت Cache

برای بهبود عملکرد و کاهش درخواست‌های غیرضروری، سیستم کش در چندین لایه طراحی شد.

در سمت Client از ترکیبی از Service Worker، مدیریت State و Cache کردن پاسخ‌ها استفاده شد تا داده‌ها در صورت امکان از نزدیک‌ترین لایه به کاربر در دسترس قرار بگیرند.

همچنین تنظیمات مربوط به Response Headerها و Cache-Control انجام شد تا مرورگر و لایه‌های مختلف شبکه بتوانند پاسخ‌های قابل کش را به‌شکل صحیح مدیریت کنند.

در سمت Backend نیز از Redis و قابلیت‌های Server-side Caching در Nitro استفاده شد. به این ترتیب، داده‌هایی که نیاز به محاسبه یا دریافت مجدد نداشتند می‌توانستند در لایه سرور کش شوند و از ایجاد درخواست‌های تکراری و پردازش غیرضروری جلوگیری شود.

این معماری چندلایه باعث شد کش تنها به مرورگر محدود نباشد و در بخش‌های مختلف مسیر درخواست، از Client تا Server، مورد استفاده قرار گیرد.

احراز هویت و مدیریت Session

یکی دیگر از بخش‌های مهم پروژه، طراحی و پیاده‌سازی سیستم کامل Authentication و مدیریت Session بود.

در این بخش فرآیند ورود و احراز هویت کاربران، ایجاد و مدیریت Tokenها، نگهداری Session و کنترل دسترسی به بخش‌های مختلف سیستم به‌صورت کامل پیاده‌سازی شد.

برای مدیریت Authentication از JWT استفاده شد و چرخه کامل Token شامل ایجاد، اعتبارسنجی، انقضا و Refresh Token طراحی و پیاده‌سازی شد. همچنین منطق مربوط به تمدید Session در زمان نیاز و جلوگیری از ایجاد Sessionهای نامعتبر در نظر گرفته شد.

در سمت Database نیز جداول و روابط موردنیاز برای مدیریت کاربران، Sessionها، Tokenها و اطلاعات مرتبط با آن‌ها طراحی و مدیریت شدند. این ساختار امکان مدیریت چند Session برای یک کاربر، کنترل وضعیت Sessionها و مدیریت چرخه عمر Tokenها را فراهم می‌کرد.

APIهای موردنیاز برای ورود و خروج کاربران، ایجاد Session، Refresh کردن Token، اعتبارسنجی کاربر و مدیریت Sessionها نیز در Backend پیاده‌سازی شدند.

در نهایت، احراز هویت به‌صورت یکپارچه بین Client، API، Database و Session Management پیاده‌سازی شد تا فرآیند ورود کاربر از ایجاد Token و Session تا تمدید و خروج از حساب به‌صورت کنترل‌شده انجام شود.

تست و کیفیت کد

برای تست بخش‌های مختلف پروژه از ابزارهایی مانند Vitest و Playwright استفاده شد.

Vitest برای تست‌های واحد و تست‌های مرتبط با Nuxt و Playwright برای تست‌های End-to-End در نظر گرفته شد.

همچنین TypeScript، ESLint و ابزارهای اکوسیستم Nuxt برای افزایش کیفیت، صحت و maintainability کد مورد استفاده قرار گرفتند.

Deployment و Hosting

یکی از مهم‌ترین تجربیات این پروژه، آشنایی عملی با فرآیند Build، Deployment و Hosting یک پروژه Full-Stack بود.

بعد از توسعه و آماده‌سازی پروژه، فرآیند Build نسخه Production، تنظیم Environment Variableها، اجرای سرور و استقرار پروژه روی یک محیط واقعی را تجربه کردم.

پروژه در نهایت روی Railway مستقر شد و نسخه آنلاین آن در دسترس قرار گرفت.

نتیجه

سلورا برای من فراتر از یک پروژه فروشگاهی بود؛ این پروژه اولین تجربه کامل من در توسعه یک محصول Full-Stack بود.

در این پروژه توانستم دانش فرانت‌اند را در کنار مفاهیم بک‌اند، دیتابیس و زیرساخت قرار دهم و چرخه کامل توسعه یک محصول را تجربه کنم.

از طراحی UI و UX، معماری Atomic Design و توسعه فرانت‌اند گرفته تا طراحی API، معماری بک‌اند، اعتبارسنجی، احراز هویت، مدل‌سازی دیتابیس، معماری کش چندلایه، PWA، SEO، تولید خودکار OG Image، بهینه‌سازی Performance، تست، Deployment و Hosting، تمام این بخش‌ها به‌صورت یکپارچه در یک پروژه واحد پیاده‌سازی شدند.