متجر البقالة — تطبيق تجارة إلكترونية متكامل (Full-Stack)
تفاصيل العمل
# 🛒 متجر البقالة — تطبيق تجارة إلكترونية متكامل (Full-Stack) تطبيق ويب متكامل لمتجر بقالة إلكتروني، يقدر المستخدم من خلاله يتصفح المنتجات حسب الأقسام، يضيفها للسلة، يدفع أونلاين، ويتابع مشترياته. وفي نفس الوقت، الأدمن عنده تحكم كامل في المنتجات من خلال لوحة تحكم مخصصة. ## ✨ المميزات ### 👤 من جهة المستخدم - **تسجيل الدخول** — تسجيل دخول وإنشاء حساب آمن عن طريق **Clerk**. - **Hero Section** — قسم رئيسي جذاب يظهر مباشرة بعد الهيدر. - **ليه تختارنا (Why Choose Us)** — قسم مخصص فيه **6 كاردات** بتوضح ليه العميل يشتري من عندنا. - **أقسام المنتجات** — المنتجات متقسمة على أقسام واضحة: - 🍎 فاكهة - 🥦 خضروات - 🥩 لحوم - 🧃 عصائر - 🥐 معجنات - **قسم المنتجات الأكثر شهرة (Popular Products)** — عرض للمنتجات الأكثر طلبًا. - **إضافة سريعة للسلة** — الضغط على أيقونة السلة الخاصة بأي منتج بتفتح نافذة سريعة فيها: - صورة المنتج ونبذة عنه - السعر - تحديد الكمية - القسم اللي المنتج تابع له - نفس الـ Logic ده متكرر وشغال على **جميع** منتجات الموقع. - **صفحة السلة / مشترياتي** — صفحة يقدر المستخدم من خلالها يشوف كل اللي أضافه في السلة مع **السعر الإجمالي**. - **الدفع الإلكتروني** — عملية دفع آمنة بالفيزا عن طريق **Stripe**. - **إشعارات فورية (Toast)** — رسائل تنبيه فورية (زي الإضافة للسلة، نجاح أو فشل الدفع... إلخ) باستخدام **react-hot-toast**. ### 🛠️ من جهة الأدمن - صلاحية الأدمن يتم التحقق منها عن طريق **Clerk**، وإدارة المدفوعات والمنتجات عن طريق **Stripe**. - الأدمن يقدر: - ➕ يضيف منتجات جديدة - ✏️ يعدّل على المنتجات الموجودة - 🗑️ يحذف أي منتج - تحكم كامل في الأقسام والمنتجات اللي بتظهر للمستخدمين. ## 🧰 التقنيات المستخدمة | الغرض | التقنية | |-----------------------|-----------------------| | الإطار الأساسي | Next.js / React | | تسجيل الدخول | Clerk | | الدفع الإلكتروني | Stripe | | الإشعارات | react-hot-toast | | التنسيق (Styling) | Tailwind CSS | | مكونات الواجهة | HyperUI | ## 🚀 خطوات التشغيل ## 🗺️ تطويرات مستقبلية مقترحة - سجل الطلبات وتتبع حالة الطلب - تقييمات ومراجعات للمنتجات - قائمة المفضلة (Wishlist) - أكواد خصم / كوبونات - إشعارات بريد إلكتروني بعد الدفع ## 📄 الترخيص المشروع متاح للاستخدام الشخصي والتعليمي، وممكن تعمل Fork له وتعدّل عليه براحتك. تم التطوير بـ ❤️ باستخدام Next.js و Clerk و Stripe و Tailwind CSS.
بطاقة العمل
طلب عمل مماثل
