cosmetics check single page app
1.0.0
يهدف هذا المشروع إلى بناء موقع إلكتروني للبحث عن مكونات مستحضرات التجميل وما إذا كانت تحتوي على مكونات ضارة لاستخدامها للحامل. يتم جمع كافة معلومات المنتجات بواسطة مشروع sephoraCrawler، وهو عبارة عن عنكبوت ويب مكتوب بلغة بايثون. تتضمن قاعدة البيانات جميع معلومات المنتجات النسائية (7000+) على www.sephora.com.
لتشغيل العميل،
npm installnpm start . وافتح http://localhost:3000/. تم تصميم هذا المشروع لتنفيذ تطبيق صفحة واحدة لقاعدة البيانات الخلفية، والذي يستخدم بشكل أساسي للتحقق مما إذا كان منتج العناية بالبشرة آمنًا للاستخدام أثناء الحمل. باستخدام هذا التطبيق، يمكن للمستخدمين البحث بالاسم أو العلامة التجارية للبحث عن مستحضرات تجميل معينة، ويتم عرض المعلومات ذات الصلة مع علامة ملحوظة تشير إلى ما إذا كانت آمنة للحامل أو تحتوي على مكونات ضارة.
تم تصميم Front-End ليكون بمثابة SPA (تطبيق صفحة واحدة) حيث يقوم بإدارة كل التوجيه وتدفق البيانات من جانب العميل. في هذا المشروع، يتم استخدام React، وهي مكتبة JavaScript لبناء واجهات المستخدم، جنبًا إلى جنب مع React-Router وRedux وهي حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript، لتنفيذ التطبيق.
يحتوي التطبيق بشكل أساسي على وظيفتين. أحدهما هو البحث عن المنتجات والآخر هو فحص المكونات.
الصفحة الرئيسية للتطبيق هي صفحة البحث. يتم التركيز على حقل النص تلقائيًا عند الدخول إلى الموقع. يمكن للمستخدمين بسهولة رؤية ما يمكن أن يفعله هذا التطبيق من خلال النظر إلى الشعار المصمم ذاتيًا.
بعد كتابة علامة تجارية أو اسم منتج (على سبيل المثال Clinique) والضغط على زر الإدخال، سيتم نقل المستخدمين إلى صفحة العرض. يتم ترتيب المنتجات حسب 4 عناصر في كل صف و60 عنصرًا في كل صفحة. وفي الأعلى أسفل شريط البحث يمكننا رؤية العدد الإجمالي لنتائج البحث. يوجد في أسفل الجانب الأيمن سهم وردي يستخدم للتمرير إلى الأعلى بما يناسبك. وهناك علامة تطفو على اليسار تشير إلى أن الصورة الرمزية الخضراء تعني العثور على مكونات غير معروفة والصورة الرمزية الحمراء تعني العثور على مكونات ضارة. إذا لم تظهر أي صورة رمزية على بطاقة المنتج، فهذا يعني أنه آمن للحامل.
في أسفل صفحة العرض، يوجد شريط ترقيم الصفحات. يتم إبراز الصفحة الحالية بلون الخلفية الوردي. في كل صفحة، يمكن عرض 60 عنصرًا على الأكثر.
عند النقر على بطاقة المنتج، تظهر نافذة توفر معلومات أكثر تفصيلاً عن المنتج. إذا كان المنتج غير آمن، فهناك علامة حمراء ملحوظة تشير إلى المكونات الضارة الموجودة فيه. يمكن للمستخدمين التحقق من التفاصيل والمكونات الخاصة بالمنتج والانتقال إلى موقعه الإلكتروني على متجر سيفورا من خلال النقر على الصورة.
وظيفة أخرى في الواجهة الأمامية هي فحص المكونات، فهي تسمح للمستخدمين باكتشاف المكونات الضارة في السلسلة.
إذا لم يتم العثور على أي مكونات ضارة، فسيظهر تنبيه أزرق. في حالة العثور على مكونات ضارة، يظهر تنبيه أحمر مع تمييز كلمات محددة باللون الأصفر.
