ZheZhemon Дашборд
Реактивний дашборд для eBay-трекера
🧩 Завдання
Після розробки backend-сервісу для моніторингу eBay, постала потреба у візуалізації зібраних даних та оперативного контролю активності. Замовнику було важливо:
Мати зручний веб-інтерфейс для перегляду результатів парсингу.
Оцінювати ефективність пошуків та продавців.
Переглядати товари у реальному часі, без ручного оновлення сторінки.
Фільтрувати, аналізувати та керувати даними швидко та без зайвих переходів.
🛠 Рішення
Було розроблено сучасний дашборд у Next.js 15 з підтримкою App Router API, що працює поверх тієї ж PostgreSQL бази, яку використовує бекенд-парсер.
⚡ Основні функції:
Live оновлення списку знайдених товарів (через Supabase Realtime).
Відображення деталей пошукових параметрів і відповідних товарів.
Можливість приховати або лайкнути конкретний товар без перезавантаження сторінки.
Дашборд автоматично підтягує нові товари, зміни цін та зміни статусів (
hidden,liked) без потреби в ручному втручанні.
🚀 Використані технології
Next.js 15 App Router
TypeScript + CSS
Supabase:
Realtime Channels для оновлення таблиць без перезавантаження.
PostgreSQL як основа зберігання.
React Server Components + Client Components з
useEffect,useTransition, тощо.React Toastify для миттєвого UX-зворотного зв’язку.
🧠 Архітектурні особливості
Використання реактивного контексту (
SearchContext,RealtimeProvider) дозволяє компонентам автоматично оновлюватися при зміні даних у Supabase.Форма пошуку використовує серверні actions з форматом FormData, забезпечуючи безпечне збереження та оновлення параметрів пошуку.
Видалення/оновлення товарів через action-форми без складних мутацій або запитів на клієнті.
📈 Результати
🔄 Дашборд миттєво відображає нові товари після парсингу.
📉 Цінові зміни також фіксуються у реальному часі.
✅ Менеджер або клієнт може в режимі реального часу приймати рішення (бан, лайк, приховування, купівля), що миттєво відображається в UI.
🧠 Висновок
Цей дашборд — повноцінне фронтенд-рішення для моніторингової системи eBay, яке забезпечує реальний контроль, гнучке керування та моментальну реакцію на нові дані. Завдяки використанню сучасних інструментів React і Supabase, система залишається масштабованою, реактивною та максимально дружньою до користувача.
