بناء موقع إسلامي تفاعلي للأطفال

كأب ومهندس، كنت عايز أعمل حاجة ليها قيمة للأطفال المسلمين — مكان يتعلموا فيه عن الأنبياء والقرآن والقيم الإسلامية من خلال حكي تفاعلي بدل نص جامد. الفكرة دي بقت Islamic Kids Stories، وClaude Code ساعدني أطلّعها للنور.

الفكرة

أغلب المحتوى الإسلامي التعليمي للأطفال يا إما ملفات PDF ناشفة يا إما فيديوهات YouTube من غير أي تفاعل. أنا كنت عايز حاجة مختلفة: موقع الأطفال يقلّبوا فيه شرايح قصص مرسومة بشكل جميل، ويجاوبوا على أسئلة اختبار، ويكسبوا نجوم، ويسمعوا السرد بـالإنجليزي والعربي. من غير app store. ومن غير تحميل. بس افتح لينك وابدأ اتعلم.

اللي بنيناه

الموقع منصة تعليم إسلامي تفاعلية بالكامل وبلغتين. دي اللي جواه:

أهم المميزات

البناء مع Claude Code

المشروع ده كان أكبر من مدونة عادية. كل صفحة قصة تجربة تفاعلية قايمة على شرايح، فيها animations واختبارات وأنشطة drag‑and‑drop وتشغيل صوت ومحتوى بلغتين. وClaude Code شال ده كله كـ pair programmer.

الشغل كان كله دردشة. كنت بوصف اللي عايزه — «⁦make a story about Prophet Nuh with slides, a quiz at the end, and audio narration⁩» — وClaude يولّد صفحة HTML كاملة بالـ inline styles، ونظام الشرايح، والـ logic بتاع الاختبار، وتوصيل الصوت. ولما كنت عايز تعديلات — «⁦add a drag-and-drop activity to slide 5⁩» — كان Claude يقرا الملف الموجود، ويفهم الـ structure، ويحط الـ feature في مكانه الصح.

اللي أبهرني أكتر هو إزاي Claude اتعامل مع تعقيد اللغتين. النص العربي محتاج layout من اليمين للشمال، وخطوط مختلفة، وحرص في التعامل مع الكلام اللي فيه الاتجاهين مع بعض. Claude كان بيعملها صح كل مرة، وبدّل بين Poppins للإنجليزي وAmiri/Noto Sans Arabic للنص العربي، مع RTL styling مظبوط.

الـ Tech Stack

زي مشاريعي التانية، خليت الـ stack بسيط عن قصد:

HTML وCSS وJavaScript خالص — من غير React ومن غير build tools ومن غير npm. كل صفحة قصة فيها كل اللي محتاجاه لوحدها. الموقع بيفتح فوراً، وبيشتغل offline بعد أول تحميل، وهيفضل شغّال سنين من غير صيانة.

ElevenLabs TTS لتوليد سرد صوتي عالي الجودة. كتبت script Node.js بيقرا محتوى القصة من ملف JSON ويولّد ملفات صوت إنجليزي وعربي لكل شريحة. الصوت طالع طبيعي ودافي — بالظبط اللي محتاجه في محتوى الأطفال.

LocalStorage لتتبّع التقدّم. من غير backend ومن غير database. اسم الطفل وعدد النجوم والقصص اللي خلّصها بيفضلوا محفوظين في المتصفح بتاعه. بسيط وخاص ومضمون.

الدروس اللي اتعلمتها

محتوى الأطفال محتاج جودة أعلى

لما بتبني للأطفال، كل حاجة بتفرق أكتر. اللغة لازم تبقى بسيطة من غير ما تكلّمهم من فوق. والتفاعل لازم يبقى مفهوم لوحده من غير تعليمات. والـ feedback لازم يبقى فوري ويشجّع. Claude ساعدني أحافظ على المستوى ده في كل صفحة.

إن الموقع يبقى بلغتين صعب، بس يستاهل

دعم الإنجليزي والعربي مكانش مجرد ترجمة نص. معناه layouts من اليمين للشمال، وخطوط مختلفة، وtracks صوت منفصلة، وتبديل سلس بين اللغتين. والتعب ده بيجيب نتيجة — بيفتح الموقع لعائلات من كل حتة في العالم.

المواقع الـ static تستحمل أي تعقيد

المشروع ده فيه شرايح تفاعلية وتشغيل صوت وdrag‑and‑drop واختبارات وتتبّع تقدّم ودعم للغتين — كله من غير framework ومن غير build step. وإني ألزم نفسي بالبساطة طلّع في الآخر code أنضف وأسهل في الصيانة.

شوفه بنفسك

الموقع live على hisham-abuella.github.io/Interactive-Islamic-kids-website. لو عندك أطفال صغيرين أو تعرف أسرة مسلمة، شاركه معاهم. ببلاش تماماً، من غير إعلانات، ومن غير تتبّع، ومعمول بحب.

قصص وسور قرآن أكتر جاية في الطريق. والحلم إني أبني أكتر منصة إسلامية ممتعة ومجانية للأطفال على الويب — قصة ورا قصة.