مشروع ويب متكامل لمطعم - Full Stack Web Application for a restaurant

قمت بتطوير مشروع ويب متكامل يعتمد على تقنيات الـ Next.js في الواجهة الأمامية، مع دعم من Express.js و Node.js في الخلفية، بالإضافة إلى قاعدة بيانات MongoDB. يتيح هذا المشروع للمستخدمين التسجيل وتسجيل الدخول وإدارة حساباتهم الشخصية، مع خصائص خاصة للمستخدمين العاديين والإداريين.

التفاصيل التقنية:

الواجهة الأمامية (Frontend):

استخدمت إطار العمل Next.js لإنشاء واجهة المستخدم. يتميز المشروع بتقديم تجربة مستخدم سلسة باستخدام تقنيات التوجيه الديناميكي وتحميل المحتوى بطريقة متزامنة (Server-Side Rendering - SSR).

تم تصميم المكونات التفاعلية باستخدام React و Tailwind CSS لسهولة تخصيص المظهر وتوفير تجربة مستخدم متميزة.

الخلفية (Backend):

تم بناء خادم خلفي باستخدام Express.js و Node.js لمعالجة الطلبات وتقديم البيانات اللازمة. يتضمن المشروع عدة واجهات برمجية (APIs) تم بناؤها للتعامل مع العمليات مثل التسجيل، تسجيل الدخول، واسترداد بيانات المستخدم.

تم تأمين الطلبات باستخدام JWT (JSON Web Tokens) للتحقق من هوية المستخدمين ومنح الصلاحيات المختلفة للمستخدمين العاديين والإداريين.

قاعدة البيانات (Database):

استخدمت MongoDB كقاعدة بيانات غير علائقية لتخزين بيانات المستخدمين والمحتويات الأخرى. قمت بتنظيم البيانات في مجموعات (Collections) لتسهيل استعلامات سريعة ومرنة.

خصائص المشروع:

نظام تسجيل ودخول المستخدمين: يتمكن المستخدمون من إنشاء حسابات جديدة باستخدام البريد الإلكتروني وكلمة المرور، بالإضافة إلى نظام تسجيل دخول آمن.

إدارة الحساب الشخصي: يستطيع المستخدمون تحديث بياناتهم الشخصية مثل الاسم، البريد الإلكتروني، وكلمة المرور.

واجهة إدارة للمشرفين: للمستخدمين ذوي صلاحيات المسؤول، تم بناء واجهة تمكنهم من إدارة المستخدمين والتحكم في محتوى الموقع.

نظام حماية باستخدام التحقق من الهوية: تم تأمين المناطق الحساسة من المشروع مثل لوحة التحكم الخاصة بالإداريين، باستخدام JWT لمنع أي وصول غير مصرح به.

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

Next.js: إطار العمل الرئيسي المستخدم في بناء الواجهة الأمامية، مع دعم SSR و CSR.

React.js: لإنشاء المكونات التفاعلية.

Node.js و Express.js: لبناء الخادم الخلفي ومعالجة الطلبات.

MongoDB: لتخزين وإدارة البيانات بطريقة غير علائقية.

JWT: لتأمين بيانات المستخدمين والتحقق من هويتهم.

Tailwind CSS: لتصميم واجهة المستخدم بشكل متجاوب وسريع.

التحديات التي تم التغلب عليها:

إدارة المصادقة (Authentication) باستخدام JWT وتحديد صلاحيات الوصول للمستخدمين.

ربط الواجهة الأمامية مع الخلفية وتدفق البيانات بسلاسة بينهما.

إدارة وتحسين أداء المشروع باستخدام Next.js لضمان تحميل سريع وفعال للصفحات.