بازگشت

فروشگاه اینترنتی اسمارت شاپ

ReactViteJavaScriptReact RouterRedux ToolkitTailwind CSSReact Hook FormZodDummyJSON APIjsPDFjsPDF-AutoTableLocalStorage
فروشگاه اینترنتی اسمارت شاپ

ShopSmart یک پروژه Front-End فروشگاهی است که بر اساس یک طراحی Figma پیاده‌سازی شده و جریان کامل خرید را شبیه‌سازی می‌کند. کاربران می‌توانند محصولات را جست‌وجو و بر اساس دسته‌بندی، برند و قیمت فیلتر کنند، محصولات را به سبد خرید اضافه کنند، فرم Checkout را تکمیل کنند، سفارش‌های قبلی را مشاهده کنند و فاکتور سفارش را به‌صورت PDF دریافت کنند.

داده محصولات از DummyJSON دریافت می‌شود و اطلاعات سبد خرید و سفارش‌ها در LocalStorage نگهداری می‌شوند. مدیریت State با Redux Toolkit و اعتبارسنجی فرم با React Hook Form و Zod انجام شده است. پروژه همچنین دارای Loading State، Retry، لغو درخواست‌ها و بارگذاری تدریجی محصولات است.