Портфолио
Кейсы начинаются с задачи, роли, результата и решений, а не с длинного списка обязанностей.
Коммерческая B2B-система, которая заменяет ручную передачу заявок автоматической маршрутизацией по источникам, тегам, лимитам и очередям клиентов.
Роль
Моя роль: единственный fullstack-разработчик.
Задача
Задача: заменить ручное распределение лидов между клиентами автоматической системой, учитывающей источники, теги, лимиты и очереди.
Результат
Распределение лидов стало автоматическим, а правила маршрутизации можно было изменять через интерфейс без ручной обработки каждого лида.
Что сделал
- Спроектировал архитектуру frontend и backend.
- Разработал алгоритм распределения лидов.
- Реализовал управление клиентами, источниками, тегами и лимитами.
- Добавил API-ключи и защиту внешних запросов.
- Подключил Telegram и email-уведомления.
- Довёл MVP от неполных требований до работающего продукта.
Сложности
- Проектирование правил маршрутизации, которые можно менять без правок кода.
- Баланс между лимитами клиентов, очередями и разными источниками лидов.
- Работа с неполными требованиями и самостоятельная детализация MVP.
Что улучшил
- Собрал интерфейсы для настройки клиентов, источников, тегов, лимитов и API-ключей.
- Сделал защищенный внешний endpoint для приема лидов.
- Добавил уведомления, чтобы менеджеры и клиенты видели движение заявок без ручных проверок.
Какие решения принял я
- Выбрал конфигурационный подход: правила, лимиты и очереди управляются из админского интерфейса, а не зашиваются в код.
- Разделил поток на этапы: прием лида, нормализация, проверка API-ключа, сопоставление тегов, выбор клиента, запись результата и уведомления.
- Использовал Zustand для локального состояния интерфейса и Sequelize/PostgreSQL для предсказуемой модели данных.
Материалы кейса
Скриншоты 1Дашборд распределения
Скриншоты 2Клиенты и лимиты
Скриншоты 3Источники и теги
Скриншоты 4Журнал лидов
СхемаЛид → API-ключ → источник → теги → лимиты → очередь клиента → уведомления
GIF / видео: Мини-видео: лид проходит маршрутинг и попадает клиенту с уведомлением в Telegram/email.
Стек
ReactTypeScriptZustandExpressPostgreSQLSequelize
Open-source Angular-приложение для организации игровых плейтестов, сбора обратной связи, публикации devlog и управления roadmap. Показываю проект честно как демонстрационный Angular-кейс с понятными зонами для production-доработок.
Результат
Проект выглядит как честный open-source Angular-кейс: есть live demo, скриншоты, тесты, CI и понятные ограничения demo-реализации.
Что сделал
- Добавил работающий live demo и GitHub-ссылку для проверки проекта.
- Подготовил публичные страницы, админскую зону, devlog, roadmap и форму обратной связи.
- Настроил тесты и GitHub Actions для запуска lint/test/build.
- Явно отделил demo guard от полноценной авторизации.
- Запланировал backend-слой вместо хранения основных данных только в localStorage.
Сложности
- Сделать demo понятным без выдачи его за production-систему.
- Показать Angular-архитектуру, тесты и CI, а не только UI-макет.
- Разделить временное localStorage-хранилище и будущий backend-контур.
Что улучшил
- Добавил скриншоты основных экранов: overview, feedback, admin reports и roadmap.
- Описал auth guard как демонстрационный, если не подключен настоящий backend.
- Зафиксировал следующий production-шаг: backend API для игр, отчетов, пользователей и roadmap.
Какие решения принял я
- Не маскировал demo guard под полноценную авторизацию.
- Оставил localStorage только как временное demo-хранилище и описал backend как обязательный следующий шаг.
- Сделал акцент на проверяемости: GitHub, live demo, lint/test/build в CI.
Стек
AngularTypeScriptAngular RouterAngular SignalsSCSSKarmaJasmineGitHub Actions
GitHubПерсональный сайт-портфолио на Next.js, React, TypeScript и SCSS Modules. Проект построен на FSD-inspired структуре, содержит локализованный контент, переключение языка и темы, SSR-рендеринг и cookie-based настройки пользователя.
Что сделал
- Разработал страницы портфолио: главную, обо мне, опыт, стек и список кейсов.
- Организовал данные профиля, опыта, навыков и проектов через типизированную модель контента.
- Реализовал переключение языка и темы с сохранением пользовательских настроек.
- Настроил SSR-рендеринг локализованного контента и cookie-based preferences.
- Собрал FSD-inspired структуру с отдельными слоями shared, features, widgets, entities и views.
Сложности
- Поддержка двух языков без дублирования UI-логики.
- Согласование SSR-состояния с клиентскими настройками языка и темы.
- Сохранение простой структуры данных для быстрого обновления портфолио.
Что улучшил
- Сделал портфолио расширяемым: новые кейсы добавляются через модель данных.
- Разделил приложение на понятные слои и переиспользуемые UI-блоки.
- Добавил стабильную основу для дальнейшего развития сайта и публичной презентации опыта.
Стек
Next.jsReactTypeScriptSCSS ModulesSSRCookiesFSD-inspired architectureESLint
GitHubЗапустил realtime-чат, систему уведомлений и PWA-функциональность для CRM и клиентской платформы.
Результат
Запустил realtime-чат, систему уведомлений и PWA-функциональность для CRM и клиентской платформы.
Что сделал
- Разрабатывал и поддерживал frontend CRM и клиентской платформы.
- Реализовал realtime-чат и live-обновления на WebSocket.
- Подключил браузерные push-уведомления и сценарии внутренних уведомлений.
- Разработал PWA-функции: установка приложения, офлайн-сценарии и стабильное поведение на устройствах пользователей.
- Интегрировал frontend-функции с GraphQL API и существующей CRM-логикой.
Сложности
- Стабильная работа realtime-коммуникаций в CRM-сценариях.
- PWA-поведение в разных браузерах и пользовательских сценариях.
- Работа с существующим frontend-кодом и сложным состоянием приложения.
Что улучшил
- Улучшил коммуникацию между пользователями за счет чата и уведомлений.
- Повысил доступность клиентской платформы через PWA-функции.
- Участвовал в рефакторинге frontend-логики и стабилизации критичных сценариев.
Какие решения принял я
- Фокусировался на frontend-зоне ответственности: realtime UI, состояния сообщений, уведомления и PWA-поведение.
- Согласовывал контракты GraphQL/API с backend-командой и стабилизировал пользовательские сценарии после релизов.
Стек
ReactReact NativeElectronTypeScriptMobXGraphQLApollo ClientMotionSCSS Modules
Платформа для создания динамических форм, сбора заявок и отправки данных в email и Telegram. Разрабатывал фронтенд и бэкенд, продолжал поддержку и улучшение платформы после релиза.
Что сделал
- Разработал конструктор динамических форм.
- Реализовал типизацию и обработку динамических полей формы.
- Построил обработку заявок и логику хранения данных.
- Разработал аналитику по заявкам, формам, датам и пользователям.
- Интегрировал Telegram-ботов и email-уведомления.
- Реализовал экспорт данных в Excel.
Сложности
- Поддержка универсальной типизации для динамических полей.
- Построение аналитики по датам, формам и пользователям.
- Поддержка расширяемой архитектуры конструктора форм.
Что улучшил
- Улучшил структуру работы с динамическими типами полей.
- Повысил стабильность и поддерживаемость бэкенда.
- Участвовал в проектировании новых функций платформы.
Стек
ReactTypeScriptSCSS ModulesReact RouterRedux ToolkitAxiosMotionJestReact Testing LibraryExpressMulterMySQLnode-telegram-bot-apiNodemailerxlsx
Telegram Web App для генерации сторис и рекламных изображений для автомобильных и строительных компаний. Работал как единственный фронтенд-разработчик, участвовал в UX- и продуктовых решениях, а также разработал микросервис на Express для генерации изображений.
Что сделал
- Разработал SPA-интерфейс для Telegram Web App.
- Интегрировал Telegram Web App API.
- Создал интерфейсы для генерации сторис по шаблонам.
- Работал с анимациями, UX и mobile-first-адаптацией интерфейса.
- Разработал бэкенд-микросервис для генерации изображений.
- Участвовал в разработке лендинга и интерфейсов админ-панели.
Сложности
- Работа в рамках ограничений Telegram Web App.
- Генерация изображений на стороне бэкенда.
- Поддержка простого и быстрого UX для создания контента.
Что улучшил
- Участвовал в проектировании пользовательских сценариев для быстрой генерации контента.
- Оптимизировал процесс генерации изображений.
- Координировал задачи по обновлению дизайна и улучшал удобство интерфейса.
Стек
ReactTypeScriptSCSS ModulesReact RouterZustandAxiosMotionMantineExpressNodemonNext.js
CRM-система для управления объявлениями о недвижимости и автоматизации работы с фидами Avito. Работал как единственный фронтенд-разработчик: проектировал SPA-архитектуру, реализовывал сложную бизнес-логику и участвовал в продуктовых решениях.
Что сделал
- Разработал интерфейсы для управления объявлениями о недвижимости.
- Реализовал сложную систему фильтрации с множеством параметров.
- Построил функциональность массового редактирования объявлений.
- Реализовал историю изменений с возможностью просмотра и отката действий.
- Создал сценарии создания и редактирования объявлений внутри CRM.
- Реализовал ролевой доступ и управление правами.
- Работал с большими наборами данных, таблицами и бизнес-специфичными потоками данных.
Сложности
- Поддержка производительности при работе с большими списками и таблицами.
- Реализация сложной фильтрации и логики массовых операций.
- Сохранение стабильности SPA при частых изменениях бизнес-логики.
Что улучшил
- Оптимизировал рендеринг списков и таблиц.
- Улучшил структуру состояния приложения на Redux Toolkit.
- Участвовал в стабилизации и рефакторинге фронтенд-архитектуры.
Стек
ReactTypeScriptRedux ToolkitReact RouterSCSS ModulesAxiosJestReact Testing Library