تخطي إلى المحتوى
#مشروعمميّزتطبيقات الويب

Git Snaps - مدونة تعليمية للمطورين

منصة تعليمية تفاعلية تُحوّل دروس وشروحات كتاب Pro Git إلى مقالات ولابات تطبيقية، مع بحث فوري محلي، دعم المخططات البيانية، واستضافة سريعة على Cloudflare.

  • React 19
  • Vite 8
  • Tailwind CSS v4
  • Cloudflare Workers
  • Mermaid.js
Git Snaps - مدونة تعليمية للمطورين

عن_المشروع

مشروع Git Snaps هو منصة تعليمية تفاعلية موجهة للمطورين، تهدف إلى تبسيط مفاهيم نظام إدارة الإصدارات Git وتقديمها بأسلوب عملي وبصري غير معقد. يعتمد محتوى المشروع على كتاب Pro Git الشهير الذي يُعد المرجع العالمي الأساسي لتعلّم Git، حيث جرى تعديله وإعادة صياغته ليصبح أسهل استيعاباً وأسرع وصولاً.

نظرة عامة على المشروع

بُني المشروع باستخدام React 19 و Vite، ويتضمن بحثاً فورياً محلياً ودعماً للمخططات البيانية عبر Mermaid، مع استضافة سريعة على Cloudflare Workers.

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

  • React 19
  • Vite 8
  • Tailwind CSS v4
  • Cloudflare Workers
  • Mermaid.js

المزايا التقنية والمعمارية

معمارية محتوى قائمة على Markdown وديناميكية بالكامل

يستند المشروع إلى ملفات Markdown مُخزنة داخل مستودع الكود وتُترجم ديناميكياً في متصفح العميل بواسطة React Markdown مع دعم GitHub Flavored Markdown (GFM). يتيح هذا التصميم إضافة وتعديل المحتوى بكل سهولة عن طريق إضافة ملفات .md دون الحاجة لقواعد بيانات خلفية معقدة.

لابات عملية وتطبيق (Hands-On Labs)

كل درس نظري مدعوم بـ لاب تطبيقي (Hands-On Lab) مصمم لتمكين المطور من ممارسة الأوامر والتطبيق، مما يعزز الفهم النظري بالخبرة العملية اللحظية.

محرك بحث محلي فائق السرعة (Client-Side Search)

دعم البحث النصي الكامل في المتصفح باستخدام FlexSearch، حيث يُنفَّذ البحث بالكامل على جهة العميل (Zero Server Requests)، مما يمنح نتائج لحظية واستجابة فائقة أثناء الكتابة.

دعم المخططات البيانية التفاعلية عبر Mermaid.js

دمج مكتبة Mermaid لعرض شجرة الفروع (Branching)، عمليات الدمج (Merging)، وإعادة الأساس (Rebasing) في شكل مخططات بيانية وتفاعلية داخل المقال للتمثيل البصري للعمليات.

تظليل وتلوين الكود (Syntax Highlighting)

تلوين لجميع الأوامر والسيناريوهات عبر React Syntax Highlighter لتعزيز تجربة القراءة والوضوح.

أداء عالي واستضافة خفيفة (100% Static & Cloudflare)

  • تجميع استاتيكي بالكامل يوفر أداءً عالياً وسرعة انتقال بين الصفحات لا تتعدى 100 ملي ثانية.
  • نشر خادمي سحابي واستضافة عبر Cloudflare Workers لتأمين وصول سريع جداً من أي مكان في العالم.

تجربة مستخدم متكاملة (UI/UX)

  • دعم الوضع الداكن (Dark Mode) عبر تبديل سلس وبدون توهج باستخدام متغيرات Tailwind CSS v4 المخصصة.
  • فهرس محتويات عائم (Floating TOC) يعمل على توليد تلقائي لفهرس العناوين داخل المقال لتسهيل التنقل.
  • حفظ التقدم (Bookmarking) من خلال إمكانية حفظ المقالات واللابات للرجوع إليها لاحقاً بنقرة واحدة.

الجمهور المستهدف

  • المطورون المبتدئون الراغبون في فهم وتعلّم Git بأسلوب سلس.
  • المطورون المحترفون الباحثون عن مرجع سريع لأوامر وحالات Git المعقدة.
  • صناع المحتوى والمدربون الراغبون في استخدام واستغلال مواد تعليمية جاهزة ومفتوحة المصدر.

ما يميّز هذا المشروع

  • مرجع عالمي بمظهر حديث يعيد تحويل كتاب Pro Git النصي إلى منصة تفاعلية سريعة.
  • أداء ممتاز (Jamstack) يعتمد بشكل كامل على معالجة جهة العميل والملفات الاستاتيكية.
  • تطبيق عملي مدمج يجمع بين الشرح النظري، المخططات البصرية، واللابات التطبيقية في مكان واحد.

التفاصيل

دوري في المشروع
مطورة واجهة أماميّة
نوع المشروع
مفتوح المصدر
مدة المشروع
مستمر
التقنيات
React 19Vite 8Tailwind CSS v4Cloudflare WorkersMermaid.js

اضغط على أي صورة لعرضها بالحجم الكامل

مشاركة_المشروع