الـ Stack بتاعي في Production: Vercel + Supabase + Cloudflare + Resend — الإعداد الكامل
البنية التحتية الفعلية وراء yousifdev.com — كل أداة بتعمل إيه، ليه اخترتها، إزاي متوصلين ببعض، والمطبات اللي محدش بيحذّرك منها.
كل مدوّنة مطوّر فيها بوست "الـ stack بتاعي." معظمهم بيعدّوا الأدوات وخلاص. البوست ده مختلف — هقولك إزاي فعلاً متوصلين ببعض، إيه بيتكسر، وإيه كنت هغيّره.
دي البنية التحتية الفعلية اللي بتشغّل yousifdev.com في production دلوقتي. مفيش رعاة، مفيش affiliate links — بس اللي شغّال.
الـ Stack في لمحة
Framework: Next.js 15 (App Router, TypeScript)
Hosting: Vercel (Hobby tier)
Database + Auth + Storage: Supabase (Free tier)
Domain + DNS: Cloudflare Registrar
Email: Resend + React Email
Payments: Lemon Squeezy (Merchant of Record)
Styling: Tailwind CSS 4 + Framer Motion
Admin: Refine (React admin framework)
Editor: TipTap (JSON-based rich text)
i18n: next-intl (إنجليزي + عربي)
التكلفة الشهرية: $0. كل حاجة شغّالة على free tiers. ده هيتغيّر لما أكبّر، بس لمنصة شخصية بترافيك معتدل، ده أكتر من كافي.
Vercel — استضافة بتشتغل وخلاص
Vercel الاختيار البديهي لـ Next.js — هم اللي بنوه. ادفع على GitHub، Vercel بينشر أوتوماتيك. Preview deployments لكل pull request. شبكة Edge لتوصيل سريع عالمياً.
اللي عجبني: نشر بدون إعدادات، HTTPS أوتوماتيك، rollbacks فورية، لوحة تحكم ممتازة لمراقبة أوقات البناء وسجلات الـ functions.
خد بالك: الـ Hobby tier للاستخدام غير التجاري. أول ما تبدأ تكسب فلوس، محتاج Pro plan ($20/شهر). كمان، cold starts للـ serverless functions ممكن تزوّد 200-500ms على أول request.
Supabase — الـ Backend في علبة
Supabase بيتعامل مع ٣ حاجات: قاعدة بيانات PostgreSQL (١٧ جدول)، authentication (للأدمن بس)، وتخزين ملفات (مكتبة الميديا). خدمة واحدة، ٣ مشاكل محلولة.
قاعدة البيانات بتستخدم مزيج من أعمدة structured للبيانات القابلة للبحث وأعمدة JSONB للمحتوى المرن — خرائط الكورسات ومحتوى المقالات وإعدادات الموقع كلها في JSONB.
المطب اللي محدش بيحذّرك منه: الـ free tier بتاع Supabase بيوقّف الـ database بعد ٧ أيام من غير نشاط. موقعك بيقع. الحل هو UptimeRobot — اعمل monitor مجاني بيعمل ping لموقعك كل ٥ دقايق. بيخلّي الـ database صاحي وبينبّهك لو حاجة وقعت.
UptimeRobot مش اختياري على Supabase free tier. اعمله setup نفس يوم النشر.
Cloudflare — الدومين والـ DNS
بستخدم Cloudflare كـ domain registrar (اشتريت yousifdev.com من عندهم) ومزوّد DNS. Cloudflare بيبيع الدومينات بسعر التكلفة — مفيش هامش ربح، مفيش رسوم تجديد مفاجئة.
إعداد حرج: سجلات DNS اللي بتشاور على Vercel لازم تبقى DNS-only (سحابة رمادي)، مش Proxied (سحابة برتقالي). لو عملت proxy عبر Cloudflare، بيتعارض مع SSL وشبكة Edge بتاعة Vercel.
كمان بستخدم Cloudflare email forwarding عشان أوجّه contact@yousifdev.com للـ Gmail بتاعي. مجاني وبسيط ومش محتاج email hosting.
Resend — إيميلات المعاملات اللي المطورين فعلاً بيحبّوها
Resend بيتعامل مع كل الإيميلات الصادرة — إشعارات نموذج الاتصال، تأكيد تسجيل الكورسات، روابط تحميل الـ prompt books، تنبيهات الشهادات. الإيميلات مبنية بـ React Email، يعني بكتب templates الإيميل بـ JSX بنفس أنماط الـ components اللي بستخدمها في باقي التطبيق.
ليه مش SendGrid أو Mailgun؟ تجربة المطوّر. API بتاع Resend أنضف، تكامل React Email native، والـ free tier (١٠٠ إيميل/يوم) كافي لمنصة بالحجم ده.
Lemon Squeezy — مدفوعات من عُمان
دي كانت أصعب قطعة في الـ puzzle. Stripe مش بيدعم عُمان. PayPal مش موثوق في المنطقة. كنت محتاج معالج مدفوعات بيشتغل كـ Merchant of Record — يعني بيتعامل مع الامتثال الضريبي والفواتير والتحويلات.
Lemon Squeezy بيدعم البائعين في عُمان مع تحويلات مباشرة لبنك مسقط. العمولة ٥٪ + $0.50 لكل معاملة — أغلى من Stripe، بس ده ثمن إن Merchant of Record يتعامل مع كل حاجة.
إزاي كلهم متوصلين ببعض
تدفق البيانات بسيط:
المستخدم بيزور yousifdev.com → Cloudflare DNS بيحلّل لـ Vercel
Vercel بيقدّم تطبيق Next.js → الـ Server Components بتجيب بيانات من Supabase
المستخدم بيبعت فورم → API route بيحفظ في Supabase → Resend بيبعت إيميل إشعار
المستخدم بيشتري prompt book → Lemon Squeezy بيتعامل مع الدفع → Webhook بيحدّث Supabase
الأدمن بيسجّل دخول → Supabase Auth بيتحقق → لوحة Refine بتحمّل
مفيش microservices. مفيش message queues. مفيش Kubernetes. بس تطبيق Next.js بيتكلّم مع قاعدة بيانات PostgreSQL مع شوية API integrations. الأنظمة البسيطة أنظمة موثوقة.
أحسن architecture لمطوّر لوحده هي اللي يقدر يعملها debug الساعة ٢ الصبح من غير ما يتصل بحد.
إيه اللي كنت هغيّره
لو بدأت من الأول بميزانية مفتوحة، كنت هرقّي Supabase لـ Pro tier ($25/شهر) فوراً — مفيش وقف database، أداء أحسن، backups يومية. وكنت هروح Vercel Pro ($20/شهر) للاستخدام التجاري وanalytics أحسن.
بس ده $45/شهر. لمنصة لسه بتبني جمهورها، stack الـ free tier هو القرار الصح. حسّن للبقاء الأول، بعدين حسّن للنمو.