منصة تعليمية بواجهة مخصصة (BrainCrush)

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

Next.js – React.js – Material UI (MUI) – Cloudinary – Stripe – Clerk

وصف المشروع

Brain Crush هو تطبيق تعليمي بنمط Udemy، تم تطويره لاختبار حدود التخصيص العميق (Deep Customization) في MUI، ودراسة سلوكها داخل بيئات Server-Side Rendering باستخدام Next.js.

المشروع يركز على إزالة الشكل الافتراضي لـ Material Design، مع الحفاظ على قابلية الاستخدام العالية التي توفرها MUI.

لماذا تم بناء المشروع؟

- استكشاف مدى مرونة MUI Theming System

- فهم كيفية تفاعل MUI مع:

SSR

Hydration

Style Injection في Next.js

- بناء تجربة بصرية مخصصة بالكامل دون التخلي عن أدوات MUI القوية

التركيز التقني (Technical Focus)

- استخدام مكثف لنظام Theme Configuration في MUI

- إعداد Styling متوافق بالكامل مع SSR لتجنب:

Flash of unstyled content

Hydration Issues

القيمة التي يقدمها المشروع

- فهم عملي عميق لتخصيص Design Systems كبيرة

- خبرة مباشرة في دمج MUI داخل تطبيقات SSR

نموذج قابل للتطبيق في:

- منصات تعليمية

- لوحات تحكم