متجر بن مسعود
منصة تجارة إلكترونية متكاملة بـ API ولوحة إدارة خاصة
متجر إلكتروني عربي أولًا لشركة بن مسعود للتجارة العامة، مع NestJS API وقاعدة PostgreSQL ولوحة إدارة للطلبات والمخزون والكوبونات ومناطق التوصيل وأدوار الموظفين والتقارير.
زيارة الموقعbenmasood.com
- نقطة API
- ~195
- نموذج بيانات
- 46
- صفحة إدارة
- 23
- سطر برمجي
- ~48k
الشاشات
الصفحة الرئيسية للمتجر مع بانر المنتج المميز
صفحة المنتج مع معرض الصور والسعر وزر الإضافة للسلة
واجهة المتجر على الجوال مع بانر العروض وشريط التنقل السفلي
المشكلة / الحل
المشكلة
البيع عبر وسائل التواصل ينجح حتى تصبح الطلبات والمخزون والتوصيل مسؤولية أشخاص لكل منهم جدوله الخاص. احتاجت الشركة متجرًا تملكه، ولوحة إدارة تشغّله بها.
- الطلبات تصل من عدة قنوات بلا قائمة واحدة.
- مستويات المخزون ومتغيرات المنتجات تُتابع يدويًا.
- أسعار التوصيل تختلف حسب المحافظة والمنطقة.
- الموظفون يحتاجون صلاحيات مختلفة على الطلبات والمنتجات والتقارير.
الحل
واجهة متجر ولوحة إدارة فوق API مخصص.
- كتالوج منتجات بمتغيرات ومخزون وتقييمات وأسئلة شائعة وصفحات محتوى.
- سلة ودفع وكوبونات ومناطق توصيل حسب المحافظة.
- حسابات عملاء بتسجيل دخول Google وإشعارات ويب فورية.
- لوحة إدارة للطلبات والمنتجات والمخزون والموظفين والأدوار والتقارير وسجلات التدقيق.
- العربية افتراضيًا، والإنجليزية عند الطلب.
الهيكلة
الهيكلة
NestJS REST API مع Prisma فوق PostgreSQL، تستخدمه واجهة المتجر ولوحة الإدارة المبنيتان بـ Next.js.
المتجر والإدارة
- Next.js 15
- TanStack Query
- next-intl مع RTL
الـ API
- 27 متحكمًا
- JWT مع رموز تحديث
- Swagger / OpenAPI
البيانات
- PostgreSQL
- Prisma بـ 46 نموذجًا
- Redis
النشر
- Vercel
- Render
- Docker وnginx
- GitHub Actions
الهندسة
قرارات هندسية
لوحة إدارة المتجر يستخدمها طوال اليوم موظفون بمهام مختلفة، فمعظم الهندسة هنا عن من يستطيع فعل ماذا، ومعرفة من فعله.
- أدوار وسجل تدقيق
- صلاحيات حسب الدور تحمي كل إجراء إداري، ومعترض يسجّل من غيّر ماذا.
- جلسات آمنة
- رموز وصول قصيرة العمر مع رموز تحديث طويلة الأمد، وتشفير كلمات المرور بـ Argon2، وترويسات Helmet، وتحديد معدل الطلبات.
- مخطط يطابق العمل
- 46 نموذج Prisma للمتغيرات والمخزون والسلال والطلبات والكوبونات ومناطق التوصيل والمحتوى.
- رؤية واضحة في الإنتاج
- فحوصات صحة، وتسجيل منظم، وتوثيق Swagger لكل نقطة.
- مختبر قبل النشر
- GitHub Actions يشغّل الفحص والتحقق من الأنواع واختبارات الوحدة مع التغطية والترحيلات واختبارات طرف لطرف.
- متجر قابل للتثبيت
- Service worker يجعل المتجر تطبيق PWA مع إشعارات فورية لتحديثات الطلبات.
التقنيات
الواجهة
- Next.js 15
- React 19
- TypeScript
- Tailwind CSS
- Radix UI
- TanStack Query
- Zustand
الخلفية
- NestJS 10
- Prisma 6
- Passport JWT
- Swagger
البيانات
- PostgreSQL
- Redis
الخدمات
- Cloudinary
- Resend
- Web Push
النشر
- Vercel
- Render
- Docker
- GitHub Actions
النتيجة
أين وصل
المتجر منشور على benmasood.com.
- الطلبات والمخزون والتوصيل تُدار من لوحة إدارة واحدة.
- كل إجراء إداري يُفحص بالصلاحيات ويُسجَّل.
- الـ API موثّق ومغطى باختبارات الوحدة وطرف لطرف.
تحتاج شيئًا مثل هذا؟
أخبرني عن العملية التي تريد تنظيمها، وسأحوّلها إلى نظام واضح قبل كتابة أي سطر برمجي.
لنتحدث