مدونة تقنية بسيطة

هذا المشروع هو منصة مدونة حديثة مبنية باستخدام React، TypeScript، و PostgreSQL. إليك وصف تفصيلي لمكوناته وميزاته:

الهيكلية:

الواجهة الأمامية: React مع TypeScript لضمان الأمان النوعي.

الخلفية: خادم Express.js يعالج طلبات الـ API.

قاعدة البيانات: PostgreSQL لتخزين البيانات (تم الانتقال مؤخرًا من التخزين في الذاكرة).

ORM: Drizzle ORM لتنفيذ العمليات على قاعدة البيانات.

الميزات الرئيسية:

المشاركات في المدونة:

عرض المقالات مع محتوى Markdown غني، صور غلاف، وتقديرات وقت القراءة.

نظام العلامات:

تصنيف المقالات باستخدام علامات يمكن استخدامها لتصفية المحتوى.

نظام التعليقات:

يمكن للمستخدمين التعليق على المقالات مع دعم الردود المتداخلة.

ملفات تعريف المؤلفين:

يتم عرض معلومات المؤلف مع المقالات، بما في ذلك الاسم، الصورة الرمزية، والسيرة الذاتية.

التصميم الاستجابة:

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

الأنيميشن:

انتقالات سلسة للصفحات وحركات واجهة المستخدم باستخدام Framer Motion.

الوضع الداكن/الفاتح:

دعم الوضع الداكن والفاتح وفقًا لتفضيلات المستخدم.

هيكل البيانات:

المستخدمون: مؤلفو المحتوى مع ملفات تعريفهم.

المشاركات: مقالات المدونة مع محتوى Markdown.

العلامات: فئات لتنظيم المحتوى.

التعليقات: ملاحظات المستخدمين على المقالات مع إمكانية الرد المتداخل.

PostTags: علاقة من نوع many-to-many بين المقالات والعلامات.

مكونات واجهة المستخدم:

تصميم عصري ونظيف مع تنسيق مناسب بين العناصر والخطوط.

معاينات المقالات باستخدام بطاقات على الصفحة الرئيسية.

عرض مفصل للمقال مع معلومات المؤلف.

تصفية المحتوى حسب العلامات.

انتقالات متحركة بين الصفحات.

مكتبة مكونات مبنية باستخدام Shadcn UI.

التنفيذ التقني:

React hooks لإدارة الحالة.

React Query لجلب البيانات وتخزينها مؤقتًا.

Wouter للتوجيه بين الصفحات.

PostgreSQL مع Drizzle ORM للعمليات على قاعدة البيانات.

عرض محتوى المقالات باستخدام Markdown.

عمليات آمنة من الناحية النوعية باستخدام TypeScript في جميع الأجزاء.