متجر قهوة إلكترونيمكتمل
خُلّة لتجارة القهوة
متجر قهوة إلكتروني رشيق مبني بـ Next.js 16 وv0.app، يعرض المنتجات عبر كتالوجٍ نظيف. تبعيات خلفية قليلة، منشور على Vercel.
لا يحتاج المقهى متجرًا ضخمًا ليبيع بُنّه. هذا المتجر يُبقي الكتالوج مركّزًا والخلفية شبه معدومة، مصمَّمٌ ومُزامَنٌ عبر v0.app كي يتغيّر مظهره بسرعة تغيُّر القائمة.
ما الذي يحلّه
- يريد المقهى متجرًا بسيطًا بهويته يعرض منتجاته ويجذب العملاء.
- منصّات التجارة الكاملة أثقل من حاجة مقهًى صغير بقائمةٍ قصيرة.
- ولا وسيلة مدمجة تتيح للعاملين تحديث عروض اليوم والمخزون.
الأثر
Simple storefront
كتالوج منتجات مركّز
v0.app-driven
واجهة تُزامَن تلقائيًا
البنية
الواجهة الأمامية
Next.js 16 App RouterReact 19TypeScriptTailwind CSS 4Radix UI
التنسيق
Embla Carousel (product images)date-fns (timestamps)
النماذج
React Hook FormZod
الرسوم
Recharts
الخلفية
Vercel Serverless (v0.app synced — no external database)
إدارة الحالة
Form state only; no cart or persistence
تدفّق البيانات
- الصفحة الرئيسية تعرض منتجات القهوة (مُضمَّنة / JSON)
- النقر على المنتج → التفاصيل ([slug])
- متجر للاكتشاف (بلا سلة بعد)
قابل للتوسعة بـ Stripe / PayPal لاحقًا
القرارات الهندسية
واجهة يقودها v0.app
مُولَّدة بـ v0 ومُزامَنة تلقائيًا مع GitHub، فهي مثالية لتكرارات التصميم السريعة دون عبء الكود.
بلا قاعدة بيانات
المنتجات مُضمَّنة في الكود أو تُجلب من JSON بسيط، وهو ما يكفي لكتالوجٍ صغير.
توليد ثابت (SSG) حيثما أمكن
تُصيَّر صفحات المنتجات مسبقًا عند النشر، فتفتح بسرعة.
معرض الصور
