Hsoub/lO
تفاصيل العمل
نظرة عامة عن المشروع:
Hsoub/lO هو منصة ويب حديثة وقابلة للتوسع مصممة لتعزيز التفاعل المجتمعي، مشاركة المحتوى، والمناقشات التفاعلية. تم بناء التطبيق باستخدام Ruby on Rails 7.2.2 في الواجهة الخلفية وTailwindCSS + Hotwire في الواجهة الأمامية، ليجمع بين تصميم نظيف، أداء سريع، ووظائف غنية للمستخدمين. التطبيق متجاوب بالكامل ويدعم PWA لتجربة مثالية على جميع الأجهزة.
التقنيات المستخدمة في الواجهة الخلفية والأمامية
الواجهة الخلفية:
Ruby on Rails 7.2.2
خادم الويب Puma
قاعدة بيانات SQLite3
الواجهة الأمامية:
TailwindCSS 4.1.16 لتصميم واجهة المستخدم
Hotwire (Turbo + Stimulus) للتفاعلات الديناميكية
ESBuild لتجميع ملفات JavaScript
أيقونات Font Awesome
خط Inter للطباعة
مكتبات JavaScript والإضافات:
Stimulus.js للسلوكيات التفاعلية
Turbo للتنقل شبه SPA
إضافات TailwindCSS (النماذج، الطباعة، نسبة الأبعاد)
المصادقة والأمان
تسجيل دخول وتوثيق المستخدمين باستخدام Devise
دعم متعدد اللغات عبر devise-i18n (العربية والإنجليزية)
حماية ضد هجمات CSRF ومعالجة آمنة لكلمات المرور
تحليل أمان الكود بواسطة Brakeman
فحص جودة الكود باستخدام Rubocop
سياسات أمان المحتوى
الميزات الرئيسية
إدارة المستخدمين:
التسجيل وتسجيل الدخول وإدارة الحساب الشخصي
دعم متعدد اللغات
صفحات مستخدم مخصصة (/u/:username)
التفاعل المجتمعي:
إنشاء والانضمام إلى المجتمعات
مواضيع داخل المجتمعات
التعليقات والمناقشات والتعليقات المتفرعة
نظام التصويت وتقييم المشاركات
إدارة المحتوى:
إنشاء المنشورات ومشاركة الروابط
تنظيم المحتوى حسب المواضيع
نظام التعليقات مع التصويت
دعم Progressive Web App (PWA) – العمل بدون اتصال، تصميم صديق للهواتف، خدمة Worker، ملف Manifest)
التنقل والاكتشاف:
تصفح المجتمعات والمواضيع
البحث عن المحتوى الذي أنشأه المستخدمون
تنظيم المحتوى بشكل هرمي
واجهة المستخدم:
تصميم متجاوب وحديث يعتمد على البطاقات
تنقل تفاعلي
رسائل فلاش لتقديم التغذية الراجعة للمستخدم
الأداء والتحسين
تنقل سريع للصفحات باستخدام Turbo
استعلامات قاعدة بيانات فعّالة ودعم التخزين المؤقت
تجميع الأصول وتقليل ملفات CSS باستخدام ESBuild
تجميع حديث لملفات JavaScript
Bootsnap لتسريع بدء تشغيل تطبيق Rails
الخلاصة:
LearnMesh هو تطبيق ويب حديث، آمن، وقابل للتوسع يقدم مجموعة واسعة من الميزات لتفاعل المستخدمين، إنشاء المحتوى، والاكتشاف. تم تطويره وفق أفضل ممارسات البرمجة لضمان سهولة الصيانة، الأداء العالي، وتجربة مستخدم متميزة.
Github: https://github.com/Muhamm...
Project Overview:
Hsoub/lO is a modern, scalable web platform designed for community engagement, content sharing, and interactive discussions. Built with Ruby on Rails 7.2.2 on the backend and TailwindCSS + Hotwire on the frontend, the application combines clean design, fast performance, and rich user functionality. It is fully responsive and PWA-ready, providing an excellent experience across devices.
Backend & Frontend Technologies
Backend:
Ruby on Rails 7.2.2
Puma web server
SQLite3 database
Frontend:
TailwindCSS 4.1.16 for styling
Hotwire (Turbo + Stimulus) for dynamic interactions
ESBuild for JavaScript bundling
Font Awesome icons
Inter font for typography
JavaScript Libraries & Plugins:
Stimulus.js for interactive behaviors
Turbo for SPA-like navigation
TailwindCSS plugins (forms, typography, aspect-ratio)
Authentication & Security
User authentication with Devise
Multi-language support via devise-i18n (Arabic & English)
CSRF protection and secure password handling
Code security via Brakeman and quality checks with Rubocop
Content security policies
Key Features
User Management:
Registration, login, and profile management
Multi-language support
Custom user pages (/u/:username)
Community Engagement:
Create and join communities
Topics within communities
Comments, discussions, and nested comments
Voting and rating system for posts
Content Management:
Create posts and share links
Organize content by topics
Comment system with voting
Progressive Web App support (offline, mobile-friendly, service worker, PWA manifest)
Navigation & Discovery:
Browse communities and topics
Search user-generated content
Hierarchical content organization
User Interface:
Responsive, modern card-based layout
Interactive navigation
Flash messages for feedback
Performance & Optimization
Fast page transitions with Turbo
Efficient database queries and caching
Asset bundling and CSS minification with ESBuild
Modern JavaScript bundling
Bootsnap for faster Rails boot
Conclusion:
LearnMesh is a modern, scalable, and secure community web application that provides a rich set of features for user interaction, content creation, and discovery. Built following best practices, it ensures maintainability, performance, and a high-quality user experience.
Github: https://github.com/Muhamm...