E-Commerce Website

Fresh Cart هو مشروع واجهة متجر إلكتروني (Frontend) مبني بـ React 18 وVite ويقدم تجربة تسوق كاملة بداية من تسجيل المستخدم وحتى إتمام الطلب.

أهم الوظائف داخل المشروع:

Authentication

تسجيل حساب جديد + تسجيل دخول

حفظ التوكن في localStorage

حماية الصفحات باستخدام ProtectRoute (لا يمكن الوصول للصفحات بدون تسجيل)

صفحات استرجاع كلمة المرور:

ForgetPassword

VerifyResetCode

ResetPassword

Products / Browsing

صفحة منتجات + صفحة تفاصيل المنتج ProductDetails

صفحات تصنيفات CategoryPage + SubCategories

صفحة البراندات Brands

Cart System

إضافة منتج للسلة

تعديل الكمية (+ / -)

حذف منتج من السلة

تفريغ السلة بالكامل

عرض إجمالي السعر totalCartPrice

Wishlist

إضافة/حذف منتجات من قائمة المفضلة

إمكانية إضافة المنتج من الـ Wishlist إلى الـ Cart مباشرة

Orders / Checkout

تنفيذ طلب أونلاين عبر checkout-session

تنفيذ طلب كاش (Cash on delivery)

صفحة لعرض الطلبات Orders

التقنيات المستخدمة:

React + Vite

React Router DOM للتنقل بين الصفحات

Axios للتعامل مع الـ API

TanStack React Query لتحسين الـ fetching والكاش

Formik + Yup لعمل Forms وValidation

TailwindCSS + MUI لواجهة متجاوبة وحديثة

react-hot-toast للتنبيهات

framer-motion للحركات/الأنيميشن

slick-carousel / react-slick للسلايدر

مصدر الـ API المستخدم داخل المشروع:

https://ecommerce.routemi... (تسجيل/دخول/سلة/ويش ليست/طلبات/Checkout)

عنوان مقترح للمشروع على مستقل

Fresh Cart | واجهة متجر إلكتروني React (Auth + Cart + Wishlist + Checkout)

مهارات (Tags) تقترحيها في مستقل

React.js

Vite

JavaScript

API Integration

Axios

React Query

Tailwind CSS

Material UI

Formik / Yup

Responsive Design