Cooks-deligh — Blog

وصف المشروع:

قمت ببناء منصة وصفات ومحتوى ديناميكية تعتمد على نظام إدارة محتوى (CMS) باستخدام Next.js وTypeScript، مع التركيز على القابلية للتوسع، سهولة الصيانة، والأداء العالي.

تعتمد المنصة على Sanity CMS لإدارة المحتوى بشكل مرن، مع بنية مكونات قابلة لإعادة الاستخدام ورسوم متحركة محسّنة لتجربة مستخدم حديثة.

أبرز الإنجازات:

تصميم معمارية منصة تعتمد على CMS باستخدام Next.js App Router مع دمج:

Hybrid Static Generation عبر generateStaticParams

Dynamic Route Segments لإنشاء صفحات قابلة للتوسع

بناء مخططات (Schemas) منظمة داخل Sanity لنمذجة:

الوصفات

المقالات

التصنيفات

الأقسام القابلة لإعادة الاستخدام

مما يتيح إدارة محتوى مرنة وسهلة التوسّع.

تطوير نظام Dynamic Block Rendering يربط قيم _type القادمة من Sanity بمكونات React قابلة لإعادة الاستخدام، مما يسمح ببناء الصفحات ديناميكيًا دون الحاجة لكتابة Layout ثابت لكل صفحة.

دمج Sanity باستخدام استعلامات GROQ منظمة وجلب بيانات من الخادم (Server-side fetching) للحفاظ على معظم الواجهة كمكونات Server Components وتحجيم Client Components للوظائف التفاعلية فقط.

تنفيذ نظام تصفية حسب التصنيف (Category Filtering) وبحث ديناميكي مع Debouncing باستخدام SWR و API Routes مخصصة.

إنشاء PortableText Renderers مخصصة لدعم:

النصوص المنسقة

الصور

القوائم

الفقرات المجمعة

Decorators مخصصة للمحتوى التحريري

توسيع مكتبة Embla Carousel عبر:

منطق مخصص لتجميع الشرائح متعددة الصفوف (Multi-row slide grouping)

أدوات تنقل قابلة لإعادة الاستخدام لدعم تخطيطات معقدة

استخدام Radix UI (Popover – Dialog) لبناء مكونات تفاعلية قابلة للوصول مثل:

نافذة البحث المنبثقة

النوافذ الحوارية (Modals)

تنفيذ شريط موافقة على ملفات تعريف الارتباط (Cookie Consent Banner) مع حفظ تفضيلات المستخدم باستخدام Cookies في المتصفح.

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

Next.js – React – TypeScript – Tailwind CSS – Sanity CMS – Framer Motion – SWR – Radix UI – Embla Carousel