SENT Digital Agency
INITIATING SYSTEM...0%
Global Commerce Nexus

توسعه اختصاصی

Global Commerce Nexus

یک پلتفرم فروشگاهی دو‌زبانه سیستمی طراحی‌شده بر پایه معماری مدرن App Router و مدیریت وضعیت توزیع‌شده؛ زیرساختی که محتوای چندزبانه، تجربه خرید و داده‌های کاربر را در یک هسته‌ی واحد، هماهنگ و مقیاس‌پذیر نگه می‌دارد.

VISIT LIVE SITE→

فناوری‌های هسته

Next.jsTypeScriptTailwind CSSi18n (Internationalization)Redux Toolkit

چالش

مسئله فقط چند زبان نبود؛ مسئله یک پلتفرم واحد بود که باید بدون کوچک‌ترین دوپارگی، برای کاربری با زبان راست‌به‌چپ و چپ‌به‌راست یکسان عمل کند. تفاوت ساختاری بین RTL و LTR ، از ترتیب کامپوننت‌ها تا نحوه محاسبه فاصله‌ها و Grid، باعث می‌شود بسیاری از تیم‌ها دو نسخه جدا بسازند.

پالت رنگی پروژه

Deep Blue

#132c6f

Pure White

#FFFFFF

Soft Black

#333333


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

Project Image
Project Image


راه‌حل

رویکرد ما از «زبان» شروع نشد؛ از معماری شروع شد. ساختار مسیر ([lang]) را به‌جای یک سوییچ ساده، به‌عنوان context رندرینگ طراحی کردیم تا Next.js بتواند بر اساس زبان ورودی، مسیرهای جداگانه را با SSR مناسب همان بازار تولید کند؛ بدون حتی یک خط کد تکراری در کامپوننت‌ها.
در لایه وضعیت، Redux Toolkit + Persist را به‌صورت ماژولار بازطراحی کردیم تا state سبد خرید، تنظیمات کاربر و داده‌های حساس، روی تغییر زبان، refresh یا navigation پیش‌بینی‌نشده، از بین نرود. نتیجه این شد که UI می‌تواند جهت را عوض کند، اما حافظه سیستم عوض نمی‌شود. این رفتار پایدار، تجربه خرید را بدون وقفه نگه داشت و مانع drop-off کاربران دو‌زبانه شد.