تطوير متجر إلكتروني متكامل مع نظام "Chameleon" للتحكم الديناميكي في المظهر والربط السحابي
تفاصيل العمل
منصة "Trenz 2.0" ليست مجرد متجر تقليدي؛ إنها نظام تجارة إلكترونية ذكي يعتمد على "محرك سمات" (Theme Engine) يتيح تغيير هوية الموقع وتجربة المستخدم بالكامل بضغطة زر، مع مزامنة سحابية (Cloud Sync) وميزات Smart Sourcing.
تفاصيل المشروع (The Description): قمت بتصميم وتطوير هذا النظام ليتجاوز الحلول التقليدية، حيث يمنح أصحاب الأعمال تحكماً كاملاً في مظهر ووظائف المتجر دون الحاجة لكتابة أي كود.
أهم المميزات التي تم تنفيذها:
لوحة تحكم الحرباء (Chameleon Dashboard):
نظام بصري متطور يتيح للمسؤول الاختيار بين أنماط متعددة (مثل: النمط الفاخر Luxury، النمط العصري Trendy، النمط البسيط Minimalist).
إمكانية إعادة ترتيب أقسام الصفحة الرئيسية (Hero, New Arrivals, Features) بخاصية السحب والإفلات أو أزرار التحكم اللحظية.
تحكم كامل في الألوان والخطوط من لوحة القيادة ينعكس فوراً على المتجر.
المزامنة السحابية (Cloud Sync System):
تطوير محول بيانات مخصص (Custom Adapter) يربط واجهة المتجر بقاعدة بيانات Hugging Face.
يتيح هذا النظام مزامنة المنتجات والإعدادات والطلبات لحظياً بين كافة أجهزة الإدارة (Push/Pull Mechanism).
الأتمتة والذكاء (Smart Automation):
أداة لاستيراد المنتجات من AliExpress بضغطة زر (شاملة الصور، الأسعار، والمتغيرات).
ربط تلقائي مع واتساب لإتمام الطلبات وتأكيدها.
تجرية مستخدم عالمية (UX/UI):
تصميم متجاوب بالكامل (Mobile-First) يعمل كتطبيق هاتف.
دعم لغوي كامل (عربي/إنجليزي) مع ضبط اتجاه الواجهة (RTL/LTR) تلقائياً.
2. المكدس التقني (التقنيات المستخدمة)
(استخدم هذه القائمة في قسم "المهارات" أو "تفاصيل تقنية")
الواجهة الأمامية (Frontend): React 18, Vite (لأداء فائق السرعة), TypeScript.
التصميم والتحريك: Tailwind CSS (تصميم حديث), Framer Motion (انسيابية الحركة).
إدارة الحالة: Zustand (مع تخزين محلي وتزامن).
الخلفية وقواعد البيانات (Serverless): Hugging Face Datasets (كقاعدة بيانات CMS مجانية وسريعة), Google Sheets API (لسجل الطلبات).
الربط الخارجي (APIs): تكامل مع خدمات الشحن (Bosta/Aramex) ومنصات الدفع.
3. نقاط القوة البيعية (لماذا هذا المشروع مميز؟)
? محرك سمات ديناميكي: القدرة على تغيير "Look & Feel" للموقع بالكامل (من ألوان، خطوط، وتخطيط) في ثوانٍ من لوحة التحكم، مما يوفر تكلفة تصميم قوالب جديدة.
☁️ نظام CMS "بلا رأس" (Headless): معمارية حديثة تفصل الواجهة عن البيانات، مما يضمن سرعة تحميل هائلة وأماناً عالياً.
? أداء قياسي: الموقع يحقق درجات أداء عالية (95+) على مقياس Google Lighthouse بفضل تقنيات الـ Lazy Loading والـ Code Splitting.
?️ لوحة تحكم شاملة: لا يحتاج العميل للرجوع للمبرمج لتغيير صورة بنر، إضافة منتج، أو حتى تغيير ترتيب أقسام الموقع.
4. أكواد للصور (Visual Assets)
قم بنسخ هذه الأكواد وتصويرها (Screenshot) لإظهار احترافية الكود في معرض الأعمال.
كود 1: منطق محرك السمات (Theme Engine Logic)
// Trenz 2.0 - Core Engine Logic
// src/store/ThemeEngine.ts
interface ThemeConfig {
activeTheme: 'luxury' | 'minimalist' | 'commercial';
layout: {
gridCols: 3 | 4 | 5;
heroSection: boolean;
stickyNav: boolean;
};
// نظام التصميم الذري المتغير
designSystem: {
fontFamily: string;
primaryColor: string;
borderRadius: string;
};
}
export const useThemeEngine = create<ThemeStore>((set, get) => ({
// منطق تبديل السمات الديناميكي
applyTheme: (themeName: string) => {
const themePresets = {
luxury: {
colors: { primary: '#D4AF37', bg: '#101010' }, // الذهبي والأسود
fonts: { heading: 'Playfair Display' },
layout: { gridCols: 3 }
},
commercial: {
colors: { primary: '#2563EB', bg: '#FFFFFF' }, // الأزرق التجاري
fonts: { heading: 'IBM Plex Sans Arabic' },
layout: { gridCols: 4 }
}
};
// تحديث ذري لكامل نظام التصميم
const targetConfig = themePresets[themeName];
set(state => ({
theme: { ...state.theme, ...targetConfig, activeTheme: themeName }
}));
// مزامنة فورية مع السحابة
this.syncToCloud();
}
}));
كود 2: واجهة لوحة التحكم (HTML/Tailwind)
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.c...;
<link href="https://fonts.googleapis....; rel="stylesheet">
<script>
tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['Inter'] }, colors: { primary: '#3b82f6', surface: '#111827' } } } }
</script>
</head>
<body class="bg-gray-900 text-white font-sans flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-72 bg-surface border-r border-gray-800 flex flex-col">
<div class="p-6 border-b border-gray-800 flex items-center gap-3">
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-xl">T</div>
<span class="font-bold text-lg tracking-tight">Trenz Admin</span>
</div>
<nav class="flex-1 p-4 space-y-2">
<div class="px-4 py-3 bg-blue-600/10 text-blue-400 rounded-xl flex items-center gap-3 font-medium border border-blue-600/20">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
Dashboard
</div>
<div class="px-4 py-3 text-gray-400 hover:bg-gray-800 rounded-xl flex items-center gap-3 font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
Theme Engine <span class="ml-auto text-xs bg-purple-500/20 text-purple-400 px-2 py-0.5 rounded-full">v2.0</span>
</div>
<div class="px-4 py-3 text-gray-400 hover:bg-gray-800 rounded-xl flex items-center gap-3 font-medium transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
AI Sourcing
</div>
</nav>
<div class="p-6 border-t border-gray-800">
<div class="bg-gray-800 rounded-xl p-4">
<div class="text-xs text-gray-500 font-bold uppercase mb-2">System Status</div>
<div class="flex items-center gap-2 text-sm text-green-400">
<span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span> Online
</div>
</div>
</div>
</aside>
<!-- Main Content Mock (Theme Engine) -->
<main class="flex-1 bg-gray-900 p-10">
<div class="max-w-4xl mx-auto">
<div class="flex justify-between items-end mb-8">
<div>
<h1 class="text-3xl font-bold mb-2">Chameleon Theme Engine</h1>
<p class="text-gray-400">Control your store's DNA visually.</p>
</div>
<button class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2.5 rounded-lg font-semibold shadow-lg shadow-blue-500/20 transition-all">Save Changes</button>
</div>
<div class="grid grid-cols-3 gap-6 mb-8">
<div class="bg-gray-800 p-1 rounded-2xl border-2 border-blue-500 cursor-pointer relative overflow-hidden group">
<div class="h-32 bg-gradient-to-br from-gray-700 to-gray-800 rounded-xl mb-3 relative">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 font-bold backdrop-blur-sm">Luxury</div>
</div>
<div class="px-3 pb-3">
<div class="font-bold text-white">Dark Luxury</div>
<div class="text-xs text-gray-500">Gold accents, serif fonts</div>
</div>
<div class="absolute top-3 right-3 bg-blue-500 text-white p-1 rounded-full"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg></div>
</div>
<div class="bg-gray-800 p-1 rounded-2xl border border-gray-700 cursor-pointer hover:border-gray-500 transition-colors">
<div class="h-32 bg-gray-100 rounded-xl mb-3"></div>
<div class="px-3 pb-3">
<div class="font-bold text-gray-300">Minimalist</div>
<div class="text-xs text-gray-500">Clean white, sans-serif</div>
</div>
</div>
<div class="bg-gray-800 p-1 rounded-2xl border border-gray-700 cursor-pointer hover:border-gray-500 transition-colors">
<div class="h-32 bg-blue-50 rounded-xl mb-3"></div>
<div class="px-3 pb-3">
<div class="font-bold text-gray-300">Commercial Pop</div>
<div class="text-xs text-gray-500">Vibrant, high conversion</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>