DevSecOps Digest
Щоденний DevSecOps дайджест

Learning portal investigation

notes · 2026-03-24

Контекст

Маємо PDF-матеріали для навчання сина і плануємо довантажувати ще: математика, фізика, хімія, біологія та інші предмети. Ціль — не просто складувати PDF-и, а зробити освітній вебпортал, де:

  • матеріали можна читати прямо на сайті, а не відкривати як сирі PDF;
  • контент структурований по класах, предметах, темах, тижнях, модулях;
  • є тести / quiz / self-check;
  • є хороший UI/UX для дитини й для батьків;
  • далі можна додати персоналізацію та AI-based tutoring.

Що насправді треба будувати

Не “сайт з PDF”, а content pipeline + learning experience.

Проєкт має 4 шари:

  1. Ingestion layer — забір PDF, OCR/парсинг, нормалізація, сегментація по уроках/темах.
  2. Content model — предмет → клас → тема → урок → блоки контенту → запитання.
  3. Learning UI — портал для читання матеріалів, навігації, прогресу, тестування.
  4. AI layer — допомога з конвертацією контенту, генерацією quiz, пояснень, summaries, tutoring flows.

Найкращий практичний підхід сьогодні

1. Не рендерити PDF як “основний UX”

PDF повинен бути джерелом, а не кінцевим інтерфейсом.

Правильніше:

  • PDF → extraction → structured markdown / HTML / JSON blocks
  • далі на сайті показувати вже:
    • теми
    • пояснення
    • формули
    • таблиці
    • ілюстрації
    • завдання
    • quiz blocks

Чому це важливо:

  • кращий mobile UX;
  • кращий search;
  • легше додати тести;
  • легше адаптувати контент під дитину;
  • легше додати AI tutoring.

2. PDF viewer лишити як fallback

На сторінці уроку можна мати:

  • primary view: нормальний HTML lesson page
  • secondary view: “відкрити оригінальний PDF”

Тобто PDF не зникає, але перестає бути головним experience.

Рекомендований стек

Frontend / product layer

Найкращий practical стек для такого продукту:

  • Next.js — основний web framework
  • Vercel — hosting, preview deploys, швидкий product loop
  • Tailwind CSS — швидка UI розробка
  • shadcn/ui — strong baseline для якісного UI без кустарщини
  • MDX або structured JSON content — для lesson pages

Чому не Hugo як основа цього продукту:

  • Hugo ок для digest/blog/docs;
  • але для interactive learning portal він слабший як app platform;
  • тести, progress, personalized flows, auth, analytics, AI features — краще робити в Next.js.

Content / data layer

  • Postgres (через Supabase або Neon) — metadata, lessons, quizzes, progress
  • Object storage (S3 / R2 / Vercel Blob) — оригінальні PDF та assets
  • Structured content format:
    • markdown/MDX для authored lesson pages
    • JSON schema для quiz/questions/learning blocks

Auth / user layer

  • Supabase Auth або Clerk

Для сімейного порталу я б схилився до Supabase як більш простого full-stack компромісу.

  • початково: Postgres full-text search
  • пізніше: Meilisearch / Typesense / Algolia

Testing / quiz engine

Потрібна окрема модель:

  • question
  • options
  • answer
  • explanation
  • difficulty
  • topic
  • grade
  • source lesson

Це важливо не змішувати з “просто markdown текстом”.

AI stack: що реально варто використовувати

1. Clawbot multi-agent workflow — так, це корисно

Для цього проєкту мультиагенти дуже доречні, бо робота природно ділиться на підзадачі:

  • agent: ingestion — парсинг PDF, OCR, cleanup
  • agent: curriculum mapper — розбиття на предмети/уроки/теми
  • agent: quiz generator — генерація тестів із source material
  • agent: UX/content editor — покращення формулювань, readability для дитини
  • agent: engineering — Next.js / API / DB / deploy

Тобто OpenClaw / clawbot multi-agent тут — хороший orchestration layer.

2. Claude Opus 4.x — так, але не як єдиний інструмент

Для цього завдання сильні моделі типу Claude Opus корисні для:

  • long-context reading PDF extracts;
  • curriculum restructuring;
  • написання lesson pages;
  • генерації пояснень і quiz;
  • product / UX thinking.

Але важливо:

  • не покладати все на один великий промпт;
  • краще будувати pipeline з verification;
  • quiz generation має перевірятися source-backed rules.

Тобто Opus — хороший “reasoning/content engine”, але не заміна системному pipeline.

3. Що ще варто додати

  • OCR / extraction tools: Marker, PyMuPDF, pdfplumber, OCRmyPDF, Tesseract (де треба)
  • Embeddings / retrieval — тільки якщо робитимеш AI tutor або semantic search
  • Evaluation layer — перевірка якості quiz і summaries

Яка архітектура виглядає найздоровіше

Phase 1 — MVP

Зробити:

  • Next.js app
  • Vercel deploy
  • Supabase DB
  • object storage for PDFs
  • ingestion pipeline: PDF → structured lessons
  • уроки в HTML/MDX
  • simple quiz engine
  • basic parent/student UX

Phase 2 — Better UX

Додати:

  • progress tracking
  • topic mastery
  • recommended next lesson
  • cleaner navigation by grade/subject/topic
  • search
  • saved bookmarks / continue reading

Phase 3 — AI tutor

Додати:

  • “поясни простіше”
  • “зроби 5 питань по цій темі”
  • “де я помиляюсь”
  • adaptive difficulty
  • child-safe tutoring tone

Який UI/UX потрібен

Ключова думка: це має бути не LMS for admins, а child-friendly learning product.

Що важливо:

  • великі чіткі картки предметів
  • простий маршрут: клас → предмет → тема → урок
  • мінімум clutter
  • progress bar
  • після уроку відразу quiz
  • explanations after mistakes
  • “continue where you left off”
  • окрема parent view для огляду progress

Для дизайну

Рекомендований стек:

  • Tailwind + shadcn/ui для baseline
  • Figma або v0-style prototyping для UI ideation
  • AI можна використовувати для генерації first-pass layouts, але фінальний UX треба руками шліфувати

Що я б не радив

1. Не будувати це як просто “сховище PDF + chat”

Це буде слабкий UX і погана навчальна система.

2. Не починати з over-engineered AI tutor

Спочатку потрібен:

  • якісний контент-модель
  • lesson structure
  • quiz engine
  • navigation

Без цього AI лише маскує хаос.

3. Не брати Hugo як основну app platform

Для статей/блогу — чудово. Для interactive learning portal — ні.

Product stack

  • Next.js
  • Vercel
  • Supabase
  • Tailwind CSS
  • shadcn/ui
  • MDX + JSON content schema

AI / automation stack

  • OpenClaw / clawbot multi-agents — orchestration
  • Claude Opus-class model — content restructuring, deep reasoning, quiz generation
  • PDF extraction stack — Marker / PyMuPDF / OCRmyPDF / pdfplumber
  • Optional retrieval layer — later, for AI tutor/search

Practical recommendation

Якби я будував це з нуля сьогодні, я б робив так:

  1. Залишив би Hugo для notes / digest / documentation
  2. Основний learning portal будував би окремо на Next.js
  3. PDF перетворював би в structured lessons
  4. Quiz engine тримав би як first-class feature, а не “додаток потім”
  5. AI використовував би для content production and review, а не як substitute for architecture

Good references