كتالوج مختبر ونظام لإدارة المحتوى وتطبيق للأعضاء
Peptex
قدت المشروع مع فريق Admix Lab، وشمل موقع كتالوج أعدنا بناءه، ولوحة إدارة يعدّل منها فريق المختبر كل صفحة في الموقع وكل منتج وكل نص في التطبيق، وتطبيقًا للأعضاء يحجز فيه العملاء استشارات عبر الفيديو، ويتصفحون الكتالوج، ويراسلون المختبر، ويتابعون منشورات المجتمع. ويمكن تثبيت التطبيق من المتصفح على iPhone وAndroid، أو عبر ملف APK موقّع لأجهزة Android، دون المرور بأي متجر تطبيقات. والموقع ولوحة الإدارة والواجهة البرمجية لتطبيق الأعضاء كلها جزء من تطبيق Next.js واحد.
- العميل
- Peptex Lab، أتلانتا، الولايات المتحدة
- السنة
- 2026
- الدور
- مسؤول المنتج والتطوير، Admix Lab
- الحالة
- قيد التشغيل
- المنصّات
- الموقع، لوحة الإدارة، تطبيق الأعضاء
المشترون والأعضاء المحتملون. إعادة بناء لموقع الكتالوج الخاص بالمختبر، كل نصوصه وصوره وقوائمه محفوظة في قاعدة البيانات، فيحدّثها الفريق من لوحة الإدارة. وترشد صفحة تحميل التطبيق زوار الموقع على iPhone وAndroid خطوة بخطوة إلى تثبيت تطبيق الأعضاء.
- كل صفحات الموقع وكل نصوص التطبيق قابلة للتعديل من نظام إدارة المحتوى
- تطبيق ويب قابل للتثبيت وملف APK موقّع لأجهزة Android، من شيفرة React واحدة باستخدام Capacitor
- تسجيل الدخول بمفاتيح المرور (passkeys) عبر Face ID أو Touch ID أو بصمة الإصبع
- حجز الاستشارات بتوقيت العيادة، مع منع تعارض المواعيد وإنشاء غرفة فيديو تلقائيًا
التحدي
كان لدى مختبر Peptex في أتلانتا موقع للكتالوج، وأراد موقعًا يعدّله فريقه بنفسه دون الحاجة إلى مطور، وتطبيقًا يحجز فيه العملاء استشارات عبر الفيديو، ويسجلون في الدورة الإلكترونية التي يقدمها المختبر، ويراسلونه، ويتابعون منشورات المجتمع.
وكان على التطبيق أن يصل إلى مستخدمي iPhone وAndroid دون حساب على App Store أو Google Play، وعلى النظام كله أن يعمل على منصة Vercel السحابية (serverless) التي لا توفر قرصًا دائمًا للتخزين، مع الحفاظ على خصوصية هوية كل عضو أمام بقية الأعضاء.
النهج
أنشأت مع فريق Admix Lab مستودعًا واحدًا (monorepo) بإدارة pnpm فيه تطبيقان. يضم تطبيق Next.js 16 الموقع و13 شاشة إدارة و74 معالجًا لمسارات الواجهة البرمجية، ويعمل فوق Prisma وPostgreSQL على Neon مع 28 نموذجًا للبيانات. أما تطبيق الأعضاء فتطبيق ويب قابل للتثبيت (PWA) مبني على Vite وReact 19، ويحزم Capacitor 8 الشيفرة نفسها في ملف APK موقّع لأجهزة Android. ويضغط التطبيق الصور على الهاتف قبل رفعها، ويحفظ الخادم الملفات المرفوعة في Postgres لأن Vercel لا يوفر قرصًا دائمًا.
كل نص وصورة وقائمة في الموقع والتطبيق، إلى جانب الكتالوج وأعضاء الفريق ومواعيد الاستشارات، محفوظ في قاعدة البيانات ويعدّله فريق المختبر من لوحة الإدارة. وتفتح مفاتيح API العمليات نفسها أمام الأنظمة الأخرى، بصلاحية محددة لكل مفتاح، ولا يحفظ النظام منها سوى قيمة التجزئة (hash)، ولا تقبلها مسارات الأعضاء في الواجهة البرمجية أبدًا.
يسجل الأعضاء دخولهم بكلمة المرور أو بمفتاح مرور (passkey)، ويضيف تطبيق Android قفلًا بيومتريًا من نظام الجهاز. ويتحقق الخادم من كل حجز بتوقيت العيادة داخل معاملة متسلسلة (serializable) في قاعدة البيانات، فلا يحجز عضوان الموعد نفسه، ثم ينشئ له غرفة على Jitsi برابط يصعب تخمينه، ويستطيع فريق المختبر استبدالها برابط Meet أو Zoom. ويسجل الأعضاء في الدورة الإلكترونية عبر تحويل بنكي يؤكده الفريق من لوحة الإدارة، أما الدفع بالبطاقة عبر Stripe Checkout مع التأكيد الآلي عبر webhook فجاهز، لكنه متوقف إلى أن يضيف المختبر مفاتيح Stripe الخاصة به.
الأثر
يعمل الموقع ولوحة الإدارة وتطبيق الويب القابل للتثبيت على Vercel، ويمكن تنزيل الإصدار 1.2.0 من تطبيق Android مباشرة من الموقع. وجرت 14 عملية نشر على بيئة الإنتاج بين 27 سبتمبر و7 أكتوبر 2026، أولاها بعد أسبوعين من تسلّم التصميم في 13 سبتمبر.
ويستطيع العملاء تثبيت التطبيق على iPhone أو Android دون متجر تطبيقات، بإرشاد من صفحة تحميل التطبيق ونافذة التثبيت داخله. ويغيّر فريق المختبر أي نص أو منتج أو إعداد خاص بالاستشارات دون الحاجة إلى مطور، ويتابع حجوزات كل عضو ورسائله ومدفوعاته من لوحة واحدة.
المشترون والأعضاء المحتملون
الموقع
إعادة بناء لموقع الكتالوج الخاص بالمختبر، كل نصوصه وصوره وقوائمه محفوظة في قاعدة البيانات، فيحدّثها الفريق من لوحة الإدارة. وترشد صفحة تحميل التطبيق زوار الموقع على iPhone وAndroid خطوة بخطوة إلى تثبيت تطبيق الأعضاء.
- كتالوج يتيح البحث والتصفية حسب الفئة وترتيب النتائج
- صفحات للمنتجات تضم معرض صور ومواصفات، وتستمد بياناتها من الكتالوج في لوحة الإدارة
- صفحة لتحميل التطبيق: فتح تطبيق الويب أو تنزيل ملف APK الموقّع لأجهزة Android، مع خطوات التثبيت على iPhone وAndroid
- تصميم متجاوب من الهاتف إلى الحاسوب، مع إعدادات SEO وخريطة موقع يولّدها النظام تلقائيًا
فريق المختبر
لوحة الإدارة
يدير فريق المختبر الموقع والتطبيق من 13 شاشة في لوحة الإدارة، تشمل محتوى كل صفحة في الموقع وكل قسم في التطبيق، والكتالوج، والأعضاء، والرسائل، والحجوزات، والمدفوعات، ومنشورات المجتمع.
- محرر محتوى لكل صفحة في الموقع وكل قسم في التطبيق، ومنها الترويسة والتذييل والصفحة الرئيسية والكتالوج وصفحة من نحن وطريقة الطلب والتواصل والصفحات القانونية وإعدادات SEO والأسئلة الشائعة
- محرر للمنتجات مع رفع الصورة الرئيسية وصور المعرض، وخيار يحدد إن كان المنتج متوفرًا
- ملفات الأعضاء مع تعديل البيانات وإعادة تعيين كلمة المرور وإرسال إشعارات داخل التطبيق لعضو محدد، إلى جانب إشعارات عامة لجميع الأعضاء
- مفاتيح API للأنظمة الأخرى بصلاحية قراءة أو كتابة: يظهر المفتاح مرة واحدة عند إنشائه، ولا يحفظ النظام منه سوى قيمة التجزئة (hash)، ويمكن إلغاؤه في أي وقت
الأعضاء
تطبيق الأعضاء
تطبيق واحد مبني على React يمكن تثبيته من المتصفح على iPhone وAndroid، ويتوفر أيضًا على شكل ملف APK موقّع لأجهزة Android. ويحجز فيه الأعضاء استشارات عبر الفيديو، ويتصفحون الكتالوج، ويراسلون المختبر، ويتابعون منشورات المجتمع، دون المرور بأي متجر تطبيقات.
- حجز الاستشارات خلال الأيام السبعة المقبلة بتوقيت العيادة، مع تحقق الخادم من تعارض المواعيد وإنشاء غرفة فيديو لكل حجز
- تسجيل الدخول بكلمة المرور أو بمفتاح مرور (passkey) عبر Face ID أو Touch ID أو بصمة الإصبع، ويطلب تطبيق Android التحقق البيومتري من جديد إذا بقي في الخلفية أكثر من دقيقة
- قسم للمنتجات يعرض الكتالوج نفسه الذي يعدّله الفريق في لوحة الإدارة
- لا يرى الأعضاء الآخرون إلا الاسم الأول أو الأوسط، ولا يظهر لهم الاسم الكامل أو البريد الإلكتروني أبدًا
التقنيات
- TypeScript
- Next.js 16
- React 19
- Prisma 6
- PostgreSQL (Neon)
- Vite 8
- Capacitor 8
- SimpleWebAuthn
- zod 4
- pnpm workspaces
- Vercel
التكاملات
- Jitsi Meet
- WebAuthn passkeys
- Android biometrics
- Google Calendar and .ics