Ecommerce MERN Dashboard

مشروع لوحة تحكم MERN Stack Admin

يعرض هذا المستودع تطبيقًا شاملاً للوحة تحكم الإدارة تم إنشاؤه باستخدام مكدس MongoDB وExpress.js وReact وNode.js (MERN).

الرابط التجريبي: https://admindash.romansth.com

لقطة الشاشة:

سمات

• واجهة المستخدم سريعة الاستجابة: تم تصميم الواجهة الأمامية باستخدام مكونات واجهة المستخدم المادية للحصول على واجهة مستخدم جذابة بصريًا وسريعة الاستجابة.
• تصور البيانات: باستخدام مخططات Nivo، يقدم المشروع تصورات ثاقبة للبيانات من أجل تفسير أفضل للبيانات.
• إدارة البيانات: تقوم Redux Toolkit وRedux Toolkit Query بإدارة البيانات بكفاءة، مما يعزز تجربة المستخدم.
• واجهة خلفية قوية: تم إنشاء الواجهة الخلفية على Node.js وExpress.js وMongoose وMongoDB، مما يضمن معالجة قوية للبيانات.
• صفحات متعددة: استكشف الصفحات المتنوعة بما في ذلك المنتجات والعملاء والمعاملات والمزيد، ولكل منها وظائف مميزة.

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

• MongoDB
• Express.js
• رد فعل
• Node.js
• واجهة المستخدم المادية
• شبكة بيانات واجهة المستخدم المادية
• مخططات نيفو
• مجموعة أدوات الإعادة
• استعلام مجموعة أدوات Redux
• النمس
• واجهات برمجة التطبيقات المريحة

هيكل المشروع

• server/ : كود مصدر الواجهة الخلفية وملفات التكوين.
• client/ : كود مصدر الواجهة الأمامية ومكوناتها وأنماطها.
• screenshots/ : لقطات شاشة تعرض الصفحات المختلفة للتطبيق.

ابدء

المتطلبات الأساسية

• MongoDB
• العقدة
• npm

استنساخ المستودع

 $ git clone https://github.com/Romansth/Ecommerce-MERN-Dashboard.git

الاستخدام من جانب العميل

 $ cd client    
$ echo "REACT_APP_BASE_URL= http://localhost:5002" >> src/.env.local  
$ npm i  
$ npm run build
$ npm start

الاستخدام من جانب الخادم

تثبيت npm

 $ cd server  
$ npm i      

إعداد Mongodb

قم بإنشاء حساب على MongoDB. إنشاء قاعدة بيانات جديدة. انتقل إلى connect -> node js -> انسخ الرمز المميز.

قم بإنشاء ملف .env في الدليل الأساسي للخادم وأضف ما يلي:

MONGO_URL = ' YOUR_MONGODB_TOKEN '
PORT= 5002

بعد ذلك، انتقل إلى /server/index.js وقم بإلغاء التعليق على هذه الأسطر:

 data imports
import  User  from  "./models/User.js" ;
import  Product  from  "./models/Product.js" ;
import  ProductStat  from  './models/ProductStat.js' ;
import  Transaction  from  './models/Transaction.js' ;
import  OverallStat  from  './models/OverallStat.js' ;
import  AffiliateStat  from  './models/AffiliateStat.js' ;
import {
dataUser , dataProduct , dataProductStat , dataTransaction , dataOverallStat , dataAffiliateStat
} from  "./data/index.js" ; 

 /* ONLY ADD DATA ONE TIME */
AffiliateStat . insertMany ( dataAffiliateStat ) ;
OverallStat . insertMany ( dataOverallStat ) ;
Transaction . insertMany ( dataTransaction ) ;
Product . insertMany ( dataProduct ) ;
ProductStat . insertMany ( dataProductStat ) ;
User . insertMany ( dataUser ) ;

ثم قم بتشغيل الخادم

 $ npm run dev 

قم بإيقاف الخادم بعد تشغيله. سيؤدي هذا إلى دفع البيانات التجريبية إلى قاعدة بيانات mongodb الخاصة بك.

تشغيل الواجهة الخلفية

 $ npm run dev 

التطبيق النهائي

قم بالوصول إلى تطبيق الويب على https://localhost:5002 .

(ملاحظة: يجب تشغيل كل من client server بشكل متزامن حتى يعمل تطبيق الويب.)

الاستخدام

1. استكشف دليل client/ لفهم مكونات واجهة المستخدم وتصورات البيانات.
2. ارجع إلى الكود الموجود في server/ الدليل لفهم نقاط نهاية واجهة برمجة التطبيقات ومعالجة البيانات.

رخصة

هذا المشروع مرخص بموجب ترخيص MIT.