من الصفر إلى الإطلاق: كيف تبني وتبيع قالب ويب كمطور مستقل

مقدمة

لا أحد يتحدث عن الجزء الذي يسبق الإطلاق.

يعرضون لك صفحة هبوط أنيقة، وعملاء راضين، ولقطة دخل. لا يعرضون لك جلسات التصحيح عند 11 مساءً، ولا ثلاث مرات إعادة بناء، ولا اللحظة التي كدت فيها تحذف المشروع كله لأنك لم تفهم لماذا كان تخطيط RTL ينهار على Safari.

هذه هي تلك القصة.

أنا مطوّر Fullstack مستقل من المغرب. بنيت Savoura Dywan — قالب موقع مطعم متعدد الأنماط بثلاثة أساليب مختلفة، ودعم متعدد اللغات، وإمكانية PWA، وهندسة معتمدة بالكامل على الإعدادات — بمفردي، بلا تمويل، بلا فريق، وبلا أي ضمان أن أحدًا سيشتريه.

هذه كل الدروس التي تعلمتها: العملية، والقرارات، والأخطاء، وما الذي يتطلبه فعليًا الانتقال من فكرة إلى منتج يمكن بيعه.

1. البداية كانت مشكلة حقيقية، لا فكرة

أسوأ القوالب التي رأيتها كانت من مطورين سألوا: «ماذا يجب أن أبني؟». أفضلها كانت من مطورين سألوا: «ماذا يحتاج هذا العميل تحديدًا فعلًا؟».

بدأ Savoura Dywan مع عميل: صاحب مطعم يحتاج موقعًا. ليس موقعًا عامًا — بل موقعًا يشبه هويته. أنيقًا لتجربة فاخرة. دافئًا لمطعم حي. سريعًا ومباشرًا لبيتزا.

أدركت أثناء البناء أنني في الواقع أبني ثلاثة مواقع بقاعدة كود واحدة. وإذا احتجت هذا مرة، فغيري سيحتاجه مرة أخرى.

من هنا جاءت فكرة القالب. ليست إبداعًا. بل ملاحظة.

الدرس: ابنِ قوالب تحل مشكلة رأيتها فعليًا في الواقع. المشاكل الحقيقية لها مشترون حقيقيون.

2. المعمارية أولًا — وكل شيء بعدها

أكبر خطأ يرتكبه المطورون في بناء القوالب هو البدء بالتصميم. التصميم مرئي. المعمارية هي ما يجعل القالب قابلًا للبيع.

قالب جميل بمحتوى hardcoded ليس منتجًا. بل مجرد عرض.

بنيت Savoura Dywan على مبدأ واحد: كل شيء قابل للإعداد، ولا شيء hardcoded. كل الهوية، والمحتوى، والألوان، والروابط الاجتماعية، وبيانات SEO، ومفاتيح الميزات موجودة في ملف مركزي واحد: siteConfig.js.

العميل أو المطور الذي يشتري القالب يغيّر ملفًا واحدًا. فيتحدث الموقع كله. بلا بحث بين المكونات. بلا تغييرات مكسورة. فقط إعدادات.

إليك نسخة مبسطة من هيكلة هذا الملف المركزي:

export const siteConfig = {
  variant: 'luxury', // 'luxury' | 'casual' | 'pizzeria'
  branding: {
    name: 'Le Jardin',
    logo: '/logo.png',
    primaryColor: '#c9a84c',
    tagline: 'Fine dining in the heart of the city'
  },
  seo: {
    title: 'Le Jardin — Fine Dining Restaurant',
    description: 'Award-winning cuisine in an intimate setting',
    ogImage: '/og-image.jpg'
  },
  contact: {
    phone: '+212 6XX XXX XXX',
    email: 'contact@lejardin.ma',
    address: '12 Rue Mohammed V, Casablanca'
  },
  features: {
    enableReservations: true,
    enableWhatsApp: true,
    enablePWA: true,
    enableNewsletter: false
  },
  social: {
    instagram: 'https://instagram.com/lejardin',
    facebook: 'https://facebook.com/lejardin'
  }
};

هذا ما يجعل القالب منتجًا. المشتري لا يحتاج فهم بنية مكوناتك. يضع بياناته ويطلق.

الدرس: صمّم لمن سيقوم بالإعداد، لا فقط لمن سيشاهد.

3. قرارات التقنية التي وفرت عليّ الوقت

كل قرار تقني في قالب له تكلفة مضاعفة. قرار سيئ في مشروع شخصي يكلفك ساعات. وقرار سيئ في قالب يكلف كل مطور يشتريه ساعات.

هذا ما اخترته في Savoura Dywan ولماذا:

• React 19 + Vite — وقت بناء سريع، منظومة حديثة، ومألوفة لأكبر شريحة من المطورين. المشتري يوسّع القالب دون تعلم نمط جديد.
• Tailwind CSS — أسلوب Utility-first يسمح بالتخصيص بصريًا دون لمس منطق المكونات. لا بحث مرهق في ملفات CSS.
• Framer Motion — حركات سلسة واحترافية بكود قليل. هذا النوع من الحركة يعطي إحساسًا Premium ويبرر سعرًا أعلى.
• i18next — دعم متعدد اللغات مع RTL عربي من البداية. هذا وحده يميّز القالب في سوق MENA حيث المنافسون نادرًا ما يقدمونه.
• Vite PWA Plugin — دعم offline وقابلية التثبيت عبر إضافة واحدة. ميزة يراها العميل عالية القيمة وتكلفتها التنفيذية منخفضة عند بنائها من البداية.

الدرس: اختر تقنيات تضيف قيمة محسوسة للمشتري، لا فقط أناقة تقنية لك.

4. مشكلة الـ 90%

لازم أكون صريحًا في نقطة:

أنهيت Savoura Dywan عند 90% ثلاث مرات قبل أن أصل إلى 100%.

أول 90% كان الهيكل الأساسي والأنماط. ثم أضفت التعدد اللغوي — 90% من جديد. ثم PWA والحركات ومعمارية الإعدادات — 90% مرة أخرى.

في كل مرة أصل فيها لـ 90%، يظهر شيء جديد يبدو ضروريًا: ميزة إضافية، تحسين، طريقة أفضل لتنظيم الإعدادات. وكل إضافة تعيد إحساس عدم الاكتمال.

هذه أخطر مرحلة في بناء منتج فردي. ليست البداية حين الحماس مرتفع. ولا الوسط حين تحل المعمارية. بل النهاية — حين يكون المنتج شبه جاهز لكن الكمالية تتنكر في شكل جودة.

السؤال الذي أخرجني من هذه الحلقة كان بسيطًا:

هل سيلاحظ عميل يدفع الفرق بين ما لدي الآن وما سأضيفه بعد قليل؟

إذا كانت الإجابة لا — أطلق.

الكمال ليس ميزة. إنه تأخير.

الدرس: عرّف معنى «جاهز» قبل أن تبدأ. اكتب قائمة متطلبات الإطلاق من اليوم الأول. عندما تكتمل القائمة — أطلق. وما عدا ذلك فهو نسخة ثانية.

5. تسعير قالب كمطور مستقل

التسعير هو النقطة التي يقلّل فيها أغلب المطورين المستقلين قيمة عملهم بشكل واضح.

الغريزة تقول: سعر منخفض لجذب المشترين. الواقع: السعر المنخفض يرسل إشارة جودة منخفضة. صاحب مطعم يختار بين قالب بـ 15$ وقالب بـ 300$ لا يرى الأول صفقة، بل يرى مخاطرة.

هذا الإطار الذي أستخدمه للتسعير:

تكلفة البديل: كم سيدفع صاحب مطعم لوكالة محلية لبناء موقع مخصص؟ في المغرب بين 3000 و8000 درهم. عالميًا بين 1500 و5000 دولار. قالبك بـ 300$ لا ينافس القوالب فقط. بل ينافس التطوير المخصص. سعّره على هذا الأساس.

الشرائح تخلق قيمة متصوّرة: سعر واحد = قرار نعم/لا. ثلاث شرائح = اختيار بين خيارات. شريحة قالب فقط، وشريحة قالب + إعداد، وشريحة قالب + تخصيص كامل تغطي ثلاثة أنواع مشترين وترفع متوسط العائد لكل عملية بيع.

الدرس: سعّر مقارنةً بالبديل الذي سيدفعه عميلك إذا لم يشترِ منك، لا مقارنةً بالقوالب الأخرى.

6. البيع — الجزء الذي لا يجهزك له أحد

بناء القالب كان الجزء الذي تدربت عليه. بيعه كان الجزء الذي علّمني التواضع.

أول محاولة كانت رسائل DM باردة لمطاعم محلية. 31 رسالة في أسبوع. رد واحد. ثم اختفاء.

المشكلة لم تكن في المنتج. المشكلة كانت في القناة والرسالة. صاحب مطعم يتلقى رسالة باردة من مطور مجهول لا يملك سببًا للثقة، ولا دليلًا اجتماعيًا، ولا إحساسًا بالإلحاح.

ما يعمل فعليًا مختلف:

اعرض عملك علنًا. كل مشروع تنهيه هو محتوى. تسجيل للشاشة أثناء تبديل أنماط القالب. قبل/بعد لموقع مطعم. شرح تقني لنظام الإعدادات. انشره حيث جمهورك موجود — LinkedIn للأعمال المحلية، وTwitter/X وInstagram للمبدعين عالميًا.

اكتب عن ما بنيته. هذه المقالة مثال. شخص يبحث عن \"how to build a web template\" ويقرأ هذا ويجده مفيدًا سيزور Dywan Dev. بعضهم سيشتري. المحتوى هو أكثر قناة بيع قابلة للتوسع لمطور مستقل بلا ميزانية تسويق.

دع أول مشترٍ يصنع الإثبات. شهادة حقيقية من عميل راضٍ أقوى من ألف رسالة باردة. بورتفوليو الفنان الذي بنيته قبل Savoura Dywan أعطاني أول شهادة. وهذه الشهادة أصبحت أساس كل محادثة بيع عندي.

الدرس: لا يمكنك بيع شيء لم يره أحد. الظهور ليس vanity. إنه بنية تحتية.

7. ماذا كنت سأفعل بشكل مختلف

لو بدأت Savoura Dywan اليوم، سأغيّر ثلاثة أمور:

• أطلق عند 80% لا 100%. السوق يعطيك ملاحظات أفضل من كماليتك. أطلق بالميزات الأساسية، اجمع ردود فعل حقيقية، وابنِ النسخة الثانية على ما يطلبه المشترون فعلًا.
• وثّق أثناء البناء لا بعده. كل قرار معماري كان حاضرًا في ذهني وقت اتخاذه. الكتابة فورًا كانت ستنتج محتوى أفضل وأكثر صدقًا من محاولة استعادته لاحقًا من الذاكرة.
• حدّد المشتري قبل سطر كود واحد. بنيت Savoura Dywan لأصحاب المطاعم، لكن الأكثر احتمالًا للشراء أولًا هم المطورون الذين يحتاجون تسليم موقع مطعم بسرعة. هؤلاء مشترون مختلفون باعتراضات وقرارات مختلفة.

الخاتمة

بناء وبيع قالب ويب كمطور مستقل ليس استراتيجية دخل سلبي. إنه عمل منتج حقيقي — بكل ما فيه من تعقيد وإحباط ومكافأة.

الذين ينجحون فيه ليسوا بالضرورة الأكثر مهارة تقنية. بل الذين ينهون ويطلقون ويكرّرون. الذين يتعاملون مع الظهور بنفس جدية جودة الكود. الذين يفهمون أن منتجًا لا يستطيع أحد الوصول إليه ليس منتجًا أصلًا.

Savoura Dywan ليس منتهيًا. لا يوجد منتج ينتهي تمامًا. لكنه أُطلق. وهو حقيقي. وكل تحسين بعد هذه النقطة يستند إلى السوق، لا إلى افتراضات فردية أمام شاشة منتصف الليل.

وهذا هو الفرق بين البناء والإطلاق.

Savoura Dywan متاح الآن — قالب موقع مطعم جاهز للإنتاج بثلاثة أنماط، ودعم متعدد اللغات، وإمكانية PWA، وإعداد كامل من ملف واحد. اعرض القالب على Dywan Dev.