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

البداية: مشكلة دفعتني للحل

بدأت فكرة المشروع من تجربة شخصية مع خدمة ghost.org. كنت أواجه مشكلة في الاعتماد على منصات تخزن بياناتي، وأدركت حينها أن البيانات التي نضعها على هذه المنصات ليست ملكنا بالكامل. وأثبت كلامي عندما انتهى الTrail الخاص بي في المنصة وقاموا بحذف المقالات الخاصة بي مطالبيني بدفع مبلغ مالي لاستعادة ما امتلكه. وعلى الرغم من أن الخطأ كان من جهتي حيث انني لم أقم بالانتباه إلى مجموعة الرسائل التي أتتني في صندوق البريد الخاص بي، إلا أن هذه التجربة حفزتني على إنشاء مدونة خاصة بي داخل موقعي، بحيث أتحكم بشكل كامل في بياناتي وأضمن أنها في أيدٍ أمينة.

الأدوات والتقنيات المستخدمة

لبناء موقعي بسهولة قمت بالاعتماد على العديد من التقنيات الحديثة مع اضافة بعض اللمسات الخاصة بي

1. Next.js

اخترت Next.js كإطار عمل رئيسي لتطوير الموقع بسبب دعمها القوي لعدة انواع من الRendering مثل ال SSR وال ISR وال CSR كذلك سهولة تسطيبها والعمل عليها حيث انها تحافظ على جوهر React الاساسي مع بعض التحسينات

2. Tailwind CSS

اعتمدت على Tailwind CSS لتصميم الواجهة بالكامل؛ لما تقدمه من مرونة وسرعة في تطوير التصاميم المتجاوبة والأنيقة.

3. TipTap

استخدمت مكتبة TipTap كمحرر نصوص أساسي للمدونة ثم قمت بإضافة عدة ميزات لتناسب احتياجاتي، منها:
- رفع الصور:
يدعم السحب والإفلات، مع عرض معاينة فورية للصورة بعد تحويلها إلى صيغة Base64. يتم رفع الصور في الخلفية باستخدام Tigris Storage الذي يوفر تخزينًا مدمجًا مع S3 ويعمل كشبكة توزيع محتوى (CDN) لتحسين الأداء.

- الحفظ التلقائي:
يعتمد على الStroke Detection مع تقنية Debounce لتقليل الأخطاء وضمان أن الكتابة تُحفظ بسلاسة أثناء العمل.

4. Tigris Storage

بدلاً من استخدام AWS S3 مباشرة، اخترت Tigris Storage لتكامله مع S3 السهل وأيضا قدرته على توزيع الملفات عبر أقرب نقطة للمستخدم، مما يحسن من الأداء ويجعل التجربة أكثر كفاءة دون أي تعقيدات إضافية.

5. Framer Motion
أضفت تأثيرات بسيطة باستخدام Framer Motion، مثل Fade-In عند التنقل بين الصفحات. هذه الحركات الجمالية تضيف لمسة حيوية وتجعل تجربة التصفح أكثر سلاسة وجاذبية.

6. Zustand

في البداية، فكرت في إدارة الState بنفسي، ولكنني واجهت مشاكل مثل Race Conditions وProp Drilling التي أضافت تعقيدًا كبيرًا للمشروع. لذلك قررت استخدام مكتبة Zustand، التي تقدم حلولًا فعالة وقابلة للتنبؤ بها. المميز في Zustand هو نهجها المركزي في إدارة الState، مما يخلق Single Source of Truth، وبالتالي يقلل من المشاكل المرتبطة بتمرير الحالة عبر العديد من المكونات (Component) وصناعة دوال معقدة داخل كل مكون. بدلاً من ذلك، تجد كل ما تحتاجه في مكان واحد مركزي، مما يبسط الأمور بشكل كبير. أنصح بشدة أي شخص بتفادي محاولة إدارة State يدويًا، والاعتماد على Zustand في حال كانت الحاجة لإدارة حالة التطبيق معقدة. تعلمت بالطريقة الصعبة أن التحكم بكل شيء يدويًا ليس دائمًا الحل الأمثل! 😅

كيف أستضفت المشروع على السحابة(Cloud)؟

ماتشاهدة الان هو موقعي مستضاف على سحابة Vercel(لم تكن تجربة رائعة سأتحدث عن مشاكلها في وقت لاحق🫤), والمقالة مستضافة على قاعدة بيانات PostgreSQL اخترت عدم استخدام تقنية SSG (Static Site Generation) لإنشاء المدونة، بالرغم من أن ذلك يزيد التكاليف. ولكن هذا القرار يمنحني حرية أكبر في إدارة موقعي وتوفير خيارات تخصيص أكثر لعرض المقالات.

صحيح أنني لم أستغل جميع هذه الخيارات بشكل كامل بعد، لكنني بالتأكيد أخطط للقيام بذلك في المستقبل.

وأيضا كما ذكرت سابقاً، استخدمت تقنية S3 لحفظ الصور, ولكن من خلال منصة Tigris بدلاً من الاعتماد على AWS مباشرة.

وهذه صورة لحسابي على منصة X لتجربة المدونة في أول مقال أقوم بنشره عليها :)

التحديات والخطط المستقبلية

بالرغم من أن النظام الحالي يعمل بشكل جيد جدا، إلا أن هناك بعض التحديات التي أعمل على تحسينها، مثل تطوير تقنية الحفظ التلقائي في محرر النصوص لضمان عملها بدقة وفعالية أكبر، وأيضًا تحسين ميزة الفورمات التلقائي لعلامات الMarkdown و الفورمات بشكل عام يحتاج اعادة تحسين بسيطة ليصبح أكثر سلاسة ودقة. أما بالنسبة للخطط المستقبلية:

- رغم أن مصدر المدونة والموقع بالفعل مفتوح، إلا أنني أرى أن بعض المكونات (Components) مثل ال Cursor و**المحرر النصي** تتميز بتصميمها المتقدم وأدائها العالي. لذلك، أفكر في فتح مصدرها بشكل مستقل كمكتبات يمكن لأي شخص استخدامها في مشاريعه.

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

- ميزة الاشتراك عبر البريد الإلكتروني: عندما أقوم بنشر مقال جديد، يتم إرساله مباشرةً إلى البريد الإلكتروني للمشتركين. هذا سيمكنهم من متابعة المحتوى الجديد بسهولة وعدم تفويت أي تحديثات.

- إنشاء فيد RSS: سأقوم بتفعيل خدمة فيد RSS، مما يتيح للمستخدمين متابعة آخر المقالات والتحديثات بشكل تلقائي عبر تطبيقات القراءة التي تنسابهم.

الختام

تجربة بناء موقعي ومدونتي كانت مليئة بالتحديات والمتعة. إذا كنت تفكر في بناء مشروع مشابه، أنصحك بالاعتماد على الأدوات التي تلبي احتياجاتك الفعلية دون تعقيد. والأهم أن تستمتع بالرحلة وتتعلّم من كل خطوة فيها.

شكرًا لوقتكم، وأتمنى أن تكونوا قد استفدتم من هذا المقال.

اذا واجهتك أي مشاكل اثناء قراءة المقال مثل بعض النصوص غير واضحة أو مشاكل اخرى سأكون سعيدا بسماع ذلك!

كيف صنعت موقعي ومدونتي الخاصة