ويب سايت مصمم Next.js مع باك اند باستخدام MongoDB

ElectroShop

Framework: Next.js 14 (App Router) مع React.

Database: MongoDB Atlas باستخدام مكتبة Mongoose للاتصال وإدارة البيانات.

Styling: Tailwind CSS.

Images: تمت إدارتها باستخدام مكون <Image /> من Next.js لتحسين الأداء.

ما تم إنجازه

MongoDB Integration:

إعداد الاتصال بـ MongoDB Atlas باستخدام Mongoose.

إنشاء Product Schema & Model يتضمن (الاسم، السعر، الوصف، الفئة، الصورة).

API Routes:

GET /api/products → استرجاع جميع المنتجات من قاعدة البيانات.

POST /api/products → إضافة منتج جديد.

DELETE /api/products → حذف كل المنتجات (للاختبار أو إعادة الضبط).

Frontend (UI):

صفحة المنتجات تعرض قائمة المنتجات في شكل Grid مرتب.

أزرار فلترة حسب الفئة (Category Filter Buttons).

زر عرض المنتج (View Product) لتفاصيل أكثر.

Data Handling:

تم التحويل من JSON ثابت إلى MongoDB لعرض البيانات بشكل ديناميكي.

معالجة الأخطاء في جلب البيانات (Fetch Errors).

إضافة Authentication (تسجيل الدخول & تسجيل جديد) باستخدام البريد الإلكتروني والباسورد او من خلال تسجيل حساب جوجل مباشره