
عميل · 2026
عُمدة ستوديوموقع ثنائي اللغة ونظام إدارة محتوى مخصص لاستوديو إنتاج سعودي
موقع ثنائي اللغة يبدأ من العربية ونظام إدارة محتوى مخصص لاستوديو إنتاج بصري سعودي — مبني كصالة عرض.
- العميل
- عُمدة ستوديو
- السنة
- 2026
- الدور
- تصميم + تطوير متكامل
- الخدمات
- تصميم, تطوير, نظام إدارة محتوى
- التقنيات
- Next.js · React · TypeScript · Tailwind CSS · Framer Motion · Supabase · PostgreSQL · Row-Level Security · Supabase Storage · Email OTP · JWT · Resend · Zod · RTL / i18n · Vercel
التحدي
موقع شركة الإنتاج له مهمة واحدة: يثبت إنها تعرف تصوّر. عُمدة احتاجت الأعمال في الواجهة، وتقدر تضيف مشروعها بنفسها يوم ما يخلص، بدون ما ترجع لمطوّر.
الفكرة
بنيت الموقع كصالة عرض: الريل في الواجهة، والمشاريع تنفتح مكانها كمقاطع تشتغل، ونظام إدارة بدون كلمات مرور يدير منه الاستوديو كل مقطع وكل سطر.
اقرأ تفاصيل البناء كاملة
عُمدة ستوديو شركة إنتاج بصري في الرياض. صمّمت الموقع وبنيته كمسار داكن واحد متصل: الريل يعمل في الواجهة، والمشاريع تُفتح في مكانها كمقاطع قابلة للتشغيل، فيصير الموقع صالة عرض بإضاءة مطفأة. خلفه نظام إدارة محتوى مبني خصيصاً: الاستوديو يدير كل مشروع وكل مقطع وكل سطر نصّي من لوحة تحكم، بتسجيل دخول برمز يصل إلى بريده. بلا كلمات مرور، وبلا نظام إدارة محتوى جاهز، وبلا لوحة تحتاج تعلّماً.
موقع شركة إنتاج له مهمة واحدة: إثبات قدرتها على التصوير. أغلب المواقع تدفن الأعمال خلف صور جاهزة ونموذج تواصل. عُمدة احتاجت العكس — العمل في المقدمة، مع قدرة الفريق على إضافة مشروع بنفسه يوم انتهائه دون الرجوع إلى مطوّر.
الموقع ستة أقسام مفصولة بخطوط شعرية ومرقّمة كبطاقات معرض: الريل، البيان، الخدمات، الأعمال، العملاء، التواصل. تُفتح المشاريع في نافذة فوق الشبكة حتى لا يفقد الزائر موضعه، لكن كل بطاقة تبقى رابطاً حقيقياً، فالنقر مع ⌘ يفتح الصفحة المستقلة وتراها محرّكات البحث أيضاً. وخلف ذلك نظام إدارة كامل على /admin: إنشاء المشاريع وإعادة ترتيبها، ورفع المقاطع والصور، وتحرير كل نص في الموقع، وتحديد من يُسمح له بالدخول. الدخول بلا كلمة مرور — رمز من ستة أرقام يصل بالبريد، يُستبدل بجلسة مدتها ٢٤ ساعة.
العربية هي التي فرضت القيود، لا شبكة التصميم. كشف العناوين يتحرك بالكلمات لا بالحروف، لأن تقطيع الحروف يكسر أشكال الوصل ويُنتج نصاً بلا معنى. والعربية لا تُباعد حروفها ولا تعرف الحروف الكبيرة، فكل عنصر طباعي لاتيني احتاج توأماً عربياً بدل مجرد تبديل اللغة. والخلل صامت: الخط الذي لا يغطي العربية لا يُصدر خطأً، بل يستبدله المتصفح بهدوء. اكتشفت أرقام الفهرس تُرسم بخط Times New Roman والنص بخط Arial بسؤال المتصفح عن الخط الذي رسم كل حرف فعلياً — لأن CSS يخبرك بما طلبته لا بما حصلت عليه.
تسليم الفيديو كان التحدي الآخر. تصل المقاطع إلى ٤٥ ميغابايت، وحدود الطلبات في البيئة الخادمة أقل من ذلك بكثير، فلا يمكن أن يمر الرفع عبر الخادم أصلاً: الخادم يُصدر رابطاً موقّعاً ويكتب المتصفح مباشرة إلى التخزين. وفي جانب فك الترميز، المقاطع بصيغة HEVC داخل حاوية QuickTime تعمل على الحاسب ولا تعمل في المتصفح، فكان لا بد أن يُظهر النظام الخطأ بوضوح بدل عرض مستطيل أسود.
الوصول إلى البيانات على مستويين: أمان الصفوف يجعل القراءة آمنة بمفتاح المتصفح، وكل تعديل يمر عبر مسار خادم يحمل صلاحية الخدمة، فلا يحمل العميل أبداً مفتاحاً قادراً على التغيير، وجداول تسجيل الدخول غير قابلة للوصول من المتصفح إطلاقاً.
الرسومات مرسومة لا مصدّرة. قسم التواصل شريط فيلم تتدرّج لقطاته من رسم خطّي، إلى تكوين مبدئي، إلى مشهد مُضاء، إلى لقطة نهائية — عنوان القسم مُجسَّداً لا موصوفاً بجانبه. كله شيفرة وتنسيقات، يتمدد ويتلوّن مع لوحة الألوان، ويحمل اهتزاز بوابة العرض: أقل من بكسل واحد من الحركة الرأسية، لأن الفيلم الحقيقي لا يثبت تماماً وهو يمر ببوابة العارض. والحركة كلها كتلة واحدة: منحنى تسارع واحد للموقع كله، ومكوّن دخول واحد، وزر واحد، وبلا أي ظلال — العمق من تباين الأسطح وخطوط بسماكة بكسل.
نحو ٧٬٣٠٠ سطر في ٦٤ ملفاً، و١٧ مساراً (٩ صفحات و٨ نقاط API)، و٦ جداول بأمان صفوف على كل واحد منها، و١٢ اعتماداً في وقت التشغيل — بلا مكتبة واجهات، وبلا مكتبة حالة، وبلا ORM — وخطّان فقط.

الشاشات





بالحركة
على الجوال



ابدأ مشروعك