OneStopShop

Onestopshop

تحذير هذا التطبيق هو عمل مستمر ولا ينبغي اعتباره جاهزًا للإنتاج. يستخدم تقنيات جديدة لم تكن مستقرة بعد مثل إجراءات الخادم ورذاذ ORM.

عن

تم تصميم Marketplace عبر الإنترنت باستخدام جهاز توجيه تطبيقات Next.js ، والذي يتيح للمستخدمين شراء المنتجات ، والتسجيل وإدراج منتجاتهم الخاصة للبيع. يمكن للمستخدمين إنشاء ملف تعريف البائع وإدارة المنتجات وجمع الدفع.

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

• جهاز توجيه تطبيق NEXT.JS مع مكونات خادم React
• المسارات المعتادة (مع توجيه متوازي) للعرض السريع للمنتج وإنشاء المنتج الجديد في المسؤول
• إجراءات الخادم للطفرات
• قاعدة بيانات MySQL Planetscale مع رذاذ ORM
• التحميل لتحميل ملفات Typesafe (على سبيل المثال ، صور المنتج)
• مصادقة المستخدم مع كاتب
• تكامل Stripe Connect لمدفوعات السوق (بما في ذلك رسوم المنصات ودفعات البائع)

العرض التوضيحي

لتتجاوز تجربة الخروج ، الخروج برقم بطاقة اختبار مثل 4242 4242 4242 4242 واستخدم أي تاريخ مستقبلي للانتهاء وأي 3 أرقام لـ CVC. لن تتمكن إلا من الخروج بمنتجات من البائعين الذين لديهم حساب شريط متصل بمتجرهم (مثل Tim's Toys). يمكنك أيضًا إنشاء حساب البائع الخاص بك وتوصيله للتجربة الكاملة.

الصفحة الرئيسية

محرر صفحة منتج المسؤول

تشغيل التطبيق

اتبع الخطوات أدناه لتشغيل التطبيق محليًا:

1. إنشاء قاعدة بيانات MySQL.
2. قم بإنشاء ملف .env محلي مع المتغيرات وفقًا لملف .env.example .
3. تشغيل npm install .
4. قم بإنشاء ترحيل باستخدام npx drizzle-kit generate:mysql . هذا ينشئ مجلد جديد يسمى migrations-folder في الجذر الذي يحتوي على استعلامات SQL لإنشاء جداول قاعدة البيانات. تتم مزامنة الترحيل تلقائيًا مع قاعدة البيانات من خلال وظيفة الترحيل في db.ts بدلاً من ذلك ، يمكنك تشغيل استعلامات SQL التي تم إنشاؤها من الترحيل يدويًا من خلال وحدة التحكم PlanetScale وإزالة وظيفة الترحيل في db.ts
5. تشغيل npm run dev لفتح التطبيق في وضع التطوير.

هذا كل شيء. يجب أن تكون قادرًا الآن على الوصول إلى التطبيق على http://localhost:3000 .

ملحوظات

• عند توليد الترحيل لأول مرة باستخدام الرذاذ ، تأكد من أن migrations-folder في الجذر فارغ أو غير موجود.

قصص

تمت إضافة Storybook إلى هذا التطبيق ، ومع ذلك ، لم يتم العمل عليه بنشاط منذ إنشاء التطبيق الأولي. بغض النظر ، يمكن تشغيله باستخدام الأوامر التالية:

1. قم بتشغيل برنامج Tailwind Build Script لإنشاء ملف إخراج لفئات Tailwind (بعد تشغيله وإكماله ، قد تضطر إلى "قتل" المحطة (أي ctrl + c ) لإيقاف العملية إذا لم تتوقف تلقائيًا).

   الأمر: npm run tailwind

2. Run Storybook (سيستخدم هذا ملف إخراج Tailwind الذي تم إنشاؤه في الخطوة السابقة وتشغيله على http://localhost:6006 ).

   الأمر: npm run storybook

استكشاف الأخطاء وإصلاحها

إذا رأيت خطأً يتعلق بجدول غير موجود في PlanetScale (من المحتمل أن يتم إلقاؤه في app/(storefront)/(main)/page.tsx لأن هذا هو الاستخدام الأول لقاعدة البيانات) ، فهذا يرجع إلى عدم وجود قاعدة البيانات. أعد النظر في خطوات "تشغيل التطبيق" أعلاه وتحقق من علامة التبويب "Insights" في PlanetsCale للتحقق من أن استعلامات إنشاء الجدول قد تم تشغيلها.

المساهمة

لا تتردد في توصيل المشكلات والعلاقات العامة للميزات/الإصلاحات الجديدة