بورتفوليو HadiHz (الإصدار الثالث)

نظرة عامة على البنية

graph TB
    subgraph Frontend["Next.js على Vercel"]
        A[App Router]
        B["مكوّنات HeroUI"]
        C["Spline 3D + tsparticles + cobe"]
    end
    subgraph Backend["واجهة NestJS"]
        D["متحكمات REST"]
        E[Prisma ORM]
        F["توثيق Swagger"]
        G["تحديد معدّل الطلبات"]
    end
    subgraph AWS
        H[("وسائط S3")]
        I["بريد SES"]
    end
    A --> D
    E --> J[(PostgreSQL)]
    D --> H & I

السلف المباشر للموقع الذي تقرأه الآن، وأول إصدار يعيش فيه المحتوى خلف واجهة برمجية حقيقية بدل ملفات المصدر. الواجهة الأمامية تطبيق Next.js يعتمد بقوة على مكتبة مكوّنات HeroUI، مع مشهد ثلاثي الأبعاد من Spline وخلفية tsparticles وكرة أرضية بـ cobe تحمل الهوية البصرية.

أما الخلفية المرافقة فخدمة NestJS تستخدم Prisma فوق PostgreSQL. تتولى رفع الوسائط إلى S3 عبر روابط موقّعة مسبقًا، وترسل نموذج التواصل عبر SES، وتتحقق من إعداداتها عند الإقلاع بـ Joi، وتوثّق نفسها بـ Swagger.

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

• المشاريع والدورات والمهارات تُقدَّم عبر واجهة REST مُنمَّطة
• رفع موقّع مسبقًا إلى S3 كي لا تمرّ الوسائط عبر عملية الواجهة الخلفية
• نموذج تواصل يُسلَّم عبر AWS SES
• تحديد لمعدّل الطلبات وتحقق على مستوى DTO في كل نقطة نهاية
• توثيق Swagger مولَّد من المتحكمات
• التحقق من الإعدادات عند الإقلاع باستخدام Joi
• تكامل Vercel Analytics وSpeed Insights في الواجهة الأمامية

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

• الواجهة الأمامية: Next.js، React، TypeScript، HeroUI، Tailwind CSS، Spline، tsparticles
• الواجهة الخلفية: NestJS، TypeScript، Prisma، Swagger
• قاعدة البيانات: PostgreSQL
• البنية التحتية: Vercel، AWS S3، AWS SES

أُحيل إلى التقاعد لصالح البناء الحالي بـ Astro وStrapi، الذي خفّض حجم JavaScript كثيرًا ونقل تحرير المحتوى إلى نظام إدارة محتوى فعلي.