next e commerce

موقع التجارة الإلكترونية

العرض التوضيحي: https://next-e-commerce-example.vercel.app/

مثال على الويب للتجارة الإلكترونية تم تصميمه باستخدام Next.js الذي صنعته في أسبوع واحد كتحدي ذاتي. هناك بعض المشكلات التي سأتعامل معها لاحقًا. باستخدام Firebase كخلفية.

اتصل بي · الإبلاغ عن خطأ · طلب ميزة

جدول المحتويات

• حول المشروع
  • بنيت مع
• لقطات الشاشة
  • الصفحة الرئيسية (الأخبار في)
  • فئات
  • منتج
  • عربة
  • حساب
• ابدء
  • المتطلبات الأساسية
  • تثبيت
• القضايا / خطط الميزات
• المساهمة
• الأسئلة والأجوبة
• رخصة
• اتصال

حول المشروع

رأيت تصميم واجهة المستخدم على Dribbble من قبل Anton Mikhaltsov. وأردت رمز هذا التصميم. لذلك قررت أن أجعله موقعًا كاملاً يعمل مع NextJs ولكن في أسبوع واحد فقط كتحدي نفسي. بعض المشكلات لا تزال موجودة لكنني سأتحقق منها لاحقًا.

• أزرار التصفية والفرز لا يعمل بعد.
• الموقع لا يستجيب ٪ 100 بسبب الوقت لم يكن كافيًا. أنا أعمل على ذلك حاليا. الآن ، إنه مستجيب.
• يمكن أن تكون وظائف Firebase أفضل
• الصفحة الرئيسية (الأخبار في) البطاقات لا تحتوي على إعادة توجيه. هم مجرد أصحاب نائبة.

بنيت مع

• رد فعل
• NextJS
• Firebase
• رد فعل هوك رد الفعل
• تاريخ FNS
• ساس

لقطات الشاشة

الأخبار في

• البطاقات ليس لها روابط وهي ثابتة ، فهي مجرد أصحاب نائبة.

فئات

منتج

عربة

حساب

ابدء

المتطلبات الأساسية

• الإصدار Node.js 10.13 أو أحدث
• git (اعتدت 2.20.1)

تثبيت

1. تحتاج إلى إنشاء مشروع Firebase

2. استنساخ الريبو وقم بتغيير الدليل

git clone https://github.com/anilsenay/next-e-commerce.git
cd next-e-commerce

3. تثبيت حزم NPM

npm install

4. قم بإنشاء ملف .env.local على مجلد الجذر (التجارة التالية) مع هذا المحتوى. ضع مفاتيح Firebase.

 NEXT_PUBLIC_FIREBASE_API_KEY = your-firebase-api-key
NEXT_PUBLIC_FIREBASE_PROJECT_ID = your-firebase-project-id
NEXT_PUBLIC_FIREBASE_APP_ID = your-firebase-app-id

5. تشغيل في وضع التطوير

npm run dev

القضايا - الخطط المستقبلية

• تصفية الأزرار وفرز الأزرار
• تحسين وظائف استعلام Firestore
• في صفحة العربة ، لا يعمل زر تقليل العنصر
• سيكون موقع الويب ٪ 100 مستجيب
• استبدل بعض علامات HTML بعلامات دلالية

المساهمة

المساهمات هي التي تجعل مجتمع المصدر المفتوح مكانًا رائعًا للتعلم وإلهام وإنشاء. أي مساهمات تقدمها موضع تقدير كبير .

1. شوكة المشروع
2. قم بإنشاء فرع الميزات الخاص بك ( git checkout -b feature/AmazingFeature )
3. ارتكب التغييرات الخاصة بك ( git commit -m 'Add some AmazingFeature' )
4. ادفع إلى الفرع ( git push origin feature/AmazingFeature )
5. افتح طلب سحب

سؤال وجواب

• سؤال: لقد قمت بإنشاء مشروع Firebase لكنني لست على دراية به. ماذا علي أن أفعل بعد ذلك؟ الإجابة : يمكنك الاتصال بي حول تعيين مشروع Firebase الخاص بك ، وسأساعدك بكل سرور.

• سؤال: لقد قمت بإنشاء مشروع Firebase لكن ليس لدي بنية قاعدة بيانات. ماذا علي أن أفعل بعد ذلك؟ الإجابة : الرجاء الاتصال بي للحصول على بنية قاعدة البيانات التي قمت بإنشائها.

• سؤال: لماذا لم تشارك بنية قاعدة البيانات الخاصة بك؟ الإجابة : أريد فقط أن أعرف ما إذا كان شخص ما مصلحة في هذا المشروع: د

• سؤال: كيف يمكنني المساهمة؟ الإجابة : يجعلني سعيدًا حتى لو قمت بدور هذا المشروع. بالنسبة إلى Code يساهم ، يمكنك تغطية الريبو وفتح طلب سحب بعد التغييرات الخاصة بك. أي ردود فعل مهمة أيضًا بالنسبة لي. يمكنك فتح مشكلة أو إرسال رسالة لي.

• سؤال: هل قمت بتصميم واجهة المستخدم؟ الإجابة : لا ، لم أتصميم في الواقع. لقد وجدت تصميم الصفحة الرئيسية على Dribbble من قبل Anton Mikhaltsov. باستثناء الصفحة الرئيسية ، خيارات واجهة المستخدم الأخرى هي لي. على الرغم من أنني صنعت هذا الموقع في وقت محدود ، لم أفكر في UI/UX كثيرًا. لذلك يمكنك أيضًا ملاحظاتني حول التصميم.

رخصة

موزعة تحت رخصة GPL. انظر LICENSE لمزيد من المعلومات.

اتصال

anilsenay

رابط المشروع: https://github.com/anilsenay/next-e-commerce