Систему согласования постов для отдела smm в рекламном агенстве

Описание

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

Что нужно было сделать:

Разработать web-приложение на основе FastAPI с удобным интерфейсом и поддержкой авторизации.

Реализовать функционал создания, редактирования и согласования постов (текст, изображения, видео, хэштеги).

Добавить возможность drag-and-drop загрузки файлов, сортировки медиа, предпросмотра публикации в том виде, как она будет выглядеть в соцсетях.

Настроить систему ролей и прав: администраторы, SMM-менеджеры, редакторы, клиенты.

Сделать удобные модальные окна для создания и редактирования постов с автосохранением черновика.

Внедрить историю правок с возможностью отслеживать статус («на согласовании», «обработано», «опубликовано»).

Добавить статистику по проектам и подсчет количества необработанных правок.

Подключить PostgreSQL и настроить миграции через Alembic.

Обеспечить работу приложения в Docker-окружении с использованием Nginx и поддержкой SSL.

Ключевые цели клиента:

Автоматизация — исключить ручную пересылку файлов и текстов через мессенджеры и почту.

Прозрачность — видеть, на какой стадии согласования находится публикация и кто за нее отвечает.

Удобство — простой и понятный интерфейс, где вся информация о постах и проектах собрана в одном месте.

Масштабируемость — возможность в будущем подключать новые функции (интеграции с соцсетями, автопостинг, аналитика).

Решение

1. Анализ и проектирование:
Собрали требования от клиента и составили список ключевых функций: работа с постами, медиа, системой согласований и ролями пользователей.
Спроектировали архитектуру приложения с разделением на backend, frontend и инфраструктурные сервисы.
Определили стек технологий: FastAPI, PostgreSQL, SQLAlchemy, Alembic, Docker, Nginx, JavaScript (с использованием Quill и drag-and-drop).

2. Backend-разработка (FastAPI + PostgreSQL):
Реализовали систему регистрации и авторизации пользователей, включая разграничение прав доступа (администраторы, редакторы, SMM-менеджеры, клиенты).
Настроили хранение данных в PostgreSQL с поддержкой миграций через Alembic.
Разработали API для создания, редактирования, согласования и удаления постов.
Внедрили систему версионирования: возможность отслеживать правки, отмечать статус («обработано» / «на согласовании»).
Реализовали подсчет количества необработанных правок по каждому проекту.

3. Работа с медиа и контентом:
Добавили возможность загрузки изображений и видео через drag-and-drop.
Настроили предпросмотр постов: текст, хэштеги и медиа отображаются в том виде, как будут выглядеть в соцсетях.
Реализовали корректное сохранение порядка файлов с помощью поля media_order и обработки данных в backend.
Добавили удаление медиафайлов при удалении поста.
Для текстов подключили Quill-редактор с поддержкой форматирования и эмодзи.

4. Frontend и UX:
Создали удобные модальные окна для создания и редактирования постов.
Настроили автосохранение черновиков в localStorage с возможностью восстановления при случайном закрытии формы.
Добавили предпросмотр в виде карусели для изображений: медиа слева, текст и хэштеги справа.
Реализовали drag-and-drop сортировку файлов в формах.
Настроили динамическое обновление счетчиков правок без перезагрузки страницы.

5. Инфраструктура и деплой:
Настроили окружение с помощью Docker Compose (сервисы: web-приложение, PostgreSQL, Nginx).
Сконфигурировали Nginx для маршрутизации запросов и работы через HTTPS.
Подготовили docker-compose.yml и Dockerfile для удобного запуска на сервере.
Настроили хранение данных в volume для PostgreSQL.

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

Провели тестирование прав доступа: проверили, что посты можно создавать и редактировать только участникам проекта или администраторам.
Настроили валидацию для предотвращения ошибок при добавлении участников (проверка на дубликаты).

7. Финальная доработка:
Добавили функциональность удаления постов с медиафайлами.
Оптимизировали работу с видео: загрузка производится асинхронно, чтобы не блокировать интерфейс.
Реализовали прогресс-бар загрузки с отображением процентов и спиннером.
Подготовили проект к масштабированию: возможность подключения интеграций (автопостинг в соцсети, аналитика).

Результат

Результат работы:

Создана архитектура проекта и реализована вся основная функциональность, включая авторизацию, работу с медиа и предпросмотр.
Внедрены роли пользователей, система черновиков и восстановления данных.
Настроена работа фронтенда с drag-and-drop, Quill-редактором для текста и поддержкой эмодзи.
Обеспечено корректное сохранение и отображение файлов в нужном порядке.
Подключена база данных PostgreSQL, реализована миграционная система.
Сервис упакован в Docker, настроен Nginx для маршрутизации и удобного деплоя.

Презентация проекта