Andrey Burakov

Production-ready сайт о ГОЗ: от Заказчика к React, Vite и Tailwind

Production-ready сайт о ГОЗ: от Заказчика к React, Vite и Tailwind

Десять лет в бюджетных организациях из них три года работы с гособоронзаказом научили меня одному: сложность ГОЗ не в законах, а в интерфейсах и людях. Я собрал консалтинговую платформу «Страна ГОЗ» с нуля — на современном стеке с полным CI/CD pipeline, мониторингом и production-grade архитектурой.

Почему именно ГОЗ

Несколько лет участия в проектах ГОЗ показали: мир оборонных заказов крутится вокруг регламентов, писем и «согласовать до 15:00». Я сопровождал исполнителей и заказчиков, видел, как трудно бизнесу пройти путь от заявки до отчётности, и понял: сложность не в нормативке — она в инструментах. Любая операция должна быть задокументирована, любая копейка должна быть подтверждена - иначе всё упирается в проблемы с надземными органами. Были случае в практике, когда пришлось обосновать почему ручка стоила 1 рубль, хотя в "Интернетах ваших" есть за 0,99 рублей: "Вы украли из бюджета - 300 рублей, немедленно верните".

Но люди боятся самой аббревиатуры. ГОЗ кажется чем-то закрытым и бюрократичным, хотя на деле — это просто процесс с чёткими правилами. Нужен был сайт, который объяснит это простым языком. Да, ГОЗ это не только военное оборудование и снаряжение, это еще и куча проектов, которые смежные.

С чего началось

Первый лендинг собрал в конструкторе — чтобы проверить гипотезу. Хотел сайт без агрессивной рекламы "Нажми сюда!", "Оставь заявку быстро". Сделал все максимально простым и читаемым, без сложных аббревиатур, локальных постановлений и сокращений. Хотелось сделать продукт дружелюбным, моя целевая аудитория были люди, которые занимаются производством или разработкой, которые готовы развиваться и проводить исследования, но при этом которые находятся за пределами уже поднаторелых товарищей. Заказчикам я должен проводил консультации, так как с большим опытом автоматизации я настраивал их процессы. Вы не поверите, но бумажные документы и отсутствие знаний банальных формул в экселе - приводило к тому, что процессы которые занимают простейшей формулой ВПР за пару минут - люди проводят в ручную сутками.

Изображения генерировал в GPT под стать названию своего проекта. Решил обыграть страну ОЗ и поэтому изображения генерировались в подобном ключе. Гипотеза оказалась рабочей: компании начали обращаться за консультациями. Тогда стало ясно — пора строить настоящий продукт.

Production-ready сайт о ГОЗ: от Заказчика к React, Vite и Tailwind
Production-ready сайт о ГОЗ: от Заказчика к React, Vite и Tailwind

Технический стек и архитектура

Frontend: React 18.3 + TypeScript 5.8 (strict mode)Сборка: Vite 5.4 — HMR за ~200ms, production bundle ~360 KBUI: Tailwind CSS 3.4 + shadcn/ui (50+ готовых компонентов на Radix UI)Анимации: Framer Motion для плавных переходовИконки: Lucide React (tree-shakeable)Качество: ESLint 9 с ~40 правилами + pre-commit hooksТестирование: Vitest + React Testing Library (coverage 80%+)

Что внутри: UX для сложной ниши

Сайт решает две задачи:

Для заказчиков ГОЗ:

  • Адаптация внутренних процессов под 275-ФЗ
  • Расчёт расходов на контролёра качества (РКМ)
  • Подготовка документов для военного представительства

Для исполнителей:

  • Участие в тендерах на ЕИС
  • Подготовка жалоб в ФАС
  • Ценообразование и отчётность

Принцип работы с текстами:

  • ❌ «В соответствии с требованиями законодательства...»
  • ✅ «Поможем пройти проверку военпреда за 2 недели»

Конверсионная воронка:

  1. Hero → проблема + решение (CTR ~8%)
  2. Services → кейсы для разных аудиторий
  3. Process → прозрачность работы (снижает барьер)
  4. CTA → простая форма (имя + телефон)

Почему всё сделал сам

Четыре причины:

  1. Контроль качестваВнешние подрядчики часто делают «работает» вместо «работает правильно». Хотелось production-grade с первого дня.
  2. Скорость итерацийНужно A/B тестировать тексты/формы/CTA - без зависимости от подрядчика.
  3. Знание предметной областиЯ понимаю боли клиентов ГОЗ - это даёт преимущество в UX.
  4. Проект дополнительный и за свой счёт)

Что не стал делать сам:

  • Дизайн - использовал готовые компоненты shadcn/ui
  • Хостинг - взял VPS с Nginx (не поднимал с нуля)
  • Мониторинг - готовые решения (Sentry, GA4, YM)

Выводы и планы развития

Что получилось:

  • Production-ready продукт за ~1 месяц (вечера/выходные)
  • CI/CD с автотестами и zero-downtime deploy
  • Мониторинг с Session Replay для быстрого дебага
  • Lighthouse 90+ без костылей

Технологии-победители:

  • React 18 + TypeScript strict - надёжность и предсказуемость
  • Vite - сборка в 10 раз быстрее Webpack
  • shadcn/ui - красиво + контроль + accessibility
  • Vitest - быстрые тесты (в 2-3 раза быстрее Jest)

Что дальше:

  1. Личный кабинет - история обращений, документы;
  2. Калькуляторы - расчёт РКМ, себестоимости, сроков;
  3. CRM-система - автоматизация процесса от заявки до отчёта;
  4. Интеграция с ЕИС - почти все заказчики станционные, а если даже нет, все равно 99% закупочных процедур публикуются на закрытых площадках, поэтому это будет в качестве тренировки;
  5. Форма заявки и согласие на обработку - намеренно обошел сбор информации на сайте, чтобы не обременять себя кучей регистрацией в надзорном органе.

Технический долг (пока минимален):

  • 3 TODO в коде (некритичные);
  • Coverage ~82% (хочу 90%+);
  • Нет E2E тестов (планирую Playwright);

Контакты: