موقع سوشال ميديا
تفاصيل العمل
**منصة التواصل الاجتماعي المتكاملة (Dark Neon Social Network)**
منصة تواصل اجتماعي حديثة متكاملة (Full-Stack Web Application) تم بناؤها وتطويرها بالكامل باستخدام بيئة عمل **MERN Stack**، وتتميز بتصميم بصري جذاب وفريد يعتمد على الهوية المظلمة وألوان النيون (Dark Neon Aesthetic) لتوفير تجربة مستخدم عصرية ومريحة للعين.
تتيح المنصة للمستخدمين مشاركة أفكارهم، صورهم، والتفاعل مع الآخرين من خلال نظام ديناميكي متطور يتصل بواجهات برمجية (RESTful APIs) معقدة لمعالجة البيانات وإدارتها في الوقت الفعلي.
---
### 🛠️ التقنيات المستخدمة في المشروع:
* **واجهة المستخدم (Frontend):** JavaScript (ES6+), HTML5, CSS3 المخصص بالكامل مع تأثيرات النيون، بالإضافة إلى مكتبة Axios لإدارة الطلبات البرمجية.
* **إدارة البيانات والحالة (State & Data Management):** تخرين وإدارة جلسات المستخدمين بأمان عبر LocalStorage للتحقق من الهوية (Authentication).
* **معالجة البيانات المرفوعة:** رفع الصور والملفات وتغليف البيانات باستخدام FormData لضمان أداء مستقر وسريع.
---
### ✨ أبرز مميزات ووظائف المنصة:
* **نظام التصفح اللانهائي (Infinite Scroll):** تجربة تصفح مرنة وسلسة لصفحة التغذية الرئيسية (Home Feed) تقوم بجلب المنشورات تلقائياً عند النزول لأسفل الصفحة لتقليل وقت التحميل وتوفير استهلاك البيانات.
* **نظام المصادقة والأمان (Authentication System):** صفحة تسجيل دخول (Login) وإنشاء حساب جديد (Register) مؤمنة بالكامل، مع إمكانية رفع صورة شخصية مخصصة لكل مستخدم وحفظ التوكن (JWT) لإبقاء المستخدم متصلاً.
* **إدارة المنشورات بالكامل (CRUD Operations):** إمكانية إنشاء منشورات جديدة نصوص وصور، وتعديل محتوى المنشور، أو حذفه من خلال نوافذ منبثقة تفاعلية (Custom Modals) تم بناؤها من الصفر لتجنب استخدام الـ Alerts التقليدية للمتصفح.
* **نظام تفاصيل المنشورات والتعليقات (Post Details & Comments):** صفحة مخصصة لكل منشور تعرض تفاصيله، صورتك المرفوعة، والتعليقات الخاصة به مع إمكانية إضافة تعليقات جديدة في الوقت الفعلي.
* **الملفات الشخصية للمستخدمين (User Profiles):** نظام بروفايل ذكي ومزدوج؛ بروفايل شخصي للمستخدم الحالي يتيح له التحكم في منشوراته وتعديلها، وبروفايل عام يستعرض بيانات المستخدمين الآخرين وعدادات حقيقية ودقيقة لعدد منشوراتهم وإجمالي تعليقاتهم المستلمة مباشرة من خوادم قاعدة البيانات.
* **واجهات متجاوبة (Responsive Design):** التصميم متوافق ومقاوم تماماً للأخطاء الرسومية، ومهيأ للعمل على شاشات الهواتف الذكية، الأجهزة اللوحية، والشاشات المكتبية.
* **نظام تنبيهات مخصص (Custom Alerts System):** نظام إشعارات برمجية متحركة يظهر للمستخدم عند نجاح أو فشل العمليات (مثل إضافة تعليق أو فشل تسجيل الدخول) لتوفير تجربة تفاعلية حية.