ليه بنيت المنصة دي من الصفر؟
كل مرة كنت بفتح portfolio أو بعمل update لموقعي، كنت بضيع وقت في تعديلات صغيرة. المحتوى مبعثر، البيانات يدوية، ولوحة الإدارة غير موجودة. الحل: منصة واحدة تجمع كل حاجة — بورتفوليو، مدونة، خدمات، متجر، ولوحة إدارة كاملة.
1. التخطيط المعماري
اخترت Next.js 15 App Router لأنها بتديني:
- Server Components افتراضيًا — سرعة وSEO أحسن
- Server Actions — خلاص على API routes
- Streaming + Suspense — تجربة مستخدم سلسة
- Route Groups — فصل الـ Admin عن الـ Site بسهولة
2. قاعدة البيانات والـ ORM
PostgreSQL + Prisma — Prisma بتوفر type safety وmigration سهلة. الجداول الأساسية:
PortfolioProject— بيانات المشاريع مع JSON fields للتفاصيلBlogPost— مقالات مع tags وcategoriesService— الخدمات التجاريةSettings— إعدادات الموقع القابلة للتعديل
3. لوحة الإدارة
بنيت لوحة Admin داخلية مش منفصلة:
- Auth بـ NextAuth.js (Credentials Provider)
- Dashboard cards بـ stats حقيقية
- CRUD كامل لكل المحتوى
- Seed scripts للبيانات الافتراضية
4. SEO والأداء
- generateMetadata ديناميكي لكل صفحة
- Structured Data (BlogPosting, BreadcrumbList, FAQPage)
- Dynamic Open Graph images لكل مقال
- Sitemap.ts + robots.ts
- Framer Motion للـ animations بدون تأثير على LCP
5. Deployment على VPS
مستخدمش Vercel عشين:
- Full control على السيرفر والـ environment
- Cost — VPS بـ 5$ شهريًا بيكفيني
- CI/CD — GitHub Actions → VPS عبر SSH
الـ Stack: Ubuntu + Nginx + PM2 + PostgreSQL + Node.js 22.
النتائج
- 100% TypeScript — zero runtime errors
- Core Web Vitals Green على كل الصفحات
- إدارة محتوى كاملة من لوحة واحدة
- مشروع مفتوح المصدر قابل لإعادة الاستخدام
المنصة الجيدة مش اللي بتظهر بس ─ ده اللي بتقدر تدير محتواك منها بسهولة.
