تطبيق ويب متكامل لطلب البيتزا بـ React/Redux و Tailwind (تخطيط + تصميم + تنفيذ)

تطبيق ويب متكامل لطلب البيتزا، مبني باستخدام React و Redux و React Router و Tailwind CSS، يعمل كتطبيق صفحة واحدة (SPA) ويوفّر تجربة سلسة لعملاء مطعم بيتزا لطلب وتتبّع طلباتهم أونلاين.

يقوم التطبيق بالسماح للمستخدم بـ:

إدخال اسمه أولًا، ثم البدء في استخدام التطبيق بدون الحاجة لإنشاء حساب.

تصفّح قائمة بيتزا ديناميكية تُحمَّل من REST API بحيث يمكن لصاحب النشاط تعديل القائمة من السيرفر فقط.

إضافة أكثر من نوع بيتزا إلى سلة المشتريات (Cart) مع إمكانية تعديل الكميات أو حذف العناصر.

إتمام طلب جديد عبر نموذج يحتوي على:

الاسم

رقم الهاتف

العنوان

محاولة جلب الموقع الجغرافي (GPS) تلقائيًا لتسهيل عملية التوصيل

اختيار جعل الطلب أولوية (Priority) مع إضافة تكلفة ثابتة أعلى إجمالي السلة.

إرسال الطلب إلى الـ API عبر طلب POST واستقبال رقم طلب فريد (Order ID).

الدخول إلى صفحة تتبع الطلب عبر رابط مثل: /order/:orderId لعرض حالة الطلب وتفاصيله.

ترقية الطلب إلى أولوية حتى بعد إنشائه.

من الناحية التقنية

قمت في هذا المشروع بـ:

تحليل المتطلبات وتقسيمها إلى ميزات (Features) وصفحات (Pages) واضحة.

تصميم هيكل التطبيق وتقسيم الحالة إلى شرائح (User, Menu, Cart, Order) باستخدام Redux.

استخدام React Router v6.4+ لإدارة الصفحات وجلب البيانات (Data Fetching).

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

ربط الواجهة بشكل كامل مع الـ REST API (جلب القائمة، إرسال الطلبات، تتبّع الطلب برقم الـ ID).