Заказчик — IT-компания Double Systems, которая разрабатывает цифровые продукты (web-решения, мобильные приложения, AI, видеотехнологии). У них уже был реализован кейс HealthHub — экосистема здоровья (веб-платформа + мобильное приложение).
Что требовалось:
Мне нужно было разработать полноценный корпоративный сайт для Double Systems с нуля:
Многостраничная структура (главная, услуги, портфолио/кейсы, контакты)
Админ-панель для управления контентом (чтобы заказчик сам добавлял новые кейсы, редактировал услуги, обновлял контакты)
Интеграция с базой данных (хранение информации о проектах, экспертах, отзывах, заявках)
Форма обратной связи с выбором способа связи (WhatsApp, Phone, Telegram, VK)
Адаптив под все устройства
Заказчик хотел: чтобы сайт работал на современном стеке, был быстрым (SSR/SSG), имел удобную админку и мог масштабироваться под новые проекты.
Что сделал:
1. Проектирование базы данных (PostgreSQL + Payload CMS)
Создал следующие коллекции в Payload CMS:
Проекты / Кейсы (HealthHub и другие) — название, описание, теги (Приложение, Портал, Экосистема здоровья), изображения, ссылка
Услуги (6 услуг из макета: Web-решения, Мобильные приложения, ИИ, Видеотехнологии, Безопасность данных, Парсинг) — заголовок, описание, иконка, номер /01-06
Эксперты (Ольга Кабинетова, Светлана Консультация, Елена Курашова, Алина Борисова, Александр Дондарев и др.) — имя, роль, фото, соцсети
Заявки / Контакты — имя, комментарий, предпочитаемый способ связи (WhatsApp/Phone/Telegram/VK), номер телефона
Страница «О нас» / Блоки — текст, преимущества, команда
2. Бэкенд (Express.js + Payload CMS)
Настроил Payload CMS как основную админ-панель — заказчик заходит в /admin и управляет всем контентом
Написал Express.js эндпоинты для:
Получения списка проектов/кейсов
Получения услуг
Отправки заявки из формы (сохранение в PostgreSQL + отправка на email заказчика)
Получения динамических данных для страниц
3. Фронтенд (React + Next.js)
Страницы и компоненты, которые свёрстал и задинимил:
Главная — презентация компании, блок услуг (6 штук с номерами /01–/06)
Страница кейса HealthHub — описание экосистемы здоровья (приложение + портал), список экспертов, блок «Мужское здоровье и спортивные достижения»
Страница «Услуги» (или блок на главной) — детальное описание каждого направления
Страница «Контакты»:
Контактная информация (телефон, email, ИНН, юридический адрес)
Форма обратной связи с выбором способа связи (WhatsApp, Phone, Telegram, VK)
Поле для имени и комментария
Согласие на обработку данных
Страница «Проекты» / «Портфолио» — список всех кейсов, фильтр по тегам (Приложение, Портал, Экосистема здоровья)
Функционал формы:
Пользователь выбирает удобный способ связи (кнопки WhatsApp/Phone/Telegram/VK)
Вводит номер телефона, имя, комментарий
После отправки данные уходят в PostgreSQL (через Payload CMS) и дублируются на email заказчика
Адаптив: все страницы корректно отображаются на десктопе, планшете и мобильных устройствах.
4. Админ-панель (Payload CMS)
Заказчик может самостоятельно:
Добавлять/редактировать/удалять кейсы (проекты)
Редактировать услуги (текст, порядок отображения, иконки)
Управлять экспертами и командой
Просматривать все заявки из формы (имя, телефон, комментарий, выбранный способ связи)
Редактировать контакты и юридическую информацию (телефон, email, ИНН, адрес)
Payload CMS генерирует всю админку автоматически — мне не пришлось писать её с нуля, только настроить коллекции и доступы.
5. Интеграция всего в единую экосистему
Next.js получает данные из Payload CMS через API (REST или GraphQL — Payload поддерживает оба)
Express.js обрабатывает кастомные эндпоинты (например, отправка email после заявки)
PostgreSQL хранит все данные: проекты, экспертов, услуги, заявки
Полноценный корпоративный сайт на современном стеке (Next.js + Payload + PostgreSQL)
Многостраничная структура (главная, услуги, кейсы/портфолио, контакты)
Удобная админ-панель — заказчик сам управляет контентом без помощи разработчика
Все кейсы (включая HealthHub) выведены динамически из базы данных — можно добавлять новые проекты в один клик
Форма обратной связи с выбором способа связи работает и сохраняет заявки в БД
Сайт быстрый благодаря Next.js (SSR/SSG) — хороший SEO и производительность
Адаптив под любые устройства — мобильный трафик не теряется
Готов к масштабированию — можно добавлять новые типы контента, подключать аналитику, интегрировать с CRM
Пожаловаться
