Артель Смирнов
Сайт строительной артели с нуля на Next.js и своей CMS. Вёрстка, админка, база, сервер и запуск мои, дизайн партнёра.
- Объект
- Сайт строительной артели
- Разработал
- Н. Митусов, всё кроме дизайна и SEO
- Стек
- Next.js, Payload CMS
- Адрес
- smirnovartel.ru
- Лист
- 1 из 7
Лист 2 Масштаб
Одна единица на всю стройку
Макет нарисован на двух ширинах, 1920 и 393. Я завёл единицу u: на этих двух ширинах она равна ровно одному пикселю, поэтому 68u это те самые 68 пикселей из макета. Между ними всё растёт плавно, без ступенек.
Окно 1920 px
u =1px
Совпало с макетом
- поля 48u 48 px
- шапка 116u 116 px
- бургер 42u 42 px
Тяните линейку или жмите на отметки. Мелкий текст идёт по своей, более пологой кривой, иначе на ноутбуке он стал бы нечитаемым.
Лист 3 План этажа
Админка как квартира
Заказчик правит сайт сам, поэтому у каждого дела своя комната. Шаблоны строгие, у полей подсказки. Нажмите на помещение.
Лист 4 Разрез
Сервер тоже с нуля
Панель хостинга занимала нужные порты, поэтому я снёс её целиком и собрал сервер заново в Docker. Читайте снизу вверх, как строят.
- КровляCaddyПринимает запросы и сам продлевает сертификат
- Жилой этажNext.js 16 и React 19Страницы собраны заранее и открываются сразу
- Технический этажPayload CMS 3Админка живёт в том же приложении: один код, один запуск
- ПерекрытиеRedisКэш страниц между запросами
- ЦокольPostgreSQLПроекты, команда, заявки, журнал
- ФундаментНочные копии базыКаждую ночь, старые удаляются сами
Лист 5 Акт о дефекте
Первый вход повесил админку
Сразу после запуска заказчик создал первый аккаунт, и всё зависло. Со стороны казалось, что вход работает только с одного устройства: у него сессия уже была, и опасный код не срабатывал.
В переписке я назвал причиной кэш. В заметках от 19 августа описан механизм: запрос в хуке без req уходил на отдельное соединение и ждал транзакцию, а она ждала его.
Висит 0 с
Лист 6 График работ
22 дня
От готовых макетов до запуска. До этого был запрос в январе и согласование в феврале, потом полгода ждали дизайн. На чертеже такие длинные участки рисуют с разрывом.
- Запрос
- Согласование
полгода ожидания дизайна
- Готовы макеты
- Сайт уже в работе
- Сайт готов, сервера ещё нет
- Ночью запуск
Лист 7 Развёртка
Что построено
Примечания
Ролик на первом экране
Заказчик прислал 4K 60 к/с на 40 Мбит/с, почти 500 МБ, и просил не резать качество. Сделал лестницу разрешений и вертикальную версию для телефонов. Разницы заказчик не увидел и попросил откатить.
Проверка вёрстки
Скрипт проходит страницы на разных ширинах и ищет переполнения, наезды и обрезанный текст. Геометрию на 1920 и 393 сверяет с эталоном.
Движение
Прелоадер, плавная прокрутка, анимации на GSAP и Lenis. Блок «до и после» работает мышью, пальцем и клавиатурой.
Что я вынес
На локальной машине всё было чётко, а зависло на боевом сервере. Теперь админку после правок проверяют скрипты: запросы к API и экраны под обеими ролями.
Ролик на главной смотрится хорошо и, главное, не тормозит.
Партнёр проекта, сентябрь 2026. Пересказ из переписки.
- Что я делал
- Всё, кроме дизайна и SEO: вёрстка, анимации, админка, база, сервер, запуск и правки после него
- Кто ещё работал
- Дизайн у партнёра-дизайнера, метаданные и robots у партнёра по SEO
- Когда
- июль – сентябрь 2026
- Инструменты
- Next.js 16, React 19, Payload CMS 3, PostgreSQL, Redis, Caddy, Docker, GSAP, Lenis
- Сайт
- smirnovartel.ru
