react_admin_ui_v1

React Admin UI عبارة عن نموذج أولي لواجهة مستخدم لوحة المعلومات جميل ومفتوح المصدر تم إنشاؤه باستخدام TypeScript وReact. من المثير للدهشة أن هذه هي المرة الأولى التي أقوم فيها ببناء نموذج أولي لواجهة المستخدم بمكونات معقدة بعض الشيء. لذلك، هدفي هو أن تتمكن وكالات تكنولوجيا المعلومات أو حتى المطورين الأفراد من استخدام هذا النموذج الأولي لتقديم نظرة ثاقبة لمشاريعهم المستقبلية.

ألق نظرة على معاينة React Admin UI للحصول على قائمة شاملة بميزات النموذج الأولي والقيم الأساسية وحالات الاستخدام.

يحتوي هذا المستودع على النظام الأساسي لـ React Admin UI Prototype ، مقسمًا إلى دليلين مختلفين. الواجهة الخلفية مخصصة لـ JSON API (تم تكوينها بالفعل لنشر Vercel)، والواجهة الأمامية مخصصة للنموذج الأولي لواجهة المستخدم بالكامل.

؟ المميزات وتتكون من

• ⚡️ تفاعل 18 TypeScript مع Vite
• التوجيه التعريفي باستخدام React Router v6
• ؟ جلب البيانات بشكل سلس باستخدام React Query v5
• أيقونات محسنة مع React Icons v5
• ؟ Tailwind CSS v3 كأساس للتصميم
• ؟ Daisy UI v4 كنظام التصميم الأساسي
• ؟ واجهة المستخدم المادية v5 لشبكة البيانات المحسنة
• رسوم بيانية جميلة مع Recharts v2
• ؟ وغيرها الكثير...

التثبيت وكيفية الاستخدام

انظر أدناه للحصول على أمثلة التثبيت والاستخدام السريع.

الخلفية

قم بتثبيت جميع التبعيات المدرجة في package.json داخل دليل الواجهة الخلفية.

 cd backend

npm install

افتراضيًا، قمت بالفعل بنشر واجهة برمجة التطبيقات (API) للتشغيل في بيئة Vercel. يمكن الوصول إلى واجهة برمجة التطبيقات المباشرة من https://react-admin-ui-v1-api.vercel.app/. ومع ذلك، في حالة رغبتك في تكوين الواجهة الخلفية بنفسك، يمكنك التشغيل أدناه.

nodemon ./src/index.ts

ويمكن الوصول إلى واجهة برمجة التطبيقات (API) محليًا من http://localhost:5000.

الواجهة الأمامية

قم بتثبيت كافة التبعيات المدرجة في package.json داخل دليل الواجهة الأمامية.

 cd frontend

npm install

npm run dev

إذا كنت ترغب في تغيير نقطة نهاية واجهة برمجة التطبيقات الافتراضية، فيمكنك الانتقال إلى ApiCollection.tsx.

وبعد ذلك، يمكن الوصول إلى التطبيق من http://localhost:5173/.

؟ هل لديك سؤال؟ هل ترغب في الدردشة؟ واجهت مشكلة؟

من الواضح أنه يمكنك دائمًا التواصل معي مباشرة عبر نهج رسمي مثل البريد الإلكتروني أو LinkedIn.

؟ العثور على خطأ؟ اقتراح ميزة معينة؟

لا تتردد في تقديم مشكلة جديدة بعنوان ووصف خاصين بها في مستودع fransachmadhw/react_admin_ui_v1. إذا وجدت بالفعل حلاً لمشكلتك، فنحن نرغب في مراجعة طلب السحب الخاص بك !

✅ المتطلبات

تتطلب واجهة مستخدم React Admin إصدار Node أعلى أو يساوي 20.11.0 LTS . قم بإلقاء نظرة على قسم dependencies وتبعيات devDependencies في الحزمة package.json داخل الواجهة الخلفية والواجهة الأمامية للعثور على القائمة الحالية لمتطلبات React Admin UI.

رخصة

تم إصدار النموذج الأولي لواجهة مستخدم لوحة معلومات React Admin بموجب شروط BSD-3-Clause.