Free Admin Dashboard

لوحة تحكم إدارية مجانية تم تطويرها في React.js وTailwind CSS وTypeScript

لوحة تحكم المشرف المجانية عبارة عن قالب إداري مفتوح المصدر تم تصميمه في Figma وتم تطويره في React.js وTailwind CSS وTypeScript. هدفي في هذا المشروع هو تقديم قالب لوحة معلومات تصميم عالي الجودة ومتميز من خلال اتباع أفضل ممارسات React.js. تم إنشاء لوحة تحكم مسؤول React باستخدام أنماط تصميم React.js المتقدمة مثل أنماط تصميم المكونات الخاضعة للرقابة وغير الخاضعة للرقابة، وأنماط الخطافات المخصصة، وأنماط مكونات التخطيط، وأنماط تكوين المكونات، وأنماط تصميم المكونات المركبة وغيرها الكثير... هذا في الأساس قالب لوحة تحكم للتجارة الإلكترونية، ولكن في المستقبل، إذا أصبح المستودع شائعًا، فسوف أقوم بتوسيعه ليشمل المزيد من المجالات. لوحة التحكم تستجيب تمامًا، وهي متاحة للتنزيل مجانًا .

تصميم لوحة تحكم إدارية

تم تصميم تصميم لوحة تحكم المسؤول في Figma باتباع أفضل الممارسات الأساسية لتصميم واجهة المستخدم للوحة معلومات التجارة الإلكترونية. هدفي هو جعل الأمر بسيطًا قدر الإمكان وبواجهة مستخدم متميزة. يتم إنشاء التصميم الكامل مع وضع المستخدم النهائي في الاعتبار. يمكنك استخدام قالب لوحة الإدارة لأي نوع من مواقع التجارة الإلكترونية، ما عليك سوى توصيله بالواجهة الخلفية، وسيعمل كل شيء بسلاسة. لوحة الإدارة لموقع التجارة الإلكترونية مفتوحة المصدر بالكامل، مما يعني أنه يمكنك بسهولة إضافة المزيد من الميزات إذا كنت ترغب في ذلك. تتم كتابة الكود المصدري لقالب لوحة تحكم المشرف باتباع أفضل الممارسات، لذلك لن تواجه أي مشاكل معه. تتميز لوحة التحكم التفاعلية بأنها قابلة للتخصيص ومرنة تمامًا، بحيث يمكنك تخصيصها بسهولة لك. تم تصميم تصميم لوحة الإدارة باتباع أفضل ممارسات التصميم مثل التسلسل الهرمي البصري والقرب والمساحة البيضاء والاتساق والتباين وغيرها الكثير...

سمات

• تصميم عالي الجودة: تصميم عالي الجودة تم إنشاؤه مع وضع المستخدم النهائي في الاعتبار.
• تصميم سريع الاستجابة: تصميم سريع الاستجابة يعمل بسلاسة على أجهزة الكمبيوتر المكتبية والأجهزة اللوحية والأجهزة المحمولة.
• الرسوم البيانية والرسوم البيانية الديناميكية: تصور تفاعلي للبيانات باستخدام المكتبات Chart.js
• المكونات المعيارية: مكونات قابلة لإعادة الاستخدام وقابلة للتخصيص لأقسام مختلفة من لوحة المعلومات.
• تخصيص السمة: دعم الوضع الفاتح والمظلم مع سمات قابلة للتخصيص.
• جداول البيانات: جداول بيانات متقدمة مع الفرز والتصفية وترقيم الصفحات.

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

• React.js: مكتبة JavaScript لبناء واجهات المستخدم.
• Redux Toolkit: مكتبة إدارة الحالة لتطبيقات React.
• React Router: مكتبة للتوجيه في تطبيقات React.
• Chart.js: مكتبة رسوم بيانية بسيطة ومرنة في جافا سكريبت.
• Tailwind CSS: إطار عمل CSS ذو فائدة أولى لبناء واجهات مستخدم مخصصة بسرعة.
• TypeScript: لغة لجافا سكريبت على نطاق التطبيق.
• Nanoid: مولد معرف سلسلة صغير وآمن وصديق لعنوان URL وفريد ​​من نوعه
• أيقونات التفاعل: مكتبة أيقونات تحتوي على الكثير من الرموز
• Figma: أداة قوية لتصميم الويب.

إذا أعجبك مشروع لوحة تحكم المشرف المجاني، فامنحه نجمة على GitHub لدعم المشروع ومنحني الحافز لإضافة العديد من الميزات الرائعة.

تعليمات فيديو لتشغيل التطبيق

إليك رابط YouTube لتعليمات الفيديو لتشغيل التطبيق: https://www.youtube.com/watch?v=cydXOmMhbtQ

تعليمات

1. لتشغيل التطبيق، عليك أولاً تنزيل Node.js وnpm وتثبيتهما على جهاز الكمبيوتر الخاص بك. فيما يلي رابط للبرنامج التعليمي الذي يشرح كيفية تثبيتها: https://www.youtube.com/watch?v=4FAtFwKVhn0. إليك أيضًا الرابط حيث يمكنك تنزيلها: https://nodejs.org/en

2. عند تثبيت كافة البرامج التي تحتاجها على جهاز الكمبيوتر الخاص بك، يتعين عليك تنزيل المشروع. عند تنزيل المشروع، تحتاج إلى استخراجه.

3. بعد استخراج المشروع، يتعين عليك فتح مجلد المشروع في الجهاز الذي تختاره وكتابة:

 npm install

4. لتشغيل المشروع اكتب:

 npm run dev

5. لرؤية تطبيقك، انتقل إلى المتصفح الذي تختاره واكتب في عنوان URL: http://localhost:5173