Как Strapi помог разработать портал IT-кластера силами одного фронтендера
Как мы за 1 месяц с помощью 1 разработчика создали портал для IT-сообщества
ГлавнаяБлогКак мы работаемКак мы за 1 месяц с помощью 1 разработчика создали портал для IT-сообщества
Как мы работаем20 декабря 2022

Как мы за 1 месяц с помощью 1 разработчика создали портал для IT-сообщества

Фотография автора
Артем СалютинCBDO

На проектах часто возникает ситуация, связанная с неравномерным распределением загрузки между фронтенд- и бэкенд-разработчиками. Например, если на фронтендера ложится большой объем работ, то бэкендер может быстрее завершить свою часть, и рано или поздно у него не останется задач.

Для бизнеса подобные ситуации в любом случае обернутся финансовыми потерями. Если разработчик штатный, то ему выплачивается зарплата во время простоя. А если разработчика предоставляла аутсорс-компания, то при отсутствии задач его могут переключить на другой проект, и тогда понадобится нести издержки, связанные с подключением нового специалиста.

Как решить эту проблему? Если на проекте нет сложной логики на сервере, и нужна только админка, то можно обойтись только помощью фронтендера. 

Для административной панели мы использовали Headless CMS. Она предоставляет готовую панель для управления контентом. Преимущество в том, что к ней можно подключить любую верстку, а она отвечает только за серверную часть.

Самая популярная Headless CMS на данный момент — это Strapi. Именно её мы используем на наших проектах, так как она имеет большое количество встроенного функционала, а многие дополнительные хотелки подключаются с помощью модулей.

В изучении Strapi очень прост. Он предоставляет API и подробную документацию. Наши фронтендеры при первичном знакомстве с этим инструментом интегрировали страницу с версткой всего за пару часов.

Расскажем, как Strapi помог нам разработать и интегрировать с админ-панелью портал для IT-сообщества.

Краткие сведения

Срок выполнения: 1 месяц

Технологический стек: Vue, Tailwind CSS, Strapi

Состав команды: 1 middle frontend-разработчик

О проекте

IT-кластер — это первая структура внутри Ассоциации развития digital-агентств ARDA, объединяющая компании с общими целями и принципами работы. Внутри кластера формируются рабочие группы по решению конкретных задач. Work Solutions руководит рабочей группой по созданию отраслевых стандартов для аутстаффинга и аутсорсинга.

Наша рабочая группа объединила более 50 сервисных ИТ-компаний, поэтому нам понадобился сервис, объединяющий всех участников в едином портале. Перед ним стоят 3 основные задачи:

  • Дать пользователям информацию об IT-кластере и его целях;
  • Дать возможность опубликовать мероприятия, проводящихся в рамках сообщества, а также запись на эти мероприятия;
  • Предоставить информацию о всех участниках сообщества. Благодаря этим данным IT-компании могут узнать больше о своих коллегах по рынку.

Изначально все данные хранились в разрозненных источниках: Google-документах, Telegram-каналах, ноушенах и прочих инструментах. У нас была цель собрать всю информацию в доступном для всех сервисе.

Реализация

Для верстки мы использовали Vue и Tailwind CSS. Tailwind сильно ускоряет время разработки, так как вместо написания собственных CSS-стилей программист использует предопределенные классы. Vue — простой и популярный фреймворк для разработки клиентской части приложения. 

Дизайна на проекте не было, только некоторые артефакты по фирменному стилю и сайт ассоциации на Tilda. Штатных возможностей Tailwind вполне хватает для наших целей, если нет строгих требований по стилизации кнопок и других элементов управления.

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

Портал состоит из следующих разделов:

  • Личный кабинет для участников сообщества. Пользователи могут авторизоваться и заполнить свой профиль.
  • Описание стандартов. Стандарты представляют собой набор лучших практик по работе аутсорс-продакшна. Релиз каждого стандарта проходит в виде онлайн-конференции для всех участников, но мы позже публикуем все в текстовом виде.

Изображение статьи

  • Вебинары. В портале участник сообщества может посмотреть записи всех прошедших вебинаров

Изображение статьи

  • Ресурсная карта. В ней опубликованы все карточки компаний-участников. При вступлении в сообщество каждая компания указывает информацию о себе: количество штатных сотрудников, формат сотрудничества с клиентами, стек, список услуг и т.д. Также в ресурсной карте есть фильтр по всем характеристикам для удобства поиска своих коллег по рынку.
Изображение статьи
  • Календарь IT-мероприятий. В нем указаны не только внутренние мероприятия, но и все, что касается IT-сферы.

Изображение статьи

  • Вопросы и ответы. Помощь как для действующих участников сообщества, так и для желающих вступить.
  • Полезные ссылки. Тут опубликовано все, что может пригодиться руководителю компании: ссылки на чаты в Telegram, отраслевые медиа, блоги, рейтинги, аутстафф-платформы и т.д.

Весь контент в портале должен быть управляемым без помощи разработчиков, а это значит, что каждый блок нужно интегрировать с админкой. Благодаря Strapi это можно сделать без привлечения бэкенд-специалистов.

В нашем случае используется как статичный, так и динамический контент. Например, для каждого нового участника администратор заводит новую карточку и заполняет туда информацию о компании, и эта информация автоматически выводится в портале.

Изображение статьи

Заявки с обратных форм сайта также регистрируются в Strapi, после чего отправляются уведомления на электронную почту администратору и в Telegram-канал для оперативной обратной связи.

Выводы

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

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

Во-вторых, Strapi интегрируется с индивидуальной версткой полностью под ваши требования. Это значит, что вы не ограничены в выборе дизайна, как в случае с использованием готовых решений.

1.1к
122

Другие статьи

Ко всем статьям
Фоновое изображение: четверть круга закрыват часть круга

Интересные статьи и кейсы
от Work Solutions

Нажимая кнопку «Подписаться», я даю согласие на обработку персональных данных

Спасибо за подписку!

Фоновое изображение: верхний полукруг