Hero Study — масштабна платформа управління навчанням (LMS) для університетів. Архітектура: Yii2 (PHP) + REST API + MySQL + RabbitMQ + Angular на фронтенді.

Я працював над кількома напрямками.

1. Особистий кабінет студента

(Angular 15 SPA)Стек: Angular 15, TypeScript, RxJS, Bootstrap, SCSS, Jasmine, Karma, GitLab CI/CDПовноцінний SPA — особистий кабінет студента.

- Розробка та підтримка модулів: Дашборд, Профіль, Курси, Предмети, Навчальний план, Журнал успішності, Квізи, Навчальні програми, Розклад, Академічний календар, Домашні завдання, Транскрипт, Дипломний проект, Бібліотека, Новини, Опитування, Нотатки і задачі, Заявки студента, Довідки, Гуртожиток, IBAN-повідомлення, Вакантні гранти, Синхронізація даних.

- Реалізація складної бізнес-логіки: фільтри, стани, пагінація, умовне відображення.

- Фіксинг багів між релізами

- Unit-тестування компонентів та сервісів (Jasmine, Karma)

2. Angular Elements — адміністративна панель

(client-apps, Angular 11)Стек: Angular 11, Angular Elements (Custom Elements), Angular Material, Apollo GraphQL, RxJS, CKEditor, Highcharts, ngx-translate, TypeScriptОкремий Angular-проєкт, що збирається як набір веб-компонентів і вбудовується в PHP-сторінки адмінпанелі.

- Розробка та підтримка модулів: Спільні компоненти, Квіз-екзамен, Опитування, Конструктор робочого навчального плану, Навчальний план, Індикативний план, Індивідуальний план, Налаштування семестру, Контингент у реєстрах, Анкетування, Зашифрований екзамен, Диплом, Загальний контингент, Аналітика гуртожитку, Навантаження викладача, Перегляд курсу, Конструктор звітів, Банк питань.

- Розробка кастомних компонентів: селектори, інпути, пагінація, модальні вікна, завантаження файлів та інші UI-елементи для використання по всьому проєкту.

- Робота з даними через Apollo GraphQL — запити і мутації

- Мультимовність (ngx-translate)

- Інтеграція графіків через HighchartsUnit-тестування компонентів та сервісів (Jasmine, Karma)

3. E2E-тестування — адмінпанель та особистий кабінет студента (Playwright)Стек: Playwright, TypeScript, Page Object Model, GitLab CI/CD4. Лендинг Hero StudyСтек: HTML, CSS, JavaScript, Node.js (Express — серверна частина для форм)

4. Маркетинговий сайт платформи Hero Study з підтримкою трьох мов.

-Верстка та розробка сторінок.

-Мультимовність: переклади всіх сторінок на 3 мови

-Правові сторінки: Cookie Policy, Terms of Use, Privacy Policy

- Відео-промо блок, слайдери, модальні вікна

- Форма зворотного зв'язку з Node.js сервером (контролери, роутинг)

- Адаптивна верстка

- Кастомні select-компоненти, дропдаун-списків

Кредитна платформа з мультибрендовою архітектурою — одна кодова база, кілька брендів з різним дизайном таналаштуваннями.

Стек: Angular 11, TypeScript, Bootstrap 4, SCSS, Angular Universal (SSR), RxJS, Socket.io, Laravel Echo, ngx-translate, Docker,Storybook

Реєстраційна воронка та авторизація:

• Сторінки та компоненти реєстрації (кроки: особисті дані, зайнятість, адреса, сім'я)

• Авторизація через BankId

• Автоматична авторизація існуючого користувача

• Маски для полів вводу (телефон, ІНН), валідація кирилиці

Особистий кабінет та кредити:

• Сторінки активних і погашених кредитів, оплати

• Компонент оплати кредиту та прив'язки картки

• Підписання договору, перегляд документів по кредиту

• Реалтайм оновлення статусу платежів через Laravel Echo / Socket.io

• Бонусна система, система інвайтів і реферальних посилань

Компоненти та UI:

• Слайдер суми / терміну

• Компонент завантаження файлів (скани документів)

• Компонент для селфі з вебкамерою

• Модальні вікна, сторінка 404, сторінка «Технічні роботи»

• Заборона масштабування при фокусі на input на мобільних пристроях

Мультибрендування:

• Кастомний дизайн для брендів

• Брендовані іконки, шрифти, кольори

• Налаштування BRAND_NAME через env, виніс логіки брендів на сервер

Інтеграції та аналітика:

• Google Analytics, CPA-трекінг

• Jivosite чат

• Fingerprint.js (збір даних браузера для скорингу)

• Ідентифікація через Cookies для gtag, визначення геопозиції

Технічне:

• SSR на Angular Universal — рефакторинг та оптимізація

• Кешування JSON і сторінок на сервері

• EventTransportService — обмін між компонентами і сервісами через RxJS Subject

• Сервіс для роботи з SMS, сервіс інформації про браузер

• Обробка помилок (400 / token_invalid)