Casewave — веб-платформа, на которой специалист собирает профиль и кейсы в единое портфолио, публикует его по постоянной ссылке и сохраняет в PDF. Редактор адаптирует структуру данных и подачу работ под девять направлений: дизайн, разработку, архитектуру, фото и видео, тексты и контент, маркетинг, продукт и аналитику, тестирование и другие специализации.
Продукт закрывает полный путь от черновика до публичного результата: регистрацию и подтверждение email, профиль и контакты, загрузку изображений, галереи и видео, сортировку работ, адаптивное превью, историю неизменяемых ревизий, отправку на модерацию, публикацию и последующее обновление. У публичного портфолио есть отдельные страницы работ, адаптивные изображения, метаданные для поисковых систем и соцсетей, счётчик уникальных просмотров, PDF-версия и форма жалобы. Для модераторов и администраторов реализованы очереди проверки, сравнение версий, управление доступом, обработка жалоб и журналирование действий.
Детали проекта
Разработка
Роль
Автор продукта, product designer и full-stack разработчик
Сформировал продуктовые требования, дорожную карту, информационную архитектуру и дизайн-систему. Спроектировал пользовательские сценарии владельца портфолио, модератора и администратора, а затем реализовал продукт целиком: React-интерфейс и общий renderer публичных страниц, Fastify API, доменную модель, контракты и валидацию, схему PostgreSQL и миграции, медиа-пайплайн, модерацию и публикацию, PDF-экспорт, жалобы, уведомления, метрики и административные инструменты. Настроил тестовую стратегию, Docker-окружение, CI/CD и безопасный production-деплой.
Архитектура
Проект организован как pnpm-монорепозиторий с разделением на приложение и самостоятельные пакеты домена, контрактов, базы данных, UI и конфигурации. Общий React-renderer используется и для серверной публичной страницы, и для приватного превью, поэтому пользователь проверяет тот же результат, который увидит посетитель. Zod-контракты задают границу между клиентом и API, а PostgreSQL-транзакции, неизменяемые ревизии и ETag защищают публикацию от гонок и потери изменений.
Публикация построена как атомарное переключение одобренной ревизии при сохранении постоянного slug. Медиа отделены от контента и выдаются в нескольких размерах и форматах; пользовательский URL не попадает напрямую в iframe или PDF-renderer. PDF строится из общей view model и кешируется по хэшу содержимого. Production выкладывается неизменяемым Docker-образом по digest; pipeline выполняет проверки, миграции и readiness-check, а при неуспешном запуске возвращает предыдущую версию приложения.
Результат
Запущена production-версия Casewave с девятью профессиональными направлениями и полным циклом «черновик → модерация → публикация → PDF». Актуальный локальный прогон подтверждает 147 unit/runtime-тестов без ошибок; интеграционные и браузерные Playwright-сценарии дополнительно встроены в CI. Интерфейс адаптирован для экранов от 320 px, публичные страницы работают без обязательного JavaScript, а автоматический деплой проверяет готовность новой версии и откатывает приложение при сбое.
