WIRO Stadium — موقع ومتجر Next.js 16 بلوحة تحكم مبنية من الصفر وطلبات على واتساب

مواقع شركات • wirostadium.com

wirostadium.com

WIRO Stadium — موقع ومتجر Next.js 16 بلوحة تحكم مبنية من الصفر وطلبات على واتساب — 1

WIRO Stadium — موقع ومتجر Next.js 16 بلوحة تحكم مبنية من الصفر وطلبات على واتساب — 2

WIRO Stadium — موقع ومتجر Next.js 16 بلوحة تحكم مبنية من الصفر وطلبات على واتساب — 3

WIRO Stadium — موقع ومتجر Next.js 16 بلوحة تحكم مبنية من الصفر وطلبات على واتساب — 4

WIRO Stadium — موقع ومتجر Next.js 16 بلوحة تحكم مبنية من الصفر وطلبات على واتساب — 5

WIRO Stadium — موقع ومتجر Next.js 16 بلوحة تحكم مبنية من الصفر وطلبات على واتساب — 6

1 / 6

نبذة عن المشروع

موقع ومتجر ثنائي اللغة (إنجليزي + عربي RTL) لمؤسسة WIRO Stadium لتعليم الروبوتكس والذكاء الاصطناعي في مصر والإمارات، مبني على Next.js 16 و React 19 و TypeScript بمواصفات العميل التفصيلية. فيه برامج VEX مرتّبة كسُلّم، ومسابقات وشركاء ومقالات، ومتجر WIRO Store بسلة و Checkout وطلبات بتوصل للفريق على واتساب — وكله بيتدار من لوحة تحكم عربية مكتوبة من الصفر من غير قاعدة بيانات.

22,354سطر TypeScript

187ملف مصدري

44API handler

34مكوّن React

14صفحة لكل لغة

16منتج في المتجر

5مكتبات تشغيل فقط

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

Frontend

Next.js 16 (App Router)React 19TypeScript 5CSS Modules

Backend

Next.js Route Handlers on Node.js 20atomic file-based JSON data store (no database)

Libraries

only 5 runtime dependencies — hand-written SVG chartsZIP writer/reader over zlibWeb Crypto sessions

Integrations

WhatsApp Cloud APIwebhooks (n8n / Make / Zapier)Google Analytics 4LibreTranslate / Google / DeepL

Hosting & DevOps

Hostinger Node.js + pm2data directory outside the projectlink / CSS / token audit scripts

الموقع العام

لغتين: ‎/ إنجليزي و ‎/ar عربي، والنصوص كلها في ملفات محتوى typed.
الصفحات: الرئيسية، البرامج وتفاصيلها، المسابقات، المتجر والمنتج والـ Checkout، الشركاء، من نحن، التواصل، المقالات، والصفحات القانونية.
VEX Ladder: 8 مسارات معروضة كسُلّم عشان ولي الأمر يعرف ابنه يبدأ منين.
Hero بخلفية صورة أو فيديو بتتحكم فيها اللوحة، ومعرض مسابقات بـ Lightbox.

المتجر والطلبات

سلة على localStorage بتتزامن بين التابات، وعرض أسعار حسب اللغة والعملة.
رقم طلب مقروء (WIRO-2026-0007)، وحفظ السعر وقت الطلب، ومسار حالات (new ← contacted ← confirmed ← paid ← fulfilled) بسجل تاريخي، وتسجيل مصدر الزيارة (UTM).
وصول الطلب لواتساب على 3 مستويات: WhatsApp Cloud API، ثم Webhook، ثم رابط wa.me جاهز كحل أخير بيشتغل دايمًا.
فورمات Leads للأفراد والمدارس (B2C / B2B).

لوحة التحكم (مبنية من الصفر)

نظرة عامة بـ KPIs ومقارنة بالفترة السابقة ورسوم اتجاه وتوزيع حسب المدينة والاهتمام والمصدر — رسوم SVG مرسومة يدويًا.
محرر محتوى recursive لكل نصوص الموقع باللغتين، مع رجوع للمحتوى الأصلي.
إدارة الهوية (لوجو، favicon، خلفية الـ Hero)، الإعدادات، المقالات، المنتجات والأقسام والطلبات، مكتبة الوسائط.
صندوق Leads ببحث وفلترة وتصدير CSV يفتح العربي صح في Excel.
باك أب واسترجاع بملف ZIP بضغطة واحدة — والـ ZIP مكتوب يدويًا.
ترجمة آلية اختيارية (LibreTranslate / Google / DeepL) بتنزل في الفورم للمراجعة قبل النشر.

الأداء والسيو

canonical و hreflang لكل صفحة، و sitemap و robots تلقائيين، و JSON-LD.
Dark/Light Theme بدون وميض، وحركات Scroll و CountUp بدون مكتبات وبتحترم تقليل الحركة.

الأمان

دخول اللوحة fail-closed بجلسة موقّعة HMAC-SHA256 ومقارنة باسورد constant-time.
Rate limiting على الدخول والفورمات والطلبات، و honeypot، وتنضيف المدخلات.
الملفات المرفوعة (حتى SVG) بتتقدّم بـ CSP sandbox و nosniff لمنع XSS.

تحديات تقنية اتحلّت

العميل كان بيفقد ملفاته مع كل نشر — نقل البيانات تلقائيًا خارج المشروع مع باك أب ZIP.
واتساب مفيهوش إرسال مجاني سيرفر لسيرفر — 3 مستويات، آخرها دايمًا شغال.
صفحة 404 كانت بتخرج الموقع كله من الـ static generation — صفحة 404 باللغتين معًا.
sharp مش مضمون على الاستضافة — صور بدون optimization، و ZIP من غير dependency.
Migration من Cloudflare KV لتخزين بملفات على Node.