Онлайн-платформа для изучения английского языка (LMS)
1. Цель проекта
Создать онлайн-платформу для изучения английского языка с моделью обучения:
45 минут — автоматизированный урок + 15 минут — онлайн-занятие в Zoom с преподавателем.
Платформа должна позволять:
автоматизировать часть урока (тесты, задания, аудио, тексты, видео);
показывать преподавателю результаты ученика до Zoom-занятия;
продавать уроки / курсы
2. Технологический стек (предлагаемый)
Frontend: Next.js (React, TypeScript, Tailwind CSS)
Backend: Node.js + NestJS
Админка: PayloadCMS
База данных: PostgreSQL
Хостинг: VPS (оформлен на заказчика)
⚠️ Важно:
Frontend для учеников должен быть полностью кастомным по дизайну (Figma), независимо от выбора админки.
3. Роли пользователей
Админ / Преподаватель
Ученик
4. Админка / Конструктор уроков (КРИТИЧНО)
Админ должен самостоятельно, без кода и без программиста:
создавать и редактировать уроки;
добавлять блоки урока:
текст
аудио
видео
картинки
тесты
менять порядок блоков внутри урока;
включать / выключать урок;
добавлять дополнительные страницы урока (ДЗ, контрольная).
Админка должна быть:
5. Тесты (КРИТИЧНО)
Система тестирования внутри уроков должна поддерживать:
банк заданиями (20–30 вариантов тестов) ; примеры по ссылке на figma
банк с блоками (видео, каритинка, текст, аудио).
6. Для ученика
Ученик должен иметь возможность в личном кабинете:
пройти урок, выполняя задания;
получить ответы и подсказки(если не правильно)
увидеть результат;
перейти к Zoom-уроку по кнопке ( если забронировал).
7. Для преподавателя
Преподаватель должен:
8. Оплата и доступ
9. Дизайн
10. Контроль и права
11. Этапы разработки
1 Этап - админ панель с возможностью создавать задания внутри уроков
2 Этап - фронтенд, полный дизайн сайта
3 Этап - слияние фронтенда и бекенда с админкой
4 Этап - настройка автоматических оплат wayforpay
ЛОГІКА РОБОТИ САЙТУ (USER FLOW + FUNCTIONAL LOGIC)
1. Головна сторінка
Головна сторінка містить:
коротку інформацію про платформу та методику навчання;
пояснення формату навчання;
переваги (автоматизовані уроки + заняття з викладачем);
CTA-кнопки:
Зареєструватися
Визначити рівень
Переглянути курси
Дизайн і структура — відповідно до наданих макетів Figma.
2. Реєстрація учня
Користувач проходить реєстрацію:
3. Визначення рівня англійської
Користувачу пропонується 2 варіанти:
Варіант А — тест на визначення рівня
Варіант Б — вибір рівня вручну
4. Рекомендація продукту
Після визначення рівня система показує рекомендацію, що придбати.
Два основні продукти:
ВАРІАНТ 1 — Самостійне навчання (без викладача)
ВАРІАНТ 2 — Повний рівень з викладачем (дорожчий)
доступ до всіх уроків рівня 32 уроків+контрольні і дз;
заняття з викладачем - 32 заняття теж ;
бронювання занять можливе тільки після покупки уроків.
5. Оплата
Після вибору продукту:
користувач переходить до оплати;
після успішної оплати відкривається доступ відповідно до придбаного тарифу.
впродовж 3 днів можливо змінити рівень. 1 закриється - бажаний відкриється.
6. Уроки та бронювання занять
6.1 Уроки
користувач бачить сторінку з уроками свого рівня;
уроки відкриваються відповідно до логіки доступу;
відповіді учня зберігаються і не можуть бути змінені (ні учнем, ні викладачем).
6.2 Домашнє завдання
7. Календар та заняття з викладачем
календар доступний тільки після покупки індивідуальних уроків;
учень може забронювати заняття ( чи 1 чи всі 32 заздалегіть) з викладачем;
якщо учень має лише уроки без викладача — доступна опція докупити заняття.
8. Кабінет викладача
У кабінеті викладача відображається:
8.1 Результати учнів
8.2 Календар занять
8.3 Оплати
Викладач бачить статистику оплат:
Загальна сума:
Розподіл:
уроки з викладачем;
уроки без викладача.
9. Словник (інтерактивна функція)
10. Дизайн
ответы програмиста на вопросы:
нужно же оплату отдельно брать за уровни. А уровней 8 шт (а1 а2 а2+ в1 в1+ в2 в2+ с1), после отплати - открывается только 1 уровень, который ученик выберет. Я же не смогу за 3 дня заполнить все уровни уроками. Мне нужно будет закрыть доступ к покупки пустых уровней, пока я не буду готов(пока не заполню). Я потом сам смогу открыть доступ к уровню с оплатой? через админ панель. - Да, могу добавить чекбокс, скрывать ли курс на сайте, это не проблема
Где именно я буду работать: в PayloadCMS или в кастомной админке? - Админка будет построена на PayloadCMS и стилизована под Вас
Где будет храниться код? - у Вас на VPS
Админка - платная в год? - Нет, тоже будет лежать у вас на сервере
ссылка на пример уроков и тестов: https://www.figma.com/design/QzSeYepBLjHuGNxibMDDEC/Untitled?node-id=0-1&p=f&t=j8iJhCUiwt1l16zI-0
ссылка на прмер дизайна по сайту (вспомогательно) - https://www.figma.com/design/K1krkBTJYgJ1nOVesr3gOF/Untitled?node-id=0-1&p=f&t=Ata5rH65vcpAgeC5-0
также добавляю воросы на отпределения уровня
Вконце оказалось, что под ключ нереально оформить проект,
Оплата проекта производится поэтапно.
Переход к следующему этапу и следующая оплата
осуществляются только после демонстрации
и принятия результата предыдущего этапа
20% — старт ($300)
30% — после Этапа 1 ($450)
30% — после Этапа 2 ($450)
20% — после Этапа 4 ($300)
Исходный код и доступы передаются заказчику
по завершении каждого этапа.