نظام ويب بسيط واحترافي لإدارة المنتجات (CRUD System)

Local Storage CRUD App)

وصف المشروع

مشروع إدارة المنتجات تم تطويره باستخدام HTML, CSS, JavaScript, و Bootstrap، يهدف إلى إنشاء واجهة بسيطة وسهلة الاستخدام لإضافة المنتجات، تعديلها، حذفها، والبحث عنها، مع حفظ البيانات في Local Storage داخل المتصفح دون الحاجة إلى قاعدة بيانات خارجية.

الوظائف الأساسية (Features):

إضافة منتج جديد:

إدخال اسم المنتج، السعر، الفئة، الوصف، وصورة المنتج، ثم حفظه محليًا.

تعديل المنتج:

يمكن تعديل بيانات أي منتج مخزن مسبقًا.

حذف المنتج:

إمكانية حذف أي منتج من القائمة بسهولة.

البحث المباشر:

البحث عن منتج بالاسم أثناء الكتابة (Live Search).

التخزين المحلي (Local Storage):

حفظ واسترجاع البيانات حتى بعد إغلاق الصفحة أو تحديثها.

عرض الصور:

يتم عرض صورة المنتج مع تفاصيله في بطاقة (Bootstrap Card) أنيقة.

التقنيات المستخدمة:

HTML5 – لبناء الهيكل العام.

CSS3 & Bootstrap 5 – لتنسيق الواجهة والعناصر الجاهزة.

JavaScript (Vanilla JS) – لتنفيذ عمليات CRUD (Create, Read, Update, Delete).

Local Storage – لتخزين البيانات داخل المتصفح.

طريقة التشغيل:

افتح الملف index.html في المتصفح.

أضف منتجًا جديدًا عبر النموذج.

يمكنك تعديل أو حذف أو البحث عن المنتجات في أي وقت.

أهم ما يميز المشروع:

لا يحتاج إلى خادم (Server) أو قاعدة بيانات خارجية.

تصميم بسيط وسهل الاستخدام.

يحاكي فكرة نظم إدارة المنتجات الصغيرة (Inventory Systems).