---
title: "بدر الدين إدريس - مشاريع فل ستاك وتفاعلية | Bader Idris"
canonical_url: "https://baderidris.com/ar/projects"
last_updated: "2026-06-13T22:19:22.031Z"
locale: ar
meta:
  description: "استكشف مشاريعي في الفل ستاك المبنية بـ Nuxt و Vue و Node و GSAP و Three.js. عرض للتصاميم المتجاوبة والأدوات التفاعلية."
  "og:description": "استكشف مشاريعي في الفل ستاك المبنية بـ Nuxt و Vue و Node و GSAP و Three.js. عرض للتصاميم المتجاوبة والأدوات التفاعلية."
  "og:title": "بدر الدين إدريس - مشاريع فل ستاك وتفاعلية"
---

- HTML
- CSS
- Javascript
- Vue
- Typescript
- Sass
- Docker
- Nginx
- Nuxt
- Electron
- ThreeJs
- CapacitorJs

### // صفحة منتج التجارة الإلكترونية

[![صفحة منتج التجارة الإلكترونية](https://raw.githubusercontent.com/Bader-Idris/ecommerce-product-page/main/design/desktop-preview.jpg)go to صفحة منتج التجارة الإلكترونية](https://bader-idris.github.io/ecommerce-product-page/)

صفحة منتج تجارة إلكترونية تفاعلية ومتجاوبة، يمكنك إضافة وإزالة العناصر من السلة ورؤية إجمالي العناصر، والتنقل عبر صور المنتج

### // تحدي ثلاثي الأبعاد الأول: الانطلاق نحو الأفق

[![تحدي ثلاثي الأبعاد الأول: الانطلاق نحو الأفق](https://baderidris.com/imgs/train-gif.gif)go to تحدي ثلاثي الأبعاد الأول: الانطلاق نحو الأفق](https://baderidris.com/ar/projects/train)

محاكاة قاطرة ثلاثية الأبعاد عالية الدقة مع ضبط احترافي للظلال، واستخراج مسار الفرز الزاوي، وبخار مدخنة ديناميكي، ونظام تعليق تفاعلي على تضاريس تفاعلية!!

### // نسخة تطبيق ويب لوكالة تصميم

[![نسخة تطبيق ويب لوكالة تصميم](https://raw.githubusercontent.com/Bader-Idris/guru-agency-duplication-site/refs/heads/bader/brave_703HxjzGmt.png)go to نسخة تطبيق ويب لوكالة تصميم](https://beautiful-web-application.netlify.app/)

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

### // واجهة برمجة تطبيقات البلدان

[![واجهة برمجة تطبيقات البلدان](https://raw.githubusercontent.com/Bader-Idris/countries-api/refs/heads/bader/design-assets/design/desktop-preview.jpg)go to واجهة برمجة تطبيقات البلدان](https://countries-apis-bader.netlify.app/)

استكشف البيانات العالمية مع هذا التطبيق المتجاوب والأنيق. جلب تفاصيل البلدان، تبديل الوضع الداكن/المضيء، والبحث أو التصفية حسب المنطقة بسهولة.

### // صفحة الأسعار

[![صفحة الأسعار](https://raw.githubusercontent.com/Bader-Idris/pricing_options_page/main/design/desktop-preview.jpg)go to صفحة الأسعار](https://bader-idris.github.io/pricing_options_page/)

استكشف صفحة الأسعار التفاعلية والمتجاوبة مع مجموعة متنوعة من الخطط، التي توفر اشتراكات سنوية وشهرية. اختر من بين ثلاث خطط رئيسية مصممة لاحتياجاتك.

### // تطبيق المهام

[![تطبيق المهام](https://raw.githubusercontent.com/Bader-Idris/todo-app/main/screenshots/dark-desk.png)go to تطبيق المهام](https://bader-idris.github.io/todo-app/)

تطبيق مهام يعتمد على التخزين المحلي، لذا يمكنك الخروج من الصفحة بأمان والعودة عند الحاجة. إنه تطبيق مهام متجاوب وتفاعلي يتيح لك إضافة وإزالة وضع علامة على المهام المكتملة وتصفية المهام

### // نموذج متعدد الخطوات

[![نموذج متعدد الخطوات](https://raw.githubusercontent.com/Bader-Idris/multi-step-form/main/design/desktop-preview.jpg)go to نموذج متعدد الخطوات](https://bader-idris.github.io/multi-step-form/)

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

### // مولد الاقتباسات العشوائية

[![مولد الاقتباسات العشوائية](https://raw.githubusercontent.com/Bader-Idris/random-quote/refs/heads/main/Screenshot%20from%202025-01-12%2021-39-33.png)go to مولد الاقتباسات العشوائية](https://bader-idris.github.io/random-quote/)

احصل على الإلهام مع الاقتباسات العشوائية! يتميز هذا التطبيق النظيف والمتجاوب بزر نرد أنيق لتوليد اقتباسات جديدة على الفور.

### // لعبة الحروف العربية

[![لعبة الحروف العربية](https://baderidris.com/imgs/letters-game-image.webp)go to لعبة الحروف العربية](http://letters-game.online)

لعبة تنافسية تعتمد على الحروف العربية باستخدام websocket، وهو مشروع عميق متقدم تم بناؤه في شهرين من التطوير. تم تطويره على مدار أكثر من 250 ساعة، باستخدام Docker و Docker Compose و Nginx و Redis و MongoDB و Nuxt 3 و Nitro 2.

### // لوحة التحكم - دردشة وفيديو آمن

[![لوحة التحكم - دردشة وفيديو آمن](https://baderidris.com/ar/dashboard/__og-image__/image.png)go to لوحة التحكم - دردشة وفيديو آمن](https://baderidris.com/ar/dashboard)

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