Please create a mobile app based on below name and description. The app should be designed with mobile-first principles, optimized for responsive for mobile devices.
Name: Nexfi Description: "Nexfi هو سوق لامركزي لمجتمع Pi Network. يتيح للرواد شراء وبيع المنتجات والخدمات بأمان باستخدام عملة Pi. يتميز بواجهة جذابة، مصادقة Pi SDK، ومعاملات دفع سلسة. يعزز فائدة Pi ويحمي خصوصية المستخدم."
I'll create a mobile-first marketplace app for Nexfi, the Pi Network decentralized marketplace. This will include key screens like home, product listings, user profiles, and authentication.
I've created a comprehensive mobile-first marketplace app for Nexfi with the following key features:
The app includes secure Pi cryptocurrency transactions, user verification systems, and a marketplace that enhances Pi utility while protecting user privacy, exactly as described in your requirements.
تعليمات متكاملة لتطوير تطبيق Nexfi على Pi Network1. المواصفات الأساسيةالتصميم العامنظام الألوان:الأساسي: #3B0B7D (بنفسجي داكن)الثانوي: #00F0A0 (أخضر زمردي)المحايد: #FFFFFF (أبيض)الخلفيات: #F8F9FA (رمادي فاتح)الطباعة:العناوين: خط Poppins عريضالنصوص: خط Open Sans عاديأحجام الخطوط: متدرجة حسب الأهميةالتجاوب:دعم جميع أحجام الشاشات من 320px إلى 1920pxاختبار على 3 أحجام أساسية (هاتف، لوحي، سطح مكتب)2. الواجهات الرئيسيةأ. الشاشة الرئيسية1. الشريط العلويالتكوين:اليمين: شعار "Nexfi" + أيقونة متجر (لون بنفسجي)اليسار:أيقونة سلة (مع شارة عدد المنتجات)زر مصادقة Pi (يعرض صورة مصغرة عند تسجيل الدخول)التصميم:ارتفاع: 60pxظل: 0 2px 5px rgba(0,0,0,0.1)2. شريط البحثالخصائص:مكان: أسفل الشريط العلوي مباشرةنص مساعد: "ابحث عن منتجات أو خدمات..."أيقونة بحث على اليسارزوايا مستديرة: 20px3. بطاقة الرصيدالمحتوى:رصيد Pi (حجم كبير)نسبة التغير اليومي (لون أخضر إذا موجب)القيمة بالدولارالتصميم:تدرج لوني من #3B0B7D إلى #6A1B9Aزوايا مستديرة: 12pxظل: 0 4px 12px rgba(59,11,125,0.15)4. قسم الفئاتالتخطيط:شبكة 3 أعمدة على الهواتفمسافة بين العناصر: 15pxبطاقة الفئة:أيقونة + اسم الفئةعدد المنتجاتخلفية بيضاء بظل خفيف5. قسم المنتجاتالتنسيق:شبكة عمودين على الهواتفبطاقة تحتوي على:صورة المنتج (نسبة 1:1)اسم وتقييم المنتجسعر Pi (باللون الأخضر)زر "أضف للسلة"ب. صفحة تفاصيل المنتجالمكونات:معرض صور المنتجقسم المعلومات (الاسم، الوصف، المواصفات)قسم السعر والكميةزر "إضافة للسلة" كبير3. إدارة البياناتأ. هيكل Firestoreمجموعة "products":{
name: "string",
description: "string",
price: "number",
images: ["string"],
categoryId: "string",
rating: "number",
reviewCount: "number",
createdAt: "timestamp"
}
مجموعة "categories":{
name: "string",
icon: "string",
productCount: "number"
}
ب. وظائف البياناتجلب المنتجات:فلترة حسب الفئةترتيب حسب (الأحدث، الأعلى تقييمًا)البحث:بحث نصي في الاسم والوصفنتائج في الوقت الحقيقيسلة التسوق:تخزين محلي حتى تسجيل الدخولمزامنة مع Firestore بعد المصادقة4. تكامل Pi Networkأ. مصادقة المستخدمالتدفق:نقر المستخدم على "تسجيل الدخول"فتح نافذة مصادقة Piالحصول على:معرف المستخدمعنوان المحفظةاسم المستخدم (إذا متاح)ب. معاملات الدفعخطوات التنفيذ:التحقق من رصيد المستخدمإنشاء طلب دفع عبر Pi SDKانتظار تأكيد المعاملةتحديث حالة الطلبحماية الدفع:التحقق من صحة المعاملة على السلسلةتسجيل كامل تفاصيل المعاملة5. إدارة التطبيقأ. دعم اللغاتاللغات المدعومة:العربية (الافتراضية)الإنجليزيةآلية التبديل:زر في القائمة الرئيسيةحفظ التفضيل محليًاب. لوحة التحكمالوظائف:إدارة المنتجات (إضافة/تعديل/حذف)إدارة الفئاتعرض الإحصائياتالوصول:مسموح فقط للمستخدمين المصرح لهمالتحقق من الصلاحية قبل كل عملية6. معايير الجودةأ. الأداءالأهداف:تحميل الصفحة الرئيسية < 2 ثانيةنتائج البحث < 300 مللي ثانيةالتمرير السلس لـ 100+ منتجب. الأمانإجراءات الحماية:التحقق من الصلاحيات على كل عمليةتشفير البيانات الحساسةتحديثات أمنية دورية7. خطة التنفيذالمرحلة 1: الهيكل الأساسي (أسبوع 1)واجهات المستخدم الرئيسيةإعداد Firestoreالمرحلة 2: الوظائف الأساسية (أسبوع 2-3)البحث والتصفيةسلة التسوقنظام التقييماتالمرحلة 3: التكامل (أسبوع 4)مصادقة Piمعاملات الدفعالمرحلة 4: التحسينات (أسبوع 5)دعم اللغاتلوحة التحكماختبارات الأداء8. نصائح التنفيذإدارة الحالة:استخدام Context API أو Reduxتخزين محلي للحالة المهمةتحميل الكسول:تقسيم الشيفرة (Code Splitting)تحميل متدرج للصوراختبار المستخدم:جمع الملاحظات المبكرةالتكرار حسب النتائج
سأقوم بتحديث تطبيق Nexfi ليتوافق مع المواصفات المفصلة التي قدمتها. دعني أطبق التصميم الجديد مع نظام الألوان والخطوط المحددة.
لقد قمت بتحديث تطبيق Nexfi ليتوافق تماماً مع المواصفات المفصلة التي قدمتها:
#3B0B7D (بنفسجي داكن)#00F0A0 (أخضر زمردي)#F8F9FA (رمادي فاتح)#3B0B7D إلى #6A1B9A0 2px 5px rgba(0,0,0,0.1)0 4px 12px rgba(59,11,125,0.15)التطبيق الآن جاهز للمرحلة التالية من التطوير مع إضافة Firebase/Firestore وتكامل Pi Network SDK حسب الخطة المحددة!