https://github.com/bspsoft/shop
shopping use react
https://github.com/bspsoft/shop
bootstrap mongoose react
Last synced: 3 months ago
JSON representation
shopping use react
- Host: GitHub
- URL: https://github.com/bspsoft/shop
- Owner: BSPSoft
- Created: 2025-01-14T09:07:50.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-01-22T20:36:50.000Z (over 1 year ago)
- Last Synced: 2025-01-22T21:28:45.247Z (over 1 year ago)
- Topics: bootstrap, mongoose, react
- Language: JavaScript
- Homepage:
- Size: 3.76 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# متجر إلكتروني باستخدام React
هذا المشروع هو تطبيق متجر إلكتروني بسيط مبني باستخدام مكتبة React. يتم جلب بيانات المنتجات من RESTful API، مما يجعل التطبيق ديناميكيًا وسهل التحديث.
---
## الميزات
- عرض قائمة بالمنتجات.
- تصنيف المنتجات حسب الأصناف.
- التصميم متجاوب مع جميع الأجهزة.
- جلب البيانات ديناميكيًا من RESTful API.
- واجهة مستخدم بسيطة وسهلة الاستخدام.
- إدارة حالة البيانات باستخدام **React Hooks** مثل `useState` و `useEffect`.
---
## التقنيات المستخدمة
- **React**: لإنشاء الواجهة التفاعلية.
- **Axios**: للتعامل مع RESTful API.
- **CSS/Styled Components -- Bootstarp**: لتصميم الواجهة.
- **RESTful API**: كمصدر بيانات المنتجات.
---
## طريقة التشغيل
### 1. تثبيت المتطلبات:
قبل بدء المشروع، تأكد من تثبيت **Node.js** على جهازك. ثم قم بتثبيت حزم المشروع باستخدام:
```bash
npm install
```
### 2. تشغيل التطبيق:
لتشغيل التطبيق على بيئة التطوير، استخدم الأمر:
```bash
npm start
```
سيتم فتح التطبيق على المتصفح تلقائيًا عبر الرابط: [http://localhost:3000](http://localhost:3000)
---
## استخدام API
```bash
cd server
node server.js
```
الرابط:
```
[https://localhost:4000]
```
### API المستخدمة:
- **الأصناف**: يتم جلب قائمة الأصناف من الرابط:
```
GET https://localhost:4000/items
```
- **المنتجات**: يتم جلب المنتجات باستخدام معرف الصنف:
```
GET https://localhost:4000/products
```
**ملاحظات**:
- يجب أن يحتوي كل منتج على الحقول التالية:
- `id` (معرف المنتج)
- `ItemId` (معرف الصنف)
- `name` (اسم المنتج)
- `price` (سعر المنتج)
- `descripe` (وصف المنتج)
- `img` (رابط الصورة)
---
---
## المزايا المستقبلية (TODO)
- إضافة ميزة البحث عن المنتجات.
- دعم العربة الشرائية (Shopping Cart).
- إضافة مصادقة المستخدم.
---
## متطلبات النظام
- **Node.js**: إصدار 16 أو أحدث.
- **npm**: إصدار 7 أو أحدث.
---
## المساهمة
مرحب بأي مساهمات لتطوير هذا المشروع! إذا كنت ترغب في المساهمة، قم بفتح فرع جديد، نفذ التعديلات، وأرسل طلب دمج (Pull Request).
---
## الترخيص
هذا المشروع مفتوح المصدر بموجب [MIT License](LICENSE).
---
## معاينة
---