Full-Stack · Автоматизація · AI-системи · Інфраструктура

Я будую системи, що замінюють ручну роботу.

Сайти. Автоматизація. Боти. AI. Інфраструктура.

Якщо процес можна запрограмувати, з'єднати з іншими системами, автоматизувати чи посилити AI — я спроєктую і збудую систему навколо нього: від інтерфейсу й бекенду до сервера, на якому вона працює.

Що можна автоматизувати
  • 10+років програмування
  • 5шарів: UI → API → БД → AI → сервер
  • 24hвідповідь на запит — протягом дня
Сайт → API → Бекенд → База даних → AI → Автоматизація → Telegram → АналітикаСайтAPIБекендБаза данихAIАвтоматизаціяTelegramАналітика

Одна система, кожен шар — і вона працює сама.

Що я будую

Від ідеї до робочої системи.

Не одна сторінка й не один скрипт — робочий продукт: інтерфейс, бекенд, дані, автоматизація і сервер, на якому це все живе.

Сайти

Фронтенд і бекенд як одне ціле — від лендінгу до маркетплейсу з адмінкою.

  • Лендінги
  • Корпоративні сайти
  • Інтернет-магазини
  • Маркетплейси
  • Адмін-панелі
  • Дашборди
  • Вебзастосунки

Процес

Як я створюю цифрові продукти.

Той самий шлях і для лендінгу, і для системи з AI всередині. Різниця лише в глибині кожного кроку.

  1. 01ЗрозумітиЗадача, процес як він є зараз, обмеження, критерій «готово».
  2. 02СпроєктуватиАрхітектура, дані, інтеграції, точки, де потрібна автоматизація.
  3. 03ДизайнСтруктура, UX, інтерфейс — під реальний сценарій користувача.
  4. 04ЗбудуватиФронтенд, бекенд, база даних, API.
  5. 05АвтоматизуватиПарсери, планувальники, боти, AI — усе, що повторюється.
  6. 06ПеревіритиТести, браузерні перевірки, скриншоти, крайові випадки.
  7. 07РозгорнутиСервер, Docker, Nginx, бекапи, моніторинг.
  8. 08ПокращуватиЛоги, метрики, зворотний зв'язок — і наступна ітерація.

Той самий процес — з AI-асистуванням

Частину кроків виконують AI-агенти під моїм контролем. Результат перевіряється в реальному браузері — скриншотом, а не на віру.

Робочий процес · AI-агенти + перевірка в браузері
  1. Запит
  2. Дослідження
  3. Дизайн
  4. Код
  5. Playwright
  6. Скриншот
  7. Візуальна QA
  8. Виправлення
  9. Деплой

Автоматизація

Що можна автоматизувати?

Майже все, що повторюється. Ось як рутина, що з'їдає день працівника, перетворюється на систему, яка працює сама.

Було

Працівник, щодня

  1. 01відкриває сайт
  2. 02копіює інформацію
  3. 03вносить дані в таблицю
  4. 04перевіряє ціни
  5. 05надсилає сповіщення
  6. 06оновлює базу даних

~2–4 години на день · помилки · затримки

Стало

Одна автоматизована система

Парсер
API
База даних
AI
Telegram
Дашборд

за розкладом · 0 ручних кроків · усе в логах

Типові задачі, які я автоматизую

  • Моніторинг цін конкурентівПарсинг за розкладом, виявлення змін, сповіщення в Telegram.
  • Автооновлення каталогуФід постачальника → нормалізація → ваша база → вітрина.
  • Сповіщення в TelegramЗамовлення, помилки, події на сервері — прямо в чат команди.
  • Обробка замовленьФорма → перевірка → CRM → сповіщення → відстеження статусу.
  • Генерація контентуОписи, заголовки та зображення від AI на основі структурованих даних.
  • Збір данихТисячі сторінок в одну чисту таблицю з дедуплікацією.
  • ЗвітністьЩоденні/тижневі звіти, зібрані й доставлені без людини.
  • Автоматизація браузераЛогіни, форми, кліки — headless-браузер замість людини.
  • AI-обробкаКласифікація, витяг даних, стислі підсумки по вхідному потоку.
  • Синхронізація за розкладомДві системи в синхроні через cron — з повторами й логами.

Є задача, що повторюється? Автоматизуймо.

Описати задачу

Як це влаштовано

Системи, а не скрипти.

П'ять типових контурів, з яких складається більшість моїх проєктів. Кожен можна замовити окремо або як частину цілої системи.

01

Дані та парсинг

«Парсер» — це не скрипт на одну сторінку. Це конвеєр: багато джерел, нормалізація, валідація, база — і споживачі, яким потрібні чисті дані.

  1. Джерела
  2. Інжест
  3. Нормалізація
  4. Валідація
  5. База даних
  6. API
  7. Сайт · Telegram · Дашборд
  • Каталоги на десятки тисяч позицій
  • Фіди постачальників: JSON, CSV, XML
  • Дедуплікація, фільтрація, трансформація
  • Синхронізація за розкладом, моніторинг цін
  • Агрегація з кількох джерел в одну модель даних
02

Автоматизація браузера

Коли в сервісу немає API, з ним можна працювати через браузер — як людина, але за розкладом і з перевіркою результату.

  1. Браузер
  2. Playwright
  3. Сайт
  4. Дія
  5. Перевірка
  6. Скриншот
  7. Результат
  • Навігація, форми, авторизовані сценарії
  • Регулярні операції у вебінтерфейсах
  • Збір даних із сайтів, що рендеряться JS
  • Скриншоти й візуальна перевірка інтерфейсів
  • E2E-тести та моніторинг доступності

Лише там, де це технічно й юридично доречно. Обхід захисних механізмів — не про це.

03

Telegram як інтерфейс

Не «просто бот», а вхід у систему: замовлення, сповіщення, адмінка та звіти — там, де команда вже сидить.

  1. Сайт
  2. Бекенд
  3. Замовлення
  4. Сповіщення в Telegram
  1. Моніторинг
  2. Тригер
  3. Алерт у Telegram
  1. Користувач
  2. Бот
  3. API
  4. База даних
  5. Відповідь
  • Клієнтські та адмін-боти
  • Сповіщення й моніторинг подій
  • Приймання та ведення замовлень
  • Автоматизація підтримки
  • Внутрішні інструменти для команди
04

Інтеграції

З'єдную системи, які не були створені для роботи разом: CRM, магазин, оплата, доставка, аналітика, Telegram, внутрішні бази.

  1. Сервіс A
  2. API / Вебхук
  3. Шар автоматизації
  4. База даних
  5. Сервіс B
Способи з'єднання
  • API
  • Вебхуки
  • База даних
  • Файли
  • Парсер
  • Браузер
  • Синхронізація за розкладом
  • CRM ↔ сайт ↔ Telegram
  • Оплата, доставка, склад
  • Аналітика та звітність з кількох джерел
  • Зовнішні API та внутрішні системи
05

Інфраструктура

Продукт живе на сервері, який я налаштовую і супроводжую сам: від reverse proxy до бекапів і GPU-навантажень.

  1. Інтернет
  2. Nginxreverse proxy · TLS · статика
  3. Застосунок
    • Бекенд
    • База даних
    • Автоматизація
    • AI
    • Воркери
  4. Docker · Linuxізоляція сервісів · compose
  5. СерверUbuntu · бекапи · моніторинг
  • Ubuntu Server, Docker Compose, Nginx
  • Деплой, SSH, Git-based workflow
  • Бази даних, черги, фонові воркери
  • Бекапи, моніторинг, керування сервісами
  • GPU-навантаження та обслуговування моделей

Лабораторія

Не вірте на слово.

Невеликі інтерактивні демо. Кожне — спрощена версія того, що я будую насправді. Усе симулюється у вашому браузері й не під'єднано до живих систем.

Парсер

Інтерактивне демо

URL → HTML → структуровані дані → JSON

  1. Завантажити сторінку
  2. Витягти поля
  3. Нормалізувати
  4. JSON
// JSON

Безпечне демо: парситься підготовлена сторінка, а не довільний сайт.

Автоматизація

Інтерактивне демо

Один клік — відпрацьовує весь ланцюжок.

Джерело
Парсер
База даних
AI
Telegram
$ 

API

Інтерактивне демо

Чистий REST API — так я їх будую.

// response

AI-асистент (RAG)

Інтерактивне демо

Як виглядає AI-шар усередині продукту: запитання → пошук по власних даних → відповідь.

  1. Запитання
  2. Пошук
  3. Qdrant
  4. Контекст
  5. Модель
  6. Відповідь

Макет інтерфейсу — відповіді заскриптовані, дані не залишають сторінку.

Браузерна QA

Інтерактивне демо

Збірка → браузер → скриншот → аналіз → виправлення. Так перевіряється результат, а не приймається на віру.

  1. Збірка
  2. Браузер
  3. Скриншот
  4. Аналіз
  5. Виправлення
$ 

Дашборд

Інтерактивне демо

Жива аналітика — та, що власник відкриває щоранку.

Замовлення452
Виторг808 628
Конверсія3.4%
Аптайм99.98%
Замовлення за 14 днів
-14d-12d-10d-8d-6d-4d-2d

Термінал

Інтерактивне демо

Типовий деплой — симуляція, безпечно.

deploy — ssh

Система

Кожен шар — одні руки.

Наведіть або торкніться вузла, щоб побачити, що я можу зробити на цьому рівні.

Стек

Інструменти, якими справді користуюсь.

Згруповано за шарами. Клацніть групу, щоб розгорнути.

Розробник

Фронтенд

  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • React
  • Astro
  • Three.js

AI Lab

У мене власна AI-інфраструктура.

Локальні моделі на власному GPU-сервері — без оплати за токени й без витоку даних назовні. Таку ж схему можна розгорнути для вашого продукту.

GPU-сервер

Моделі

LLM
Зображення
Відео
Ембедінги
Агенти
API
Застосунки
  • Локальна LLMМоделі через Ollama для чату, витягу даних, класифікації та агентів.
  • AI-агентиАгенти з інструментами: читають ваші дані, викликають ваш API, діють.
  • Векторні базиQdrant + ембедінги: семантичний пошук і RAG по документах та каталогах.
  • Генерація зображеньПайплайни ComfyUI для товарних візуалів, варіацій та апскейлу.
  • Відео-воркфлоуПайплайни генерації та обробки короткого відео.
  • Розробка з AIAI-агенти як частина процесу розробки — швидше, з тією ж ретельністю.

Як AI живе всередині продукту

Не «підключив чат-бота», а окремий шар: модель, пошук по ваших даних та інструменти, що діють у вашій системі.

Користувач
Застосунок
AI API
LLM
RAG
Інструменти
Qdrant
API / База даних
Відповідь

AI-медіа

Генерація та обробка зображень і відео на власному GPU — воркфлоу ComfyUI, які можна вбудувати в конвеєр.

  • ЗображенняРобочий
    • Генерація
    • Редагування
    • Товарні візуали
    • Референс-воркфлоу
    • Покращення та апскейл
  • ВідеоЕксперимент
    • Генерація
    • Image-to-video
    • Оркестрація воркфлоу
    • Локальні відеомоделі
    • Автоматизовані пайплайни
  • АудіоДослідження
    • Синтез мовлення
    • Озвучення
    • Обробка аудіо

Статуси чесні: «робочий» — використовую в задачах, «експеримент» — працює, але ще не для продакшену, «дослідження» — вивчаю.

Інструменти та їхня роль

Не логотипи заради логотипів — що саме кожен інструмент робить у моїх системах.

  • OllamaЛокальний запуск LLM
  • QdrantВекторний пошук / база знань
  • ComfyUIНодові AI-медіа воркфлоу
  • PlaywrightАвтоматизація браузера / тести
  • DockerІзоляція сервісів / деплой
  • AI-агентиАсистована розробка в терміналі
  • GitВерсії та деплой
  • UbuntuОС серверів і GPU-станції
Експериментальна архітектура · в розробці

Власна AI-платформа розробки

Середовище, де AI не лише пише код, а й бачить результат.

Я збираю локальне AI-асистоване середовище розробки: моделі, база знань, агенти з ролями, браузерна автоматизація та візуальна перевірка — на власній інфраструктурі.

  • AI-моделі
  • База знань
  • Агенти розробки
  • Дизайн-знання
  • Автоматизація браузера
  • Візуальна перевірка
  • Інфраструктура
Запит користувача
Оркестратор
  • Архітекторструктура, дані, інтеграції
  • Дослідникджерела, документація
  • Дизайнеркомпозиція, патерни
  • Кодерреалізація
  • Автоматизаторскрипти, пайплайни
  • Тестувальникбраузер, перевірки
  1. 01Збірка
  2. 02Браузер
  3. 03Playwright
  4. 04Скриншот
  5. 05Візуальний аналіз
  6. 06Пошук проблем
  7. 07Виправлення / ітерація
  8. 08Результат

Цикл візуальної перевірки

Замість «згенерував код і повірив, що інтерфейс правильний» — середовище відкриває результат у браузері, дивиться на нього та ітерує.

  1. Збірка
  2. Відкрити
  3. Скриншот
  4. Аналіз
  5. Проблеми
  6. Виправити
  7. Перевірити знову
  • Playwright
  • Аналіз скриншотів
  • Vision-модель
  • Інспекція DOM
  • Автотести

Дизайн-інтелект

Окремий шар знань про інтерфейси, щоб агент компонував сторінки не «як вийде», а за перевіреними патернами.

  1. Задача
  2. Пошук у дизайн-базі
  3. Релевантні компоненти
  4. Композиція сторінки
  5. Реалізація
  6. Скриншот
  7. Візуальна критика
  8. Покращення
  • UI-бібліотеки
  • Дизайн-системи
  • Компоненти
  • Лендінги
  • E-commerce патерни
  • Форми
  • Навігація
  • Дашборди
  • Типографіка
  • Відступи й сітки
  • Motion
  • 3D
  • Сучасні вебпатерни

База — кураторські референси, документація, відкриті ресурси й метадані патернів. Не копії комерційних UI-бібліотек.

Що вже працює, а що ні

Працює
  • AI-асистована розробка з агентами
  • Браузерна автоматизація та скриншоти (Playwright)
  • Локальні моделі, Qdrant, ComfyUI на власному GPU
Розробляється
  • Оркестратор і база знань проєктів
  • Дизайн-шар: пошук патернів і компонентів
  • Автоматичний цикл скриншот → аналіз → виправлення
Експеримент
  • Спеціалізовані агенти як окремі ролі
  • Vision-модель як візуальний критик
  • Повністю автономні ітерації без людини

Код

Ось так виглядає мій код.

Реалістичні фрагменти — інтеграція API, автоматизація, обробка даних. Без секретів і без hello-world.

api/webhooks/order.phpВебхук замовлення → валідація → БД → Telegram
<?php
declare(strict_types=1);

// Webhook нового заказа: подпись → валидация → БД → уведомление.
// Секреты берутся из окружения, в коде их нет.

$secret  = getenv('ORDER_WEBHOOK_SECRET') ?: '';
$payload = file_get_contents('php://input');
$given   = $_SERVER['HTTP_X_SIGNATURE'] ?? '';

if (!hash_equals(hash_hmac('sha256', $payload, $secret), $given)) {
    http_response_code(401);
    exit;
}

$order = json_decode($payload, true, 8, JSON_THROW_ON_ERROR);

$rules = [
    'id'     => fn($v) => is_int($v) && $v > 0,
    'phone'  => fn($v) => preg_match('/^\+?\d{10,15}$/', (string) $v),
    'items'  => fn($v) => is_array($v) && count($v) > 0,
    'total'  => fn($v) => is_numeric($v) && $v >= 0,
];
foreach ($rules as $field => $ok) {
    if (!isset($order[$field]) || !$ok($order[$field])) {
        http_response_code(422);
        echo json_encode(['error' => "invalid {$field}"]);
        exit;
    }
}

$db = Db::connection();
$db->beginTransaction();
try {
    $db->prepare(
        'INSERT INTO orders (id, phone, total, status, created_at)
         VALUES (:id, :phone, :total, "new", NOW())
         ON DUPLICATE KEY UPDATE total = VALUES(total)'
    )->execute([
        'id' => $order['id'], 'phone' => $order['phone'], 'total' => $order['total'],
    ]);

    $stmt = $db->prepare('INSERT INTO order_items (order_id, sku, qty) VALUES (?, ?, ?)');
    foreach ($order['items'] as $item) {
        $stmt->execute([$order['id'], $item['sku'], (int) $item['qty']]);
    }
    $db->commit();
} catch (Throwable $e) {
    $db->rollBack();
    error_log('order webhook: ' . $e->getMessage());
    http_response_code(500);
    exit;
}

// Уведомление — асинхронно, чтобы не держать вебхук открытым.
Queue::push('telegram.notify', [
    'chat' => 'orders',
    'text' => sprintf("🛒 Заказ #%d — %s ₴\n%d позиций",
        $order['id'], number_format($order['total'], 0, '.', ' '), count($order['items'])),
]);

http_response_code(202);
echo json_encode(['ok' => true]);

Досвід

10+ років

Програмування та веброзробка.

Кожен шар додавався, бо попереднього не вистачало, щоб випустити цілий продукт.

  1. Веброзробка

    Сайти, верстка, CMS, перші бекенди на PHP.

  2. Бекенд

    API, бази даних, оплати, авторизація — логіка за інтерфейсом.

  3. Автоматизація

    Парсери, боти, планувальники — прибираю ручну роботу з процесів.

  4. Інфраструктура

    Власні сервери: Linux, Docker, Nginx, бекапи, моніторинг.

  5. AI-системи

    Локальні моделі, агенти, RAG — AI як шар усередині продуктів.

Про мене

Привіт. ggcode13.

Я програмую понад 10 років. Працюю з усім стеком продукту — інтерфейс, бекенд, бази даних, автоматизація, сервери та AI.

Мені подобаються задачі, де софт може прибрати повторювану роботу або перетворити складний процес на просту систему.

Не автоматизуйте, бо це модно. Автоматизуйте, бо люди не повинні витрачати час на те, що софт робить надійніше.
  • 01БудуватиСпершу робочий продукт — інтерфейс, бекенд, дані.
  • 02АвтоматизуватиПотім прибрати кожен крок, який людина повторює.
  • 03МасштабуватиПотім змусити це надійно працювати на власному сервері.

Контакт

Є проблема, яку може вирішити софт?

Розкажіть, що ви хочете автоматизувати, збудувати чи покращити. Не обов'язково знати, який стек потрібен — просто опишіть задачу.

Або напряму: