التقنيات المستخدمة:
Frontend: React.js, JavaScript ES6, Bootstrap 5
Backend: PHP Laravel
Form Management: React Hook Form
HTTP Requests: Axios
Responsive Design (Mobile - Tablet - Desktop)
وصف المشروع:
تم تطوير موقع Codeavour باستخدام React.js مع Axios للتفاعل مع الـ APIs المدمجة مع Laravel في الـ Backend.
كما تم استخدام React Hook Form لإدارة النماذج (Forms) بكفاءة ومرونة.
المميزات الإضافية:
التفاعل مع الـ APIs باستخدام Axios:
Axios تم استخدامه لتنفيذ طلبات HTTP (GET, POST, PUT, DELETE) للتفاعل مع الـ Backend الخاص بـ Laravel.
طلبات الـ API تتم بشكل غير متزامن باستخدام async/await لضمان تجربة مستخدم سريعة وسلسة.
تم التعامل مع Error Handling بشكل فعال لضمان استجابة الموقع بشكل مناسب في حالة حدوث أخطاء في الـ API.
كما تم تحسين الأداء باستخدام debouncing و throttling للـ API Calls لتقليل الضغط على الخادم.
إدارة النماذج باستخدام React Hook Form:
React Hook Form تم استخدامه لإدارة الـ Forms بشكل فعال وبدون تعقيد، حيث يسمح بإدارة القيم (values) والتحقق من صحة البيانات (validation) بطريقة سلسة.
استفدت من مميزات React Hook Form مثل Controlled Components، بحيث كل مدخل بيانات يتم ربطه مباشرة بـ React State عبر hooks.
تم استخدام Yup كـ Schema Validator للتحقق من صحة المدخلات (validation) قبل إرسال البيانات إلى الـ Backend.
استخدمت useForm و Controller في React Hook Form لربط الـ inputs بسهولة مع الحالة (State).
تحسين تجربة المستخدم:
كل التفاعل مع الـ Forms يتم بشكل غير متزامن، مما يمنح المستخدم تجربة مرنة وسريعة.
تم تقديم Loading States للمستخدمين أثناء إرسال البيانات أو انتظار استجابة الـ API.
النتيجة:
الموقع يعمل بكفاءة عالية، مع استجابة سريعة للـ API باستخدام Axios، وتجربة مستخدم مريحة مع النماذج المدارة عبر React Hook Form.
تم تحسين الأداء عن طريق تقنيات مثل debouncing و throttling لضمان أن التفاعل مع الخادم يكون سريعًا وفعالًا.
File figma : https://www.figma.com/design/iZdr8ka2ZH6cZkQDQoTBE4/codeavour?node-id=0-1&p=f&t=EjpFcSlLqpLqf7rG-0
