مورا للقهوة المختصة

نقطة البداية كانت هوية بصرية مكتملة — شعار، ألوان، خطوط، صور منتجات — ومواصفات حركة مفصّلة بشكل غير معتاد، تضم ٢٥ سلوكًا مرقّمًا بمدد وتسارعات وقيم تتابع محددة. الشيء الوحيد غير الموجود كان الموقع نفسه.

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

قيد واحد شكّل كل ما عداه — لا يوجد backend حقيقي. وهذا ليس نقصًا نعتذر عنه، بل قرار في تحديد النطاق، والسؤال المثير يصبح: أي أجزاء المتجر يمكن أن تعمل فعليًا من دونه.

• الرئيسية، المتجر، المنتج، السلة، إتمام الشراء، الدفع، تأكيد الطلب، التتبع، المفضلة، أدلة التحضير، من نحن، صفحة ٤٠٤
• خيارات المنتج بأسعار محدّثة لحظيًا، ووعي بالمخزون، وحالات نفاد
• درج سلة وسلة كاملة، وتقدير الشحن حسب المحافظة، وأكواد خصم
• إتمام شراء بتحقق من صيغ الموبايل المصرية، ودفع بالبطاقة أو عند الاستلام
• لوحة التحكم: نظرة عامة، إدارة منتجات كاملة، حالات طلبات بسجل تدقيق، ومخزون لكل SKU
• نسخة عربية كاملة بـ RTL حقيقي — لا طبقة ترجمة مركّبة من فوق

مسارًا، بلغتين

25مسارًا، بلغتين

مكوّنًا

32مكوّنًا

سطر TypeScript

8,500+سطر TypeScript

ملفًا مُسلَّمًا، لم يُعَد إنتاج أي منها

17ملفًا مُسلَّمًا، لم يُعَد إنتاج أي منها

سرد التقنيات المستخدمة لا يقول شيئًا. المفيد في دراسة الحالة هو القرارات التي كان لها بديل حقيقي — لذلك يذكر كل قرار هنا ثمنه، لا ما تم اختياره فحسب.

1. ٠١

   بدون حسابات للعملاء

   شراء كضيف، مع البحث عن الطلب برقمه.

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

   الثمن · لا عناوين محفوظة ولا سجل عبر الأجهزة. صفحة التتبع تعرض كل طلب صدر من هذا المتصفح، وهو ما يغطي الحالة الواقعية.

2. ٠٢

   الشعار مكتوب بخط حي، لا صورة مُسلَّمة

   الشعار مضبوط بخط حقيقي بدلًا من وضعه كصورة.

   الشعار وصل بصيغة JPG بخلفية داكنة خاصة به، تظهر كمربع واضح فوق الأسود شبه الكامل للموقع. وبما أن Cormorant Garamond هو خط العلامة نفسه، فكتابته بالخط تعيد إنتاج الشعار بدقة وتبقيه حادًا عند أي حجم.

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

3. ٠٣

   لوحتا ألوان متعارضتان، حُسم الأمر بالقياس

   ‏#C9A96E أخذ كل أدوار النص والتفاعل. و‏#AC8760 بقي زخرفيًا.

   لوحة الهوية حددت الذهبي العتيق ‏#AC8760، ومواصفات الحركة حددت ‏#C9A96E. وبدلًا من الاختيار بالذوق، قيس اللونان مقابل الخلفية شبه السوداء — ‏8.6:1 مقابل ‏5.9:1. الذهبي الأفتح يتجاوز معيار AAA لنص المتن، والعتيق لا يتجاوزه.

   الثمن · لم يُتَّبع أي من المستندين حرفيًا. وكلا اللونين باقٍ كـ token، فالتراجع عن القرار تغيير في سطر واحد.

4. ٠٤

   المخزون على الوزن، لا على درجة الطحن

   كيس ٥٠٠ جم هو SKU واحد، سواء طُحن للإسبريسو أو للفلتر.

   المحامص تخزّن بالوزن وتطحن عند الطلب. اعتبار الطحن بُعدًا في المخزون كان سيضاعف عدد الـ SKU ثلاث مرات، ويصف عملية تشغيل غير موجودة أصلًا.

   الثمن · لا ثمن في هذا المجال. هو ببساطة النموذج الصحيح، ويُبقي شاشة المخزون مطابقة للواقع.

5. ٠٥

   بوابة الدفع تفشل، عن قصد

   بطاقات اختبارية تُرفَض، ورقم مرجعي للمعاملة، وإعادة محاولة تعمل فعلًا.

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

   الثمن · لا شيء يُرسَل ولا بطاقة تُخصم. واستبدالها بـ Paymob أو Stripe يعني تغيير مكوّن واحد، لا إعادة كتابة المسار.

6. ٠٦

   الحركة مبنية على tokens العميل، لا على مكتبة

   ٢٥ سلوكًا محددًا، منفّذة بـ CSS مع observer واحد مشترك.

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

   الثمن · كود أكثر من مجرد import. وفي المقابل يطابق المواصفات حرفيًا ويشحن JavaScript أقل بكثير — الاعتماد الوحيد على مكتبة حركة محصور في مكوّن واحد، وينفصل عن كل صفحة لا تستخدمه.

7. ٠٧

   العربية توطين حقيقي، لا طبقة ترجمة

   خطوط منفصلة، وخصائص منطقية، وتعطيل تام للتباعد بين الحروف.

   خطا Cormorant وManrope لا يحتويان حروفًا عربية، فكانت العربية سترتد إلى ما يوفّره نظام التشغيل. كما أن التصميم اللاتيني يعتمد على التباعد بين الحروف في عناوينه — لكن العربية متصلة، والتباعد يفكّ وصلات الحروف. هذه التفصيلة وحدها أشهر سبب يجعل موقعًا عربيًا يبدو مكسورًا.

   الثمن · نظاما خطوط يحتاجان صيانة. وفي المقابل يقرأ الجانب العربي كأنه صُمم أولًا، لا كأنه مرّ على مترجم.

8. ٠٨

   المحتوى الذي يبدأ مخفيًا ينجو من تعطّل JavaScript

   الأقسام التي تظهر بالتمرير تبدأ عند شفافية صفر — مع مخرجَي طوارئ.

   قاعدة داخل <noscript> تلغي الإخفاء تمامًا، ومسح دوري عند التمرير وتغيّر الظهور يلتقط ما فات الـ observer. فالتبويب الخلفي يعلّق عمل IntersectionObserver، وبدون هذا المسح يظل أي عنصر مُرِّر عليه وهو مخفي غير مرئي إلى الأبد.

   الثمن · قليل من التكرار مقابل حالة فشل لا تعالجها أغلب المواقع — وهو سبب استحالة وصول أي زائر إلى صفحة فارغة.

9. ٠٩

   لوحة التحكم مفتوحة، وهذا آمن

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

   لوحة التحكم هي ما يفصل بين بناء موقع وبناء نظام، فلا بد أن تكون قابلة للفتح. وكل قيمة قابلة للكتابة تعيش في localStorage الخاص بذلك الزائر — وقد تُحقق من ذلك على النسخة المنشورة بالعبث بكتالوج في متصفح والتأكد أن الخادم ما زال يقدّم الأصل لكل الآخرين.

   الثمن · تعديلات لوحة التحكم لا تبقى عبر الأجهزة. صحيح لنموذج تجريبي، خطأ للإنتاج، وهو خط مرسوم عن قصد لا نتيجة إهمال.

أكثر أجزاء الوصف تطلّبًا كان مستندًا يسرد ٢٥ سلوكًا حركيًا: تسلسل تحميل الواجهة، وانتقال شريط التنقل، وتمرير المؤشر فوق بطاقة المنتج، والظهور بالتمرير، وكشف الصور، وparallax بمعامل ٠٫٨٥، وحالات الأزرار، وتسلسل الإضافة للسلة، ودرج السلة، وأزرار الكمية، واختيار الخيارات، والمفضلة، والشارات، والروابط، والعناوين، والتذييل، والتحميل، وانتقالات الصفحات، وقواعد الموبايل، وقيود الوصولية والأداء — وتنتهي بقاعدة تقول إن كل حركة يجب أن تخدم الفهم أو التغذية الراجعة أو الإحساس بالجودة، وما عدا ذلك يُحذف.

الخمسة والعشرون كلها منفّذة. تحوّلت tokens المواصفات إلى tokens في ملف الأنماط، فصارت المدد والتسارعات المذكورة في الوصف هي حرفيًا العاملة في المتصفح. وقد تُحقق من تسلسل الإضافة للسلة مقابل المواصفات بقياسه: ضغط، ثم «جارٍ الإضافة» عند ١٥٠ مللي ثانية، ثم «تمت الإضافة» عند ٦٠٠ مللي ثانية بعد الحد الأدنى المحدد ٥٠٠، ثم فتح الدرج عند ٩٠٠، والعودة للسكون خلال ثانيتين.

‏prefers-reduced-motion محترمة بشكل صحيح لا معطّلة بالجملة: يُزال الـ parallax والتتابع وانتقالات الصفحات والتحويلات الكبيرة، وتبقى انتقالات الألوان والحدود، وتتوقف الأشرطة المتحركة فتصبح قابلة للتمرير يدويًا، وتستمر مؤشرات التحميل في الدوران حتى تظل تعني «جارٍ العمل».

ضبط النطاق جزء من العمل. كل بند هنا دُرس ثم استُبعد لسبب مذكور.

حسابات حقيقية

الشراء كضيف يغطي السلوك من دون backend.

نقاط الولاء

تحتاج backend حتى يكون لها معنى.

مساعد ذكاء اصطناعي

لا يوجد هنا سؤال يجيب عنه روبوت محادثة أفضل من الصفحة نفسها.

فوترة اشتراكات حقيقية

المدفوعات المتكررة تحتاج بوابة حية وحساب تاجر حقيقي.

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