متجر الأطعمة المتخصصةأرشيف

طريق التوابل

متجرٌ راقٍ للتوابل والأطعمة المتخصّصة. مدفوعاتٌ كاملة (Stripe وPayPal وMoyasar)، ومتجرٌ متعدد اللغات (next-intl)، وإدارة منتجاتٍ متقدّمة، وتسويقٌ بالبريد (Resend + React Email)، ورفعٌ للوسائط (UploadThing)، ودليل متاجر عبر Google Maps. مبني بـ Next.js 16 وNeon Postgres وDrizzle ORM.

الأطعمة المتخصّصة تعبر الحدود، وكذلك ينبغي للدفع. «Spiceroad» يدفع بثلاث طرق — Stripe وPayPal وMoyasar — ويتحدّث أكثر من لغة، ويرسل إيصالاته وتحديثات الشحن بنفسه، ويضع كل بائعٍ على الخريطة، فوق حزمة Postgres محكومة الأنواع وبلا خوادم.

ما الذي يحلّه

يفتقر تجار التوابل المتخصّصة إلى متجرٍ احترافي بتسعيرٍ متعدّد العملات وتقديراتٍ للشحن العالمي.
وإدارة المخزون يدويًا تقود إلى البيع الزائد وتأخّر الطلبات.
وبلا بريدٍ تلقائي للتأكيدات والشحن، يُترَك العملاء في حَيرة.
والمشترون موزّعون بين Stripe وPayPal والبوابات المحلية، فلا غنى عن تكاملاتٍ متعددة.
ورفع صور المنتجات بطيء أو يتّكئ على شبكة توصيلٍ خارجية.

الأثر

Multi-payment

Stripe وPayPal والدفع عند الاستلام

Multi-language

مبنيٌّ على next-intl

Email marketing

Resend مع قوالب

البنية

الواجهة الأمامية

Next.js 16React 19TypeScriptTailwind CSSShadcn/UIRecharts

قاعدة البيانات

Neon Postgres (serverless over HTTP)Drizzle ORM 0.45

المصادقة

Neon Auth (Better Auth under the hood)Email + password

المدفوعات

StripePayPalCash on DeliveryMoyasar (planned)

تحميل الملفات

UploadThing v7 (managed uploads + CDN)

البريد

ResendReact Email (template builder)

الخرائط

Google Maps (product location + seller geocoding)

التعريب

next-intl 4 (multi-language product descriptions)

النماذج

React Hook FormZod

التخزين المؤقت

Drizzle query cachingISR for product pages

تدفّق البيانات

التصفح → رئيسية SSR وصفحات منتجات ISR
البحث حسب الفئة / السعر → استعلام Drizzle
الإضافة للسلة → إجراء خادم (public.carts + sessionCartId)
تسجيل الدخول → دمج سلة الجلسة في الحساب
الدفع → Stripe / PayPal → إنشاء الطلب
Webhook الدفع → تحقق + تحديث الحالة
Resend يرسل الإيصال (React Email)
لوحات: سجل الطلبات؛ مبيعات/مخزون المسؤول

القرارات الهندسية

Neon Auth + كوكي sessionCartId

تُحفظ سلة الضيف في حساب المستخدم عند تسجيل الدخول عبر كوكي sessionCartId، فلا تُفقد السلة عند الخروج.

Drizzle ORM (محكوم الأنواع)

يمنع أخطاء الاستعلام وقت التشغيل، بدعم TypeScript كامل لعمليات الترحيل.

مخطّط Neon Auth منفصل

الجدول neon_auth.user (يديره Neon للقراءة فقط) مع جداول التطبيق public.* (يديرها drizzle-kit) يفصلان منطق التطبيق عن المصادقة.

UploadThing لصور المنتجات

يتولّى تغيير الحجم والتحسين والتوصيل عبر CDN دون إدارةٍ لمفاتيح S3.

Resend للبريد المعاملاتي والتسويقي

قوالب React Email مكتوبة بصيغة JSX، محكومة الأنواع وقابلة للتركيب.

بوابات دفعٍ متعددة كخطّ احتياط

Stripe ثم PayPal ثم الدفع عند الاستلام، ولكلٍّ تحقُّقُ Webhook خاص به.

إجراءات خادمٍ للسلة

بلا طبقة REST؛ تُبقي إجراءات خادم Next.js حالة السلة في قاعدة البيانات والجلسة في آنٍ واحد.