crud system

نظام CRUD كامل لإدارة المنتجات (Front-End)

مشروع نظام إدارة منتجات متكامل (Create, Read, Update, Delete) مبني بالكامل باستخدام HTML5, CSS3, JavaScript (Vanilla), وBootstrap 5.

المميزات التقنية:

تصميم Glassmorphism عصري — واجهة زجاجية شفافة (blur effect) فوق خلفية صورة، مع هوية بصرية موحدة (ألوان وخطوط متسقة).

عمليات CRUD كاملة — إضافة، تعديل، عرض، وحذف المنتجات مباشرة من الواجهة.

حفظ دائم للبيانات باستخدام localStorage، بحيث تفضل البيانات محفوظة حتى بعد إغلاق المتصفح.

رفع وعرض الصور — إمكانية رفع صورة لكل منتج وعرضها في جدول البيانات باستخدام Object URLs.

بحث فوري (Live Search) — فلترة المنتجات أثناء الكتابة من غير الحاجة لإعادة تحميل الصفحة.

جدول بيانات تفاعلي — يدعم Sticky Header وScroll داخلي عند زيادة عدد الصفوف، مع تصميم متجاوب (Responsive).

Form Validation احترافي — تحقق فوري من صحة كل حقل (الاسم، السعر، النوع، الوصف، والصورة) باستخدام Regular Expressions، مع رسائل تنبيه واضحة لكل حقل.

تنبيهات تفاعلية (SweetAlert2) — رسائل تأكيد قبل الحذف، وإشعارات نجاح/فشل العمليات، لتحسين تجربة المستخدم.

المهارات المستخدمة:

DOM Manipulation, Event Handling, Regular Expressions (Regex), Local Storage API, Responsive Design, UI/UX Design Principles.