EL-HELAL

El-Helal is a cutting-edge interactive learning platform designed to provide an engaging and personalized educational experience. Built with the modern web in mind, it leverages the power of Next.js, React, and 3D graphics to create an immersive environment for students, while offering robust management tools for teachers and administrators.

This platform is structured around distinct user roles: Admin, Teacher, and Student, each with tailored functionalities and access levels. From dynamic 3D hero sections to secure video streaming and comprehensive quiz systems, El-Helal aims to redefine online education.

Core Features

# System Status: Operational

# Core Modules Loaded:

Interactive 3D User Interface (@react-three/fiber):

Experience dynamic and visually stunning 3D elements, such as the Hero3DBook and a Global3DBackground, enhancing user engagement and providing a modern aesthetic.

Role-Based Access Control (RBAC):

Admin: Full control over user management (teachers, students), content oversight, and system configurations.

Teacher: Manages their own video content, creates and assigns quizzes, monitors student progress, and interacts via a dedicated community chat.

Student: Accesses assigned video lessons, takes quizzes, tracks their learning progress, and engages in a floating chat for support.

Comprehensive Video Management:

Teachers can upload, categorize, and manage educational video content.

Students can securely stream videos with hls.js, ensuring a smooth and adaptive viewing experience.

Dynamic Quiz System:

Teachers can create, edit, and assign quizzes to students.

Students can take interactive quizzes, with results and progress tracked.

Secure Authentication & Authorization:

Robust session management ensures secure login and protects routes based on user roles, redirecting unauthorized access.

Real-time Communication:

Student Floating Chat: Provides immediate support and interaction for students.

Teacher Community Chat: Facilitates collaboration and communication among teachers.

Modern & Responsive UI/UX:

Crafted with Next.js, React, Tailwind CSS, and Radix UI for a fast, responsive, and visually appealing interface across all devices.

Scalable Data Persistence:

Utilizes Neon Database (PostgreSQL compatible) for efficient and scalable data storage.

Integrated Blob Storage (@vercel/blob):

Seamlessly handles storage for media files such as video thumbnails, user avatars, and other assets.

️ Technologies & Stack

# Initializing tech stack scan...

# Scan complete. Dependencies identified.

Frontend

Next.js: React framework for building performant web applications.

React: A JavaScript library for building user interfaces.

TypeScript: Superset of JavaScript that adds static typing.

Tailwind CSS: A utility-first CSS framework for rapid UI development.

Radix UI: Unstyled, accessible components for building high-quality design systems.

@react-three/fiber & drei: React renderer for Three.js, enabling declarative 3D scenes.

hls.js: JavaScript library for playing HLS (HTTP Live Streaming) videos.

Geist Fonts: Modern, open-source fonts for a clean aesthetic.

Backend

Next.js API Routes / Server Actions: For handling server-side logic and API endpoints.

Neon Database: Serverless PostgreSQL database for robust data storage.

@vercel/blob: Vercel's solution for storing and serving files.

bcryptjs: Library for hashing passwords securely.

Authentication

Custom Session Management: Implemented using middleware.ts and lib/auth.ts for secure, role-based authentication.

Development Tools

ESLint: Pluggable JavaScript linter.

Prettier: Opinionated code formatter.

npm: Package manager for JavaScript.

Vercel: Platform for deployment (implied by @vercel/blob and Next.js).

Project Structure

# Navigating filesystem...

# Displaying directory tree: