Продуктовый инженер-разработчик
Системное мышление.
Продуктовый фокус.
- 16 Первый код
- 2023 Путь в вебе
- Fullstack Продуктовая работа
- B2 Английский
Продуктовый инженер-разработчик
Полезные продукты.
Собранные от и до.
Я — Денис. Строю интерфейс, подключаю данные и заставляю детали работать вместе.
Инструменты бронирования, музыка, которая не обрывается между страницами, и коммерческие сайты. React, TypeScript и продуктовое фулстек-мышление.
01 / Мышление
Обо мне
От точных деталей — к продуманным продуктам.
-
Системность и точность
Машиностроение и механообработка научили меня разбивать сложные системы на точные, надёжные детали. Эту дисциплину я приношу в разработку.
- Понятные контракты
- Предсказуемое состояние
- Типобезопасность
-
Учусь — и делаю
От Python-ботов и Telegram Web Apps до RS School и React. Учусь по документации, исходному коду и реальным продуктам.
- Самостоятельное обучение
- RS School
- React и TypeScript
-
Делаю осознанно
Типы — это контракт. Производительность — это фича. Я держу архитектуру простой, чтобы продукт оставался быстрым и удобным.
- KISS · DRY · YAGNI
- Производительность
- Полезные продукты
02 / Путь
Образование и опыт
От первой HTML-страницы до фулстек-разработки в продакшене.
03 / Измерено в продакшене
Коммерческий эффект
Измеримые результаты работы в продакшене.
04 / Избранные инженерные работы
Флагманские проекты
Движок бронирования, музыкальный плеер, коммерческий сайт и лендинг кофейной обжарочной.
01
Мультитенантный SSR и админ-канвас
Bookio
Формы бронирования для нескольких организаций. Публичная страница рендерится на сервере для конкретного тенанта, а админ редактирует ту же форму на канвасе.
- TanStack Start
- Nitro
- TanStack Query
- Zustand
- Hono
- Drizzle
- PostgreSQL
- Better Auth
Архитектура
TanStack Start и Nitro обрабатывают /:organizationSlug/:bookingFormSlug и записывают Open Graph и Twitter-теги в head документа до гидратации.
- Один маршрут на организацию и форму
- Соцкарточки — в первом HTML-ответе
- Nitro выполняет серверный рендер
02
Аудиодвижок и постоянные маршруты
BROOKLYN
Музыкальное приложение с собственным плеером. Смена страницы не останавливает трек, потому что аудиоэлемент живёт вне маршрута.
- TanStack Router
- Redux Toolkit
- SCSS
- Hono
- Drizzle
- PostgreSQL
Архитектура
HTML5 Audio-элемент, обёрнутый в middleware Redux Toolkit. Перемешивание — на Фишере-Йетсе. Повтор, перемотка, скраббинг и горячие клавиши проходят через то же middleware.
- UI не владеет аудиоэлементом
- Перемешивание, повтор и перемотка идут одним путём
- Горячие клавиши работают с любого маршрута
03
Коммерческая работа в Webbee Technologies
Butlerapp
Маркетинговый сайт для ПО курсов и бронирования. В Webbee я перевёл его на серверный рендеринг, улучшил скорость страниц и перестроил воронку демо.
- React
- TypeScript
- TanStack Start
- TinaCMS
- Zustand
- Hono
- Matomo
Архитектура
Перенёс маркетинговый сайт со статических страниц Astro на серверный рендеринг TanStack Start. Контент живёт в отдельном репозитории с TinaCMS, поэтому маркетинг редактирует его, не меняя код сайта.
- Миграция с Astro SSG на TanStack Start SSR
- Отдельный репозиторий контента с TinaCMS
- Селф-хостинг на Linux VPS с Nginx
04
Сайт кофейной обжарочной · тестовое задание
Kvarta
Лендинг минской кофейной обжарочной. Спроектировал архитектуру и структуру бэкенда, направлял реализацию с помощью ИИ, проверял код и дорабатывал результат.
- Astro
- React
- Hono
- PostgreSQL
- Drizzle ORM
- Telegram Bot API
Архитектура
Спроектировал архитектуру сайта и структуру бэкенда, направлял реализацию с помощью ИИ, проверял код и дорабатывал результат.
- Фронтенд на Astro и React
- Бэкенд на Hono с PostgreSQL и Drizzle ORM
- Реализация с помощью ИИ и проверкой кода
05 / Технический арсенал
Технический арсенал
Инструменты, которыми я пользуюсь, сгруппированные по задачам, которые они решают.
Языки и основы веба
Типизация, семантическая разметка, стили и работа с данными.
- TypeScript
- JavaScript (ES6+)
- HTML5
- CSS3 / SCSS
- SQL
Фронтенд и SSR-системы
Быстрая первая отрисовка, полезные интерфейсы и маршрутизация, подходящая продукту.
- React 19 / 18
- TanStack Start
- Astro
- TanStack Router
- Vite
- SCSS Modules
- TinaCMS
- Paraglide JS
- Motion
- Vitest
- Testing Library
Состояние и синхронизация данных
Чёткие границы между серверными данными, локальными черновиками и валидированными формами.
- TanStack Query
- Zustand
- Redux Toolkit
- RTK Query
- Reselect
- Context API
- React Hook Form
- Zod
Бэкенд и типобезопасность
Общие контракты API, надёжное хранение и проверки доступа на границе.
- Hono
- NestJS
- Hono RPC
- Node.js
- Express
- PostgreSQL
- Drizzle ORM
- Prisma 7
- SQLite
- Транзакции и индексы БД
- Better Auth
- REST & GraphQL
Инфраструктура и производительность
От деплоя до измерений: продакшен остаётся быстрым и надёжным.
- Core Web Vitals
- GitHub Actions
- Docker (multi-stage builds)
- pnpm Workspaces
- Nginx
- VPS deployment
- Linux & Bash
- Matomo DataLayer
- JSON-LD
06 / Контакты
Давайте сделаем что-то полезное.
Есть идея продукта или место в команде? Расскажите, над чем работаете.