Russian Hub — страница сбора донатов со счётчиком и виджетом для стрима
Russian Hub
Full-stack разработка
Страница сбора для независимого академического центра в Ереване: он помогает учёным, преподавателям и студентам, уехавшим из России из-за антивоенной позиции. Собрана за два дня — меньше 48 часов от брифа в мессенджере до боевого домена с сертификатом. Главное в проекте — счётчик сбора: сумма растёт сама, при этом доступа к финансовым аккаунтам клиента у нас нет вообще.
от брифа до боевого сайта
источника донатов считаются сами
доступов к финансам клиента
внешних запросов у страницы
обновление виджета в эфире
интервал проверки кошельков
Задача
Хабу нужна была страница со способами поддержать сбор на офлайн-лабораторию: цель 5 000 €, дедлайн — утро субботы. Дальше начались ограничения. Платёжные рельсы: Stripe Армению не обслуживает, PayPal работает только на отправку, российские карты за рубежом не проходят. Сумму надо показывать и на странице, и в прямом эфире донат-стрима, но доступ к своим платёжным аккаунтам клиент давать не хотела — и была права, для неё это личный Telegram и вся её финансовая история. Сервер — 1,9 ГБ памяти без подкачки, сборка проекта на нём не проходит в принципе.
Решение
Страница на Next.js 16 и React 19: сборка идёт локально, на сервер уезжает готовый пакет, дальше nginx, systemd и Let's Encrypt. Сумма сбора складывается из трёх источников, и ни один не требует доступа к чужим финансам. Донаты Tribute прилетают вебхуками с проверкой подписи — клиент сама создаёт ключ у себя и отзывает его одной кнопкой. Три криптокошелька сайт проверяет сам раз в пять минут по открытым данным блокчейна и пересчитывает в евро. Остальное клиент вводит в закрытой панели с телефона: кнопки быстрого плюса удобны прямо во время эфира. Для стрима сделан отдельный виджет-оверлей под OBS — та же цифра, опрос раз в 15 секунд и золотая вспышка в момент доната.
Технологический стек
| Слой | Технология | Задача |
|---|---|---|
| Frontend | Next.js 16 + React 19 | App Router, серверный рендер, автономная сборка |
| Язык | TypeScript strict mode | Типобезопасность, ноль any |
| Стили | Tailwind CSS | Тёмная тема, стеклянные карточки, мягкие стыки секций |
| Шрифты | next/font — EB Garamond и Manrope | Раздача со своего домена, ноль внешних запросов |
| Анимация | CSS + requestAnimationFrame | Без сторонней библиотеки: страница видна и без JavaScript |
| Медиа | ffmpeg: AV1 10-бит + H.264 | Фильтр против полос, обязательный запасной формат для iPhone |
| Приём донатов | Вебхуки Tribute, HMAC-SHA256 | Проверка подписи, защита от повторной доставки |
| Крипта | Node + systemd timer, публичные блокчейн-API | Балансы трёх кошельков, пересчёт в евро |
| Деплой | VPS + nginx + systemd + Let's Encrypt | Локальная сборка, сертификат, автоперезапуск |
Хронология проекта
Разбор задачи: какие платёжные рельсы вообще работают для Армении, палитра и тексты сняты с материалов клиента, проверен сервер — сборка только локально
Первая боевая версия на своём домене: сертификат, редирект с http, ноль внешних запросов
Правки клиента по живой странице: фоновые сцены вместо плоских заливок, переворачивающиеся карточки кошельков, ожившая полоса сбора
Автоматика сбора: панель для клиента, слежение за тремя кошельками, виджет для OBS; следом — свой аудит панели и два слоя защиты от перебора пароля
Приём донатов Tribute с проверкой подписи и защитой от дублей, фоновые ролики заменены настоящими фотографиями — страница на боевом домене за сутки до дедлайна
Что мы сделали
Хотите такой же результат?
Разберём вашу задачу на бесплатной консультации