فروشگاه آنلاین با بخش کاربری، پروفایل کاربر و پنل ادمین
این پروژه یک اپلیکیشن فروشگاهی فولاستک (Production-ready E-commerce Application) است که شامل بخش کاربری، پروفایل کاربر و پنل مدیریتی مجزا میباشد. یک داشبورد تحلیلی پیشرفته (Advanced Analytics Dashboard) نیز به پنل ادمین اضافه شده که شامل تحلیل درآمد، رشد کاربران، پرفروشترین محصولات، سهم فروش دستهبندیها و قیف تبدیل در بازههای زمانی مختلف است. معماری پروژه شامل یک بکاند مبتنی بر Node.js و Express و یک فرانتاند توسعهیافته با Next.js است. فرانتاند پروژه با Next.js پیادهسازی شده و از طریق RESTful API با بکاند در ارتباط است. سیستم احراز هویت مبتنی بر JWT و OTP در بکاند پیادهسازی شده و دسترسی به پنل ادمین بر اساس نقش کاربر (ADMIN / SUPER_ADMIN) کنترل میشود. تمرکز اصلی در توسعه فرانتاند این پروژه بر مدیریت state سرور، هماهنگی پایدار با APIها، کنترل دسترسی در سطح رابط کاربری، بهینهسازی تجربه خرید و پایداری در سناریوهای پیچیده مانند سبد خرید و پرداخت بوده است.
Front-End Developer (Next.js / React) مسئول طراحی معماری فرانتاند، پیادهسازی کامل رابط کاربری، اتصال به APIهای بکاند، مدیریت state سرور، توسعه پنل مدیریتی، کنترل دسترسی در سطح UI، و بهینهسازی عملکرد سمت کلاینت. پیادهسازی بکاند (API، دیتابیس، احراز هویت، منطق پرداخت و مدیریت موجودی) توسط توسعهدهنده بکاند انجام شده و تمرکز من بهصورت کامل بر معماری کلاینت و تعامل پایدار و استاندارد با APIها بوده است.
بهجای مدیریت دادهها در state محلی، از TanStack Query برای کشینگ، مدیریت loading/error و invalidate هوشمند لیستها استفاده شد تا هماهنگی بین کلاینت و سرور پایدار بماند.
queryKeys بهصورت ساختاریافته طراحی شدند (products، adminProducts، product(id)، cart و ...) تا کشها قابل پیشبینی باشند و invalidate بهصورت هدفمند انجام شود.
در بخش Analytics، queryKeyها بر اساس پارامترهای startDate، endDate و groupBy طراحی شدند تا کش هر نمودار مستقل بوده و با تغییر فیلتر، دادهها بهصورت هدفمند refetch شوند بدون اینکه سایر بخشها تحت تأثیر قرار گیرند.
Axios با withCredentials: true پیکربندی شد تا توکنها از طریق cookie در درخواستهای محافظتشده ارسال شوند و تجربه کاربر در مسیرهای امن پایدار بماند.
هوکهای اختصاصی برای هر دامنه (useProducts، useCart، useCoupons، useCategories، useAuth و ...) پیادهسازی شد تا کامپوننتها خواناتر و قابل نگهداری باشند.
این پروژه نشان میدهد توانایی من فراتر از پیادهسازی رابط کاربری ساده بوده و شامل طراحی معماری فرانتاند برای یک سیستم فروشگاهی واقعی و Production-Ready است. مدیریت سناریوهای پیچیدهای مانند سبد خرید، کوپن، پرداخت و کنترل دسترسی مبتنی بر نقش، بیانگر تسلط من بر هماهنگی پایدار کلاینت با APIها و مدیریت state سرور است. افزودن لایه تحلیل داده و توسعه داشبورد تحلیلی مبتنی بر دادههای واقعی فروش، این سیستم را از یک پنل CRUD مدیریتی به یک پلتفرم دادهمحور ارتقا داده است و توانایی من را در طراحی فرانتاندهای مقیاسپذیر، بهینه و همسو با نیازهای تحلیلی کسبوکار بهخوبی نشان میدهد.