SkillFlow

English

SkillFlow — AI-Powered Personalized Learning Roadmap Platform

SkillFlow is an AI-driven, personalized learning platform that dynamically generates interactive learning roadmaps tailored to each user's goals, current level, background, and available time. Instead of generic course lists, it builds a structured, navigable path through any topic — backed by real educational content and an AI engine that adapts as the learner progresses.

Key Features:

AI-Driven Roadmap Generation – users enter a topic, answer a short set of customization questions, and receive a structured learning path generated as a Directed Acyclic Graph (DAG) of prerequisites

Interactive Canvas – roadmaps are explored visually on a node-link canvas powered by React Flow

Smart Resource Integration – each node is automatically populated with real-world resources (Udemy, Coursera, YouTube, W3Schools) sourced through a custom data pipeline

Node Chat Explainer – click into any node to start a context-aware AI conversation focused specifically on that subtopic

Interactive Quizzing – AI-generated multiple-choice quizzes verify understanding; passing completes the node and updates progress

Remedial Learning Paths – on a failed quiz, the system analyzes mistakes and automatically injects targeted remedial subtopics as new prerequisites

Conversational Roadmap Editing – users can modify their roadmap by simply telling the AI assistant to add, remove, or reorder nodes

Architecture & Tech Highlights:

Medallion Data Pipeline (Bronze → Silver → Vector layers): scrapers collect raw educational content into MinIO, Airflow DAGs clean and normalize it into Supabase Postgres, and processed content is embedded into a Vector Database (Qdrant/Pgvector) for semantic search

RAG (Retrieval-Augmented Generation) engine built with FastAPI + LangChain, generating topologically ordered learning sequences and matching each subtopic to real indexed resources

NestJS API layer orchestrating requests between the frontend, the RAG service, and the database, with Drizzle ORM + PostgreSQL for roadmap/node persistence

React Flow frontend for interactive DAG visualization and node-level interaction

Fully streaming architecture — nodes and edges are streamed back to the frontend as they're generated rather than waiting on a single bulk response

Dedicated endpoints for quiz generation (/generate-quiz) and remedial path generation (/generate-remedial), forming a closed feedback loop between assessment and content delivery

This project demonstrates the ability to design and ship a genuinely complex, multi-service AI system — spanning data engineering (ETL/ELT pipelines), vector search, LLM orchestration, and a polished real-time interactive frontend — well beyond a typical CRUD application.

العربية

SkillFlow — منصة خرائط تعلّم ذكية ومخصّصة مدعومة بالذكاء الاصطناعي

SkillFlow هي منصة تعليمية مدعومة بالذكاء الاصطناعي، تقوم بإنشاء خرائط تعلّم (Roadmaps) تفاعلية ومخصصة بشكل ديناميكي بناءً على هدف المستخدم، مستواه الحالي، خلفيته التعليمية، والوقت المتاح له. بدلًا من قوائم الدورات العامة، تبني المنصة مسارًا منظمًا وقابلًا للتنقل لأي موضوع، مدعومًا بمحتوى تعليمي حقيقي ومحرك ذكاء اصطناعي يتكيّف مع تقدّم المتعلّم.

أهم المميزات:

توليد خرائط تعلّم بالذكاء الاصطناعي – يدخل المستخدم موضوعًا، يجيب على مجموعة قصيرة من أسئلة التخصيص، ويحصل على مسار تعليمي منظّم على هيئة رسم بياني موجّه غير دوري (DAG) يوضح المتطلبات المسبقة

لوحة تفاعلية (Canvas) – استعراض والتنقل في خريطة التعلّم بشكل بصري عبر مكتبة React Flow

دمج موارد تعليمية ذكي – يتم تزويد كل عنصر (Node) بموارد حقيقية (Udemy، Coursera، YouTube، W3Schools) يتم جمعها عبر خط بيانات (Data Pipeline) مخصص

شرح تفاعلي عبر المحادثة – يمكن فتح أي عنصر وبدء محادثة ذكاء اصطناعي مرتبطة بسياق ذلك الموضوع الفرعي بالتحديد

اختبارات تفاعلية – اختبارات اختيار من متعدد مولّدة بالذكاء الاصطناعي للتحقق من الفهم؛ النجاح فيها يُكمل العنصر ويحدّث التقدّم

مسارات تعلّم علاجية (Remedial) – عند فشل المستخدم في اختبار، يحلل النظام الأخطاء تلقائيًا ويضيف مواضيع علاجية مخصصة كمتطلبات جديدة في الخريطة

تعديل الخريطة بالمحادثة – يمكن للمستخدم تعديل خريطته التعليمية بمجرد طلب ذلك من المساعد الذكي (إضافة، حذف، أو إعادة ترتيب العناصر)

أبرز التقنيات والبنية المستخدمة:

خط بيانات Medallion (طبقات Bronze → Silver → Vector): يقوم الزاحف (Scrapers) بجمع المحتوى التعليمي الخام في MinIO، ثم تقوم Airflow DAGs بتنظيفه ودمجه في Supabase Postgres، وأخيرًا يتم تحويل المحتوى المعالَج إلى تمثيلات Embeddings وتخزينه في قاعدة بيانات متجهية (Qdrant/Pgvector) لإتاحة بحث دلالي (Semantic Search)

محرك RAG (التوليد المعزّز بالاسترجاع) مبني باستخدام FastAPI و LangChain، يقوم بتوليد تسلسل تعليمي مرتب منطقيًا، ويربط كل موضوع فرعي بموارد حقيقية من قاعدة البيانات

طبقة API بـ NestJS لتنسيق الطلبات بين الواجهة الأمامية، خدمة RAG، وقاعدة البيانات، مع استخدام Drizzle ORM وPostgreSQL لحفظ بيانات الخرائط والعناصر

واجهة أمامية بـ React Flow لعرض الرسم البياني (DAG) والتفاعل معه على مستوى كل عنصر

بنية بث كاملة (Streaming) – يتم بث العناصر والروابط (Nodes & Edges) للواجهة الأمامية أثناء توليدها، بدلًا من انتظار استجابة واحدة دفعة واحدة

نقاط API مخصصة لتوليد الاختبارات (/generate-quiz) والمسارات العلاجية (/generate-remedial)، لتشكيل حلقة تغذية راجعة متكاملة بين التقييم وتقديم المحتوى

يُبرز هذا المشروع القدرة على تصميم وتطوير نظام ذكاء اصطناعي معقد ومتعدد الخدمات بالفعل — يشمل هندسة بيانات (خطوط ETL/ELT)، بحث متجهي (Vector Search)، تنسيق نماذج اللغة الكبيرة (LLM Orchestration)، وواجهة أمامية تفاعلية ولحظية متقنة — بمستوى يتجاوز بكثير تطبيقات CRUD التقليدية.