دراسة الحالةVercel - Production

PharmaFlow | إنشاء متجر إلكتروني صيدلي

حل Pharmacy SaaS جاهز للإنتاج لإنشاء متاجر إلكترونية للصيدليات، يدعم العربية والإنجليزية مع نظام إدارة متكامل وبرمجة عالية الأداء.

PharmaFlow | إنشاء متجر إلكتروني صيدلي

التقنيات الأساسية

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS

الأداء

  • Server Components لتقليل JavaScript المرسل للعميل.
  • Next/Image مع Cloudinary لصور responsive محسنة.
  • تقسيم الكود حسب الصفحات والأقسام التفاعلية.
  • استعلامات محسنة لعرض المنتجات والطلبات.
  • تحميل كسول للصور والعناصر غير الحرجة.

الأمان

  • نشر جاهز للإنتاج
  • حماية متغيرات البيئة

الميزات الرئيسية

دعم i18n متقدم مع RTL/LTR للغتين العربية والإنجليزية.

تطبيق PWA قابل للتثبيت على iOS وAndroid مع إمكانيات offline.

توسيع كتالوج المنتجات باستخدام fuzzy matching ومصادر بيانات متعددة.

إشعارات لحظية عبر Web Push API للطلبات والاستشارات.

Dashboard إداري آمن لتتبع الطلبات والمخزون.

واجهة مراجعة وصفات رقمية للصيادلة.

Pharma Wallet لإدارة أرباح الصيدلية.

تحسين صور متقدم عبر Cloudinary.

تصفية ذكية حسب السعر والشكل والتوفر مع بحث fuzzy.

قناة استشارات رقمية بين العميل والصيدلي.

نظام Authentication آمن باستخدام NextAuth.js v5.

Middleware أمان يتضمن CSP وHSTS وRate Limiting.

Metadata وSEO ديناميكي لظهور أفضل في محركات البحث.

واجهة mobile-first responsive باستخدام Tailwind CSS.

Scripts خادمية لاستيراد كتالوجات ضخمة.

إدارة مخزون لحظية مع تنبيهات انخفاض الكمية.

بنية المشروع

src/
├── app/                 # Localized Next.js 15 App Router
│   ├── [locale]/        # Bilingual Routes (Home, Products, Dashboards, Cart, Checkout)
│   ├── api/             # API Route Handlers (Orders, Admin, Auth, Notifications)
│   ├── manifest.ts      # PWA Configuration
│   └── globals.css       # Tailwind 4 global styles
├── components/          # Reusable UI architecture
│   ├── ui/              # Base UI primitive components
│   ├── layout/          # Navbar, Footer and Wrapper components
│   ├── admin/           # Specialized Admin Dashboard components
│   ├── products/        # Catalog and product-specific components
│   └── home/            # Homepage-specific sections
├── lib/                 # Shared logic and back-end utilities
│   ├── db/              # Mongoose models and database connection
│   ├── validations/      # Zod schema definitions
│   └── push/            # Web-push notification logic
├── scripts/             # Data enrichment and catalog automation scripts
└── messages/            # AR/EN i18n dictionary files
public/                  # الأصول الثابتة and PWA icons
└── screenshots/         # Production UI screenshots

استراتيجيات التطوير

  • إثراء بيانات هجين بدمج مصادر متعددة عبر fuzzy matching.
  • إدارة دورة حياة PWA للوصول offline والتحديث بالخلفية.
  • بنية Dashboard تفصل بيانات الإدارة عن تجربة المستخدم.
  • Route Handlers آمنة لعمليات الطلبات والاستشارات.
  • تحسين صور يعتمد على Cloudinary وNext/Image.
  • تجربة بحث وتصفية قابلة للتوسع للكتالوجات الكبيرة.
  • بنية MongoDB/Mongoose واضحة للنمذجة والتحقق.

واجهة المستخدم

PharmaFlow | إنشاء متجر إلكتروني صيدلي لقطة شاشة 1
PharmaFlow | إنشاء متجر إلكتروني صيدلي لقطة شاشة 2
PharmaFlow | إنشاء متجر إلكتروني صيدلي لقطة شاشة 3
PharmaFlow | إنشاء متجر إلكتروني صيدلي لقطة شاشة 4
PharmaFlow | إنشاء متجر إلكتروني صيدلي لقطة شاشة 5

مهتم بهذا المشروع؟

أنا متاح لفرص جديدة وتعاونات احترافية. دعنا نبني شيئا مميزا معا.

تواصل معي
Mostafa Abdellraheem | Full-Stack Engineer & AI Automation Specialist