EL-HELAL SITE

El-Helal: The Interactive Learning Platform El-Helal is a cutting-edge, interactive, and personalized e-learning platform. Built with modern web technologies, it leverages the power of Next.js, React, and 3D graphics (utilizing @react-three/fiber) to create an immersive and visually stunning educational environment for students, while providing robust management tools for teachers and administrators. The platform is structured around a powerful Role-Based Access Control (RBAC) system, catering to three primary users: Admin: Possesses full oversight, managing users (teachers/students), content, and system configurations. Teacher: Manages video uploads, creates dynamic quizzes, assigns tasks, tracks student progress, and collaborates via a dedicated community chat. Student: Accesses assigned video lessons, takes interactive quizzes, monitors personal learning progress, and utilizes a floating chat for immediate support. 🌟 Core Features and Technologies 1. Interactive 3D User Interface (3D UI): The platform uses the @react-three/fiber package to deliver dynamic and visually stunning elements, such as the "Hero3DBook" and "Global3DBackground," significantly enhancing user engagement. The entire interface is crafted to be modern and responsive across all devices, utilizing Next.js, React, TypeScript, Tailwind CSS, and Radix UI (for providing high-quality, accessible web components). 2. Comprehensive Video and Quiz Systems: Video Management: Teachers can upload and categorize educational video content. Students securely stream videos using the hls.js library, ensuring a smooth and adaptive viewing experience (HTTP Live Streaming). Dynamic Quiz System: Allows teachers full control over quiz creation and assignment, with automated and instantaneous tracking of student results. 3. Real-time Communication: Student Floating Chat: Provides immediate support and interaction for students. Teacher Community Chat: Facilitates collaboration and communication among teachers. 4. Security and Data Persistence: Authentication & Authorization: The platform relies on Custom Session Management implemented via middleware for secure login and role-based route protection. The bcryptjs library is used for secure password hashing. Database and Storage: The Neon Database (serverless PostgreSQL compatible) is used for efficient and scalable data storage. The @vercel/blob service handles the storage and management of large media assets like video thumbnails and user avatars. Technology Stack Summary: Frontend: Next.js, React, TypeScript, Tailwind CSS, Radix UI, @react-three/fiber, hls.js. Backend: Next.js API Routes / Server Actions. Data: Neon Database (PostgreSQL), @vercel/blob. Security: bcryptjs.