Dobro.rf: В 13 раз больше запросов в секунду

Добро.рф (dobro.ru) — платформа прозрачной благотворительности, генеральный партнёр — Альфа-Банк. Доноры делают разовые и регулярные пожертвования, собирают корзину из нескольких сборов и смотрят историю. НКО и частные организаторы проходят онбординг, загружают документы, создают сборы и следят за статистикой. Модераторы проверяют сборы.

У заказчика уже была платформа, но за основу её не брали. Заказали новую с нуля: с новыми техническими требованиями и полностью новым дизайном. Поэтому архитектуру, дизайн-систему и интеграции строили заново, без наследия старого кода. Разработка идёт с марта 2026 по ТЗ заказчика.

Стек тоже задал заказчик: React. До проекта во фронтенд-команде на React писал только я, поэтому команде нужно было быстро освоить новый стек. При этом интеграций много: цифровой рубль, оплата в модальном окне прямо на сайте, Альфа-Банк, многоступенчатый онбординг НКО.

Донор может поддержать сразу несколько сборов одной оплатой: деньги распределяются автоматически, вся история остаётся в кабинете.

Организация попадает на платформу через мастер из шести шагов. Замечания модератора показываются ошибками полей и не дают отправить анкету, пока их не исправят.

• STOREFRONTПубличная витрина

  Главная, каталог сборов, страница сбора, организации, документы. Главная в статике, сборы и НКО в ISR, каталог и организации — динамика с кешем запросов. Публичные страницы отдаются готовыми с сервера: их находят поисковики, а донор быстро открывает сбор по ссылке из соцсетей или рассылки.

• ACCOUNTSКабинеты

  Кабинеты доноров и НКО, раздел модерации. Данные грузятся на клиенте: SWR и Zustand, формы на react-hook-form и zod. Кабинеты личные и поисковикам не нужны, поэтому данные грузятся в браузере и не нагружают сервер, а проверка форм не даёт отправить анкету с ошибкой.

• SERVERСерверные роуты Next.js

  Прокси к API, подсказки DaData с ключом только на сервере, метрики приложения. Ключи платных сервисов не попадают в браузер, поэтому их нельзя украсть и потратить лимит, а метрики показывают рост нагрузки раньше, чем его заметят пользователи.

  • app/api/backend
  • app/api/dadata
  • app/metrics
• APIREST бэкенда

  Типы ответов генерируются из OpenAPI, поэтому фронтенд узнаёт об изменении контракта на typecheck. Расхождения с бэкендом ловятся до релиза, а не на странице оплаты у донора.

Макеты рисовали два дизайнера команды в Figma. По ним фронтенд собрал свою дизайн-систему: токены темы, CSS-компоненты кнопок, карточек и полей, 110 переиспользуемых компонентов. Каждый переиспользуемый компонент принимается через Storybook.

Интеграциями на фронтенде руководил я: по каждой выбрал подход и инструменты, поставил задачи группе и принимал результат на ревью.

Оплата — одна из самых сложных частей платформы: три способа, и у каждого свои правила. Картой донор платит прямо на сайте, в модальном окне, без перехода на страницу банка. Поля для номера карты встраивает платёжный шлюз, поэтому сайт данные карты не видит и не хранит. Через СБП донор подтверждает платёж в приложении своего банка, а сайт дожидается ответа и показывает результат. Цифровой рубль — новая форма денег от Центробанка, и им можно оплатить только разовое пожертвование, а корзину и ежемесячные пожертвования — картой или через СБП. Какие способы доступны, решает бэкенд для каждого сбора и вида пожертвования, и сайт показывает донору только подходящие.

Ключ DaData живёт только на сервере, запросы идут через серверный роут. HTTP-клиент не отправляет cookie в кешируемых запросах, поэтому персональный ответ не может попасть в общий кеш. Для частных сборов есть согласие на публикацию персональных данных.

Vitest и React Testing Library: 48 файлов, около 450 тест-кейсов, базовые тесты на каждый компонент. Отдельно покрыты швы производительности: cookie и кеш в HTTP-клиенте, кеширование публичных ручек, клиентская загрузка справочников. E2E на Playwright пишет другой разработчик: корзина и пожертвование, авторизация, онбординг НКО.

1. husky линт и юнит-тесты на пуше
2. pull request ревью и CI
3. develop dev-стенд
4. preprod prod

Проверки на пуше настроил я, GitHub Actions, Docker и деплой — DevOps команды.

Работаем недельными спринтами с демо в конце каждого. Задачи в Jira, ветка на задачу, PR с ревью. Для новых разработчиков есть онбординг-документ: слои, нейминг, паттерны, формы, тесты, Storybook. Для AI-агентов — правила и скиллы проекта: ревью ветки, тесты, токены темы.