Как можно ускорить запуск проектов с помощью v0 и ChatGPT 5 ⚡️
Раньше в отсутствии экспертизы в дизайне мы часто собирали кликабельный прототип на фронтенде.
Это нужно для проверки гипотез и получить первый функционал, сосредоточиться на ключевых фичах и убедиться - что они правильно выполняют бизнес-задачи
⚙️ v0 — позволяет не выдумывать визуал через код. Удачный инструмент для быстрой сборки верстки.
Используем для:
- Мгновенного старта — быстро собрать кликабельный интерфейс для системы бронирования за 3 часа на основе UI библиотек (допустим PrimeVue). В среднем на вёрстку уходило 2–3 дня.
- Проверки гипотез — получить несколько прототипов по ТЗ и показать его клиентам как можно скорее. Клиент смотрит рабочий функционал на моках без готового бэкенда.
- Экономии ресурсов — не требует много времени разработчика и продумывания расположения кнопок при разработке на этапе старта проекта.
Допиливать v0 прототипы можно на уровне легкого рефакторинга при помощи chatGPT, тк v0 переписывает при каждом запросе все компоненты с нуля
🤖 ChatGPT 5 — легкий хелпер для свежого взгляда на функцию или кусок кода.
Не решает все за нас, но позволяет оптимизаровать код и закрыть часть узких мест.
Используем для:
- Рефакторинга кода — можно оптимизировать модуль на Vue 3, уменьшив код или сделать его гибче сделав функции чистыми.
- Автоматизации рутины — базовая задача это генерация документации по API. Покрытие тестами по части функций.
- Быстрых решений — можно найти несколько способов реализации и выбрать для себя лучший предотвратив рефакторинг
Главное не ставить ставку на то, что это реальное решение - это способ ускорить полное понимание задачи, покрутить функционал, сверить ожидания.
Конечно для боевых проектов мы привлекаем дизайнера тк готовых компонентов для релиза не достаточно.
Если в вашем проекте нет брендбука/кита и функционал важнее чем визуал - вам хватит готовой UI библиотеки
⸻
Внимание вопрос:
Расскажите какие инструменты ускоряющие вашу работу и снижающие рутину вы для себя нашли и юзали ли v0?
Раньше в отсутствии экспертизы в дизайне мы часто собирали кликабельный прототип на фронтенде.
Это нужно для проверки гипотез и получить первый функционал, сосредоточиться на ключевых фичах и убедиться - что они правильно выполняют бизнес-задачи
⚙️ v0 — позволяет не выдумывать визуал через код. Удачный инструмент для быстрой сборки верстки.
Используем для:
- Мгновенного старта — быстро собрать кликабельный интерфейс для системы бронирования за 3 часа на основе UI библиотек (допустим PrimeVue). В среднем на вёрстку уходило 2–3 дня.
- Проверки гипотез — получить несколько прототипов по ТЗ и показать его клиентам как можно скорее. Клиент смотрит рабочий функционал на моках без готового бэкенда.
- Экономии ресурсов — не требует много времени разработчика и продумывания расположения кнопок при разработке на этапе старта проекта.
Допиливать v0 прототипы можно на уровне легкого рефакторинга при помощи chatGPT, тк v0 переписывает при каждом запросе все компоненты с нуля
🤖 ChatGPT 5 — легкий хелпер для свежого взгляда на функцию или кусок кода.
Не решает все за нас, но позволяет оптимизаровать код и закрыть часть узких мест.
Используем для:
- Рефакторинга кода — можно оптимизировать модуль на Vue 3, уменьшив код или сделать его гибче сделав функции чистыми.
- Автоматизации рутины — базовая задача это генерация документации по API. Покрытие тестами по части функций.
- Быстрых решений — можно найти несколько способов реализации и выбрать для себя лучший предотвратив рефакторинг
Главное не ставить ставку на то, что это реальное решение - это способ ускорить полное понимание задачи, покрутить функционал, сверить ожидания.
Конечно для боевых проектов мы привлекаем дизайнера тк готовых компонентов для релиза не достаточно.
Если в вашем проекте нет брендбука/кита и функционал важнее чем визуал - вам хватит готовой UI библиотеки
⸻
Внимание вопрос:
Расскажите какие инструменты ускоряющие вашу работу и снижающие рутину вы для себя нашли и юзали ли v0?
👍8❤6👏3🔥1
Мы ведем проект сети музыкальных школ "Виртуозы" и изначально их CRM строилась на Blade шаблонах и jQuery.
Для своего времени это было оптимальное решение: страницы рендерились на сервере, скрипты выполняли всю бизнес-логику и оживляли интерфейс, всё работало стабильно.
Со временем стало понятно, что поддержка таких решений усложняется, а скорость развития не соответствует новым требованиям бизнеса.
Начали миграцию с небольших шагов. Вместо jQuery-плагинов и разрозненных скриптов в новых разделах появились отдельные Vue-модули: расписание занятий, форма записи, переиспользуемые таблицы данных с фильтрами.
Каждый новый модуль автономен, со своим состоянием в store и API, и не зависит от остальных модулей. Решение вынести в модули позволило дорабатывать систему поэтапно: меняешь один блок — остальной проект продолжает работать без сбоев. Появилась база компонентов, которая расширяется набором готовых компонентов из UI библиотеки PrimeVue
Laravel по-прежнему остаётся фундаментом: Blade рендерит основу страниц, а Laravel Mix собирает модули фронта на Vue. Следующим шагом станет переход на Vite. Он даст скорость разработки, горячую замену модулей и ещё более тесную интеграцию Vue в Laravel-экосистему.
В итоге мы не ломаем изначально работающий монолит, а превращаем его в систему с модульной архитектурой. Laravel обеспечивает надёжность, Vue дает реактивность, а сборка пока держится на Mix — до момента, когда станет разумно мигрировать на Vite.
👉 Всегда ли монолит это плохо и стоит ли все проекты переводить в Headless?
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10🤝5👍2
Forwarded from MSK VUE.JS News
Всем приветы🌚
Создадим активность в этом чатике!
Пришло время объявить третьего спикера – Влад Худяков 👏
О чем будет доклад Влада:
👉 Регистрация на митап 👈
Ждешь доклад Влада? Ставь 🔥
Создадим активность в этом чатике!
Пришло время объявить третьего спикера – Влад Худяков 👏
О чем будет доклад Влада:
Все мы по-разному используем Nuxt. Где-то хватает статичных страниц, которые поддерживает команда разработчиков. Но если бизнесу важно самому управлять проектом и собирать новые страницы без программиста — нужен гибкий конструктор.
В докладе я покажу, как за три шага превратить обычный Nuxt-проект в конструктор: от простого вызова компонентов до универсальной точки входа по slug. Разберём, как встроить формы в формате конструктора, разгрузить фронтенд-разработчиков и ускорить публикацию страниц в продакшен.
👉 Регистрация на митап 👈
Ждешь доклад Влада? Ставь 🔥
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14💯6🥰5
Знакомство со спикерами WS МИТАП №5: Strapi. Путь фронтендера к фулстеку 🤩
Представляем вам приглашенного спикера — Владислава Худякова, основателя студии веб-разработки Spot.
Влад начинал свой путь с верстки на таблицах и подбора градиентов «на глаз», а сегодня вместе с командой создает реактивные решения для управления digital-продуктами. Основной стек Spot — Vue.js, Laravel и Python. Strapi команда использует в проектах, где важен быстрый запуск и гибкая настройка.
За последние годы Влад выступал на митапах Evrone, Иннополис, Vue MSK и Moscow CSS, участвовал в подкастах Cloud и Frontend Weekend, публиковал статьи на Хабре.
На митапе Влад поделится опытом в докладе «Многоязычный контент без боли: i18n в действии». Расскажет, как устроена локализация в Strapi 5: от включения и преднастройки моделей до работы с данными и лучших практик. Покажет, как правильно настраивать многоязычность, избегать ошибок с глобальными и переводимыми полями и запускать продукты в продакшн без лишней боли.
Не упустите возможность получить практические знания от эксперта, который совмещает разработку, управление студией и активное участие в IT-сообществе.
Напоминаем детали мероприятия:
Когда: 13 сентября, 16:00
Где: г. Ростов-на-Дону, ул. Города Волос 14, 2 этаж, Южный ИТ-Парк
Ознакомиться с полной программой мероприятия и зарегистрироваться можно здесь
Если не сможешь присутствовать очно, подключайся к онлайн-трансляции
Представляем вам приглашенного спикера — Владислава Худякова, основателя студии веб-разработки Spot.
Влад начинал свой путь с верстки на таблицах и подбора градиентов «на глаз», а сегодня вместе с командой создает реактивные решения для управления digital-продуктами. Основной стек Spot — Vue.js, Laravel и Python. Strapi команда использует в проектах, где важен быстрый запуск и гибкая настройка.
За последние годы Влад выступал на митапах Evrone, Иннополис, Vue MSK и Moscow CSS, участвовал в подкастах Cloud и Frontend Weekend, публиковал статьи на Хабре.
На митапе Влад поделится опытом в докладе «Многоязычный контент без боли: i18n в действии». Расскажет, как устроена локализация в Strapi 5: от включения и преднастройки моделей до работы с данными и лучших практик. Покажет, как правильно настраивать многоязычность, избегать ошибок с глобальными и переводимыми полями и запускать продукты в продакшн без лишней боли.
Не упустите возможность получить практические знания от эксперта, который совмещает разработку, управление студией и активное участие в IT-сообществе.
Напоминаем детали мероприятия:
Когда: 13 сентября, 16:00
Где: г. Ростов-на-Дону, ул. Города Волос 14, 2 этаж, Южный ИТ-Парк
Ознакомиться с полной программой мероприятия и зарегистрироваться можно здесь
Если не сможешь присутствовать очно, подключайся к онлайн-трансляции
❤11🔥6
Уже скоро мы можем увидеться на митапе в Ростове-на-Дону
Обсудим мультиязычность при реализации сайтов и приложений при помощи Strapi
Please open Telegram to view this post
VIEW IN TELEGRAM
3❤14🔥6
MSK VUE.JS News
Всем приветы🌚 Создадим активность в этом чатике! Пришло время объявить третьего спикера – Влад Худяков 👏 О чем будет доклад Влада: Все мы по-разному используем Nuxt. Где-то хватает статичных страниц, которые поддерживает команда разработчиков. Но если…
Всем хай, вернулся в строй после первого долгого отпуска. Попутно афигенская новость:
Запись моего доклада по конструктору сайта на vue.js с конфы Msk Vue подъехала. В основе бэка кстати лежит Laravel как собственный такой Headless
Кто не был - есть возможность посмотреть на ютубе. Будут вопросики задавайте через комментарии этого поста - отвечу :)
Теперь ждем запись с Ростова, где в презе была инструкция как собрать мультиязычный сайт-конструктор на Strapi 5 :)
Запись моего доклада по конструктору сайта на vue.js с конфы Msk Vue подъехала. В основе бэка кстати лежит Laravel как собственный такой Headless
Кто не был - есть возможность посмотреть на ютубе. Будут вопросики задавайте через комментарии этого поста - отвечу :)
Теперь ждем запись с Ростова, где в презе была инструкция как собрать мультиязычный сайт-конструктор на Strapi 5 :)
2❤11🔥8
Всем доброго вечера пятнички!
Наверняка вы еще за пк, или по пути домой - а значит, что можно послушать запись доклада по теме: Многоязычный контент на Strapi 5 (i18n)
На примерах, которые я показываю в докладе можно получить не только мультиязычное API, но и возможность реализовать конструктор блоков сайта и применить в работе.
Саму презентацию прикрепляю после поста, что бы было нагляднее повторять по шагам.
Будут вопросы - велком в комментарии - разберем
Наверняка вы еще за пк, или по пути домой - а значит, что можно послушать запись доклада по теме: Многоязычный контент на Strapi 5 (i18n)
На примерах, которые я показываю в докладе можно получить не только мультиязычное API, но и возможность реализовать конструктор блоков сайта и применить в работе.
Саму презентацию прикрепляю после поста, что бы было нагляднее повторять по шагам.
Будут вопросы - велком в комментарии - разберем
🔥10
Как превратить выставочный стенд в источник заявок?
За 3 дня — от дизайна до релиза мы запустили интерактивный квиз для стенда ГК Практика на форум 100+ TechnoBuild.
Нарисовали адаптивный дизайн и реализовали его для десктопа и мобильных устройств.
Сотрудники работали с планшета, а посетители могли пройти тест со своих телефонов по QR-коду.
Квиз определяет специализацию участника, валидирует выбранные ответы и сохраняет всё в в общую таблицу: данные, выбранные варианты и итоговый профиль.
Как результат — поток релевантных лидов и готовая аналитика по интересам аудитории без ручной обработки.
При реализации использовали Vue3 и Laravel, такой стек используем для запуска маркетинговых активностей, сервисов, админок, личных кабинетов и реализации CRM-систем.
Админка для сайта-конструктора кстати позволяет собирать поля и компоненты аналогично Strapi, позволяя расширять базу компонентов
Рассказать вам как утроено наше решение при реализации сайта конструктора из админки?
За 3 дня — от дизайна до релиза мы запустили интерактивный квиз для стенда ГК Практика на форум 100+ TechnoBuild.
Нарисовали адаптивный дизайн и реализовали его для десктопа и мобильных устройств.
Сотрудники работали с планшета, а посетители могли пройти тест со своих телефонов по QR-коду.
Квиз определяет специализацию участника, валидирует выбранные ответы и сохраняет всё в в общую таблицу: данные, выбранные варианты и итоговый профиль.
Как результат — поток релевантных лидов и готовая аналитика по интересам аудитории без ручной обработки.
При реализации использовали Vue3 и Laravel, такой стек используем для запуска маркетинговых активностей, сервисов, админок, личных кабинетов и реализации CRM-систем.
Админка для сайта-конструктора кстати позволяет собирать поля и компоненты аналогично Strapi, позволяя расширять базу компонентов
Рассказать вам как утроено наше решение при реализации сайта конструктора из админки?
❤14🔥8
Как выбрать стек для многостраничного сайта, если вы любите Nuxt (Vue JS) 👩💻 ❤️
Все наши проекты строятся по одной модели: Nuxt + API (Headless).
Это не зависит от типа: сайт, сервис, CRM-система или элементарный квиз.
Быстрый интерфейс у нас один и тот же — меняется только инструмент для реализации API.
И именно он определяет, как сайт будет жить и развиваться дальше.
Представьте:
Вы хотите суперкар, но вам в качестве базы рекоммендуют Ладу Приору. Построить что-то можно — но в один момент вы упрётесь в ограничения и будете начинать заново.
И наоборот: вам нужно просто ездить на дачу — и для этого точно не нужна команда инженеров и разработанный кузов с нуля.
Ниже — три самых частых пути, которые мы используем, и задачи, под которые они подходят.
1) Nuxt + WordPress API (WP Engine)
Когда важна скорость и гибкость в изменении контента.
Для компаний, которые только выходят в онлайн или активно ищут своё позиционирование.
Страницы могут меняться каждую неделю, тексты переписываются, гипотезы тестируются.
Что получает бизнес:
— быстрый запуск за вменяемые деньги
— простое, привычное управление страницами
— возможность экспериментировать без разработчиков
🌝 Если вы в поиске решения для старта — это ваш вариант.
2) Nuxt + Strapi
Когда контента становится много и нужен порядок, структура и фильтрация.
Strapi даёт редактору возможность собирать страницы как конструктор: блоки, коллекции, динамические зоны.
Сайт масштабируется, структура остаётся устойчивой, есть удобная мультиязычность.
Что получает бизнес:
— аккуратный, структурный, системный сайт
— самостоятельную сборку страниц из готовых компонентов
— комфортную работу при росте разделов
🌝 Если вы уже знаете, что хотите от сайта — Strapi оптимален.
3) Nuxt + Laravel API
Когда сайт — вторая часть системы, а первая — ваши процессы.
Здесь речь уже не про страницы, а про логику и функциональность: личные кабинеты, рейтинги, калькуляции, интеграции, конструкторы товара.
Сайт становится фасадом продукта или платформы.
Что получает бизнес:
— развитие в любом направлении, подключение интеграций, сбор аналитики
— гибкость в функционале и лёгкое масштабирование структуры
— возможность строить систему, а не витрину
— параллельное развитие, например: сайт + личный кабинет + мобильное приложение
🌝 Если вы строите продукт — Laravel даёт самую устойчивую траекторию.
Общий вывод
Все три решения работают по одному принципу:
отдельный интерфейс на Nuxt (VueJS) + API, который отдаёт данные.
Разница — только в траектории вашего бизнеса:
⭐️ WordPress (WP Engine) — скорость, частые изменения, работа с контентом
⭐️ Strapi — рост, порядок, структура, много типов страниц
⭐️ Laravel — процессы, продукт, долгосрочное развитие
Конечно, есть и другие варианты — например, Python (Django) 🐍 — отличный инструмент, и опыт с ним у нас тоже есть.
Но этот пост в рамках обсуждения того, как Nuxt(VueJS) применим к разным задачам разработки сайтов и сервисов без явного контекста обработки большого количества данных.
#vuejs #frontend_разработка #backend_разработка #spot
Все наши проекты строятся по одной модели: Nuxt + API (Headless).
Это не зависит от типа: сайт, сервис, CRM-система или элементарный квиз.
Быстрый интерфейс у нас один и тот же — меняется только инструмент для реализации API.
И именно он определяет, как сайт будет жить и развиваться дальше.
Представьте:
Вы хотите суперкар, но вам в качестве базы рекоммендуют Ладу Приору. Построить что-то можно — но в один момент вы упрётесь в ограничения и будете начинать заново.
И наоборот: вам нужно просто ездить на дачу — и для этого точно не нужна команда инженеров и разработанный кузов с нуля.
Ниже — три самых частых пути, которые мы используем, и задачи, под которые они подходят.
1) Nuxt + WordPress API (WP Engine)
Когда важна скорость и гибкость в изменении контента.
Для компаний, которые только выходят в онлайн или активно ищут своё позиционирование.
Страницы могут меняться каждую неделю, тексты переписываются, гипотезы тестируются.
Что получает бизнес:
— быстрый запуск за вменяемые деньги
— простое, привычное управление страницами
— возможность экспериментировать без разработчиков
🌝 Если вы в поиске решения для старта — это ваш вариант.
2) Nuxt + Strapi
Когда контента становится много и нужен порядок, структура и фильтрация.
Strapi даёт редактору возможность собирать страницы как конструктор: блоки, коллекции, динамические зоны.
Сайт масштабируется, структура остаётся устойчивой, есть удобная мультиязычность.
Что получает бизнес:
— аккуратный, структурный, системный сайт
— самостоятельную сборку страниц из готовых компонентов
— комфортную работу при росте разделов
🌝 Если вы уже знаете, что хотите от сайта — Strapi оптимален.
3) Nuxt + Laravel API
Когда сайт — вторая часть системы, а первая — ваши процессы.
Здесь речь уже не про страницы, а про логику и функциональность: личные кабинеты, рейтинги, калькуляции, интеграции, конструкторы товара.
Сайт становится фасадом продукта или платформы.
Что получает бизнес:
— развитие в любом направлении, подключение интеграций, сбор аналитики
— гибкость в функционале и лёгкое масштабирование структуры
— возможность строить систему, а не витрину
— параллельное развитие, например: сайт + личный кабинет + мобильное приложение
🌝 Если вы строите продукт — Laravel даёт самую устойчивую траекторию.
Общий вывод
Все три решения работают по одному принципу:
отдельный интерфейс на Nuxt (VueJS) + API, который отдаёт данные.
Разница — только в траектории вашего бизнеса:
⭐️ WordPress (WP Engine) — скорость, частые изменения, работа с контентом
⭐️ Strapi — рост, порядок, структура, много типов страниц
⭐️ Laravel — процессы, продукт, долгосрочное развитие
Конечно, есть и другие варианты — например, Python (Django) 🐍 — отличный инструмент, и опыт с ним у нас тоже есть.
Но этот пост в рамках обсуждения того, как Nuxt(VueJS) применим к разным задачам разработки сайтов и сервисов без явного контекста обработки большого количества данных.
#vuejs #frontend_разработка #backend_разработка #spot
Please open Telegram to view this post
VIEW IN TELEGRAM
💯10❤5🔥3
Как мы убрали “форменный хаос” из страховых процессов
Пару лет назад большинство страховых форм выглядели одинаково громоздко. Клиент должен был вбить тонну данных вручную: ФИО, данные авто, полис, номера, контакты. Все это нужно пропускать через маски, валидации, подключиать Dadata для автозаполнения и чуть ускорить процесс.
Главная проблема - эти формы были на главных страницах страховых без контекста о пользователе.
Сразу ловим ключевую проблему: данные заполняются каждый раз, слетала - придется заполнить заново т.к возможности сохранить черновик нет.
Как решали:
Перенесли форму из страницы сайта в личный кабинет — туда, где есть контекст:
автомобили клиента, действующие полисы, история обращений.
Формы перестали быть анкетами. Добавлены сущности авто и полисов, чтобы система сама знала всё, что человек раньше переписывал рукой. Данные подтягиваются автоматически, уже провалидированы как нам нужно и хранятся как часть профиля.
При наступлении страхового случая путь сокращается.
Не нужно заполнять десятки полей, клиент просто выбирает действующий полис из списка и проходит несколько шагов, где уже всё предзаполнено: владелец, автомобиль, номер полиса. Сфокусироваться нужно только на фактических деталях: дата, место, фото.
Как результат — короткая воронка фиксации ДТП, которая не грузит пользователя и присылает в страховую структурированные данные с которыми можно дальше работать.
Это тот случай, когда цифровой продукт реально меняет операционку: легче людям, быстрее бизнесу, меньше нагрузки на поддержку.
Пару лет назад большинство страховых форм выглядели одинаково громоздко. Клиент должен был вбить тонну данных вручную: ФИО, данные авто, полис, номера, контакты. Все это нужно пропускать через маски, валидации, подключиать Dadata для автозаполнения и чуть ускорить процесс.
Главная проблема - эти формы были на главных страницах страховых без контекста о пользователе.
Сразу ловим ключевую проблему: данные заполняются каждый раз, слетала - придется заполнить заново т.к возможности сохранить черновик нет.
Как решали:
Перенесли форму из страницы сайта в личный кабинет — туда, где есть контекст:
автомобили клиента, действующие полисы, история обращений.
Формы перестали быть анкетами. Добавлены сущности авто и полисов, чтобы система сама знала всё, что человек раньше переписывал рукой. Данные подтягиваются автоматически, уже провалидированы как нам нужно и хранятся как часть профиля.
При наступлении страхового случая путь сокращается.
Не нужно заполнять десятки полей, клиент просто выбирает действующий полис из списка и проходит несколько шагов, где уже всё предзаполнено: владелец, автомобиль, номер полиса. Сфокусироваться нужно только на фактических деталях: дата, место, фото.
Как результат — короткая воронка фиксации ДТП, которая не грузит пользователя и присылает в страховую структурированные данные с которыми можно дальше работать.
Это тот случай, когда цифровой продукт реально меняет операционку: легче людям, быстрее бизнесу, меньше нагрузки на поддержку.
🔥14
This media is not supported in your browser
VIEW IN TELEGRAM
Крути колесо! Как я без слов ушел пилить генератор Колеса фортуны и запилил.
@spot_spin_bot - это свой универсальный mini-app для маркетинга, розыгрышей и предсказаний друзей.
Актуально для скидочек и активностей на Новый год.
Здесь можно создавать свое колесо фортуны для друзей и клиентов, собирай результаты прямо в чат-боте.
При этом можно добавить обязательную подписку на группу для участия/вращения
Примеры использования от бизнеса к простому развлечению:
- Поймай скидку
- За что ты любишь баню?
- Какая Audi тебе подходит?
Добавляем варианты призы/скидки/имена при создании колеса, делимся - профит. Отслеживаем в кабинете активность и результаты.
Лимитов на создание количество таких колес - нет, в кабинете можно создавать и отслеживать результаты, редактировать.
Получился инструмент не только для бизнеса и блогеров, но и для друзей который помогает:
🔥 Увеличивать аудиторию
Участники подписываются на ваш канал, чтобы крутить колесо
🎁 Дарить призы, скидки и эмоции
Настройка: от призов и скидок до примитивного контента
📈 Повышать лояльность
Геймификация позволяет сильнее вовлечь пользователя
⚡️ Вирусное распространение
Участники могут поделиться результатом в виде ссылки с друзьями, не только в tg
На будущее - в работе кросс-платформа, то есть этот мини-апп уедет на другие площадки (vk и др.).
В основе реализация конечно же на Vue 3 и бэкенд на NestJS.
Крутим колесо и получаем скидку на разработку в январе
Такие вот пироги, польза не так ли?
Обсудим, что выпало в комментах!
@spot_spin_bot - это свой универсальный mini-app для маркетинга, розыгрышей и предсказаний друзей.
Актуально для скидочек и активностей на Новый год.
Здесь можно создавать свое колесо фортуны для друзей и клиентов, собирай результаты прямо в чат-боте.
При этом можно добавить обязательную подписку на группу для участия/вращения
Примеры использования от бизнеса к простому развлечению:
- Поймай скидку
- За что ты любишь баню?
- Какая Audi тебе подходит?
Добавляем варианты призы/скидки/имена при создании колеса, делимся - профит. Отслеживаем в кабинете активность и результаты.
Лимитов на создание количество таких колес - нет, в кабинете можно создавать и отслеживать результаты, редактировать.
Получился инструмент не только для бизнеса и блогеров, но и для друзей который помогает:
🔥 Увеличивать аудиторию
Участники подписываются на ваш канал, чтобы крутить колесо
🎁 Дарить призы, скидки и эмоции
Настройка: от призов и скидок до примитивного контента
📈 Повышать лояльность
Геймификация позволяет сильнее вовлечь пользователя
⚡️ Вирусное распространение
Участники могут поделиться результатом в виде ссылки с друзьями, не только в tg
На будущее - в работе кросс-платформа, то есть этот мини-апп уедет на другие площадки (vk и др.).
В основе реализация конечно же на Vue 3 и бэкенд на NestJS.
Крутим колесо и получаем скидку на разработку в январе
Такие вот пироги, польза не так ли?
Обсудим, что выпало в комментах!
🔥7
Хоба! Мы не бросили вью.
Произошел ренейм канала, но я всё так же «Пишу код на Vue.js» — просто масштабы задач выросли и могу дать вам больше экспертизы вне фронта.
За 5 крайних лет сильно изменился мой вектор: от креатива и вёрстки — к сложным системам где совсем не разрулить без бэкенда.
Креатив остался опытом и приятным бонусом, даже в строгих админках и сервисах получается вылизывать плавность и переходы.
Фундамент фронта в проектах все тот же: Vue 3 и его крутейшая экосистема.
Сейчас в фокусе — функционал first и это в большинстве модули для систем и личных кабинетов.
То, что упрощает флоу, закрывает бизнес-потребности и сокращает путь от админа до клиента.
Что будет происходить дальше в канале:
— [#кейсы] Реальные кейсы из продакшена
— [#инструменты] Инструменты и библиотеки, которые применяем
— [#опыт] Факапы и победы
— [#инсайты] Решения, которые удачно сработали
— [#код] Иногда код и песочницы
Есть крутецкое предложение: после публикации кейса (который можно показать изнутри) устраивать публичный мит и показывать его под капотом, важен шеринг опыта - так мы все будем окружены пользой.
Как вам идея?
Произошел ренейм канала, но я всё так же «Пишу код на Vue.js» — просто масштабы задач выросли и могу дать вам больше экспертизы вне фронта.
За 5 крайних лет сильно изменился мой вектор: от креатива и вёрстки — к сложным системам где совсем не разрулить без бэкенда.
Креатив остался опытом и приятным бонусом, даже в строгих админках и сервисах получается вылизывать плавность и переходы.
Фундамент фронта в проектах все тот же: Vue 3 и его крутейшая экосистема.
Сейчас в фокусе — функционал first и это в большинстве модули для систем и личных кабинетов.
То, что упрощает флоу, закрывает бизнес-потребности и сокращает путь от админа до клиента.
Что будет происходить дальше в канале:
— [#кейсы] Реальные кейсы из продакшена
— [#инструменты] Инструменты и библиотеки, которые применяем
— [#опыт] Факапы и победы
— [#инсайты] Решения, которые удачно сработали
— [#код] Иногда код и песочницы
Есть крутецкое предложение: после публикации кейса (который можно показать изнутри) устраивать публичный мит и показывать его под капотом, важен шеринг опыта - так мы все будем окружены пользой.
Как вам идея?
Выпустили в open-source библиотеку для Vue.js
vue-wave-player — аудио плеер голосовых сообщений в стиле Telegram для Vue 3.
Писали изначально для модуля чата, решили поделиться. Волна рендерится на Canvas, весит всего 48.5 kB.
Так же применим для воспроизведения аудио.
Что умеет:
— Canvas-рендеринг с поддержкой Retina
— Перемотка по волне + поддержка touch
— Адаптив от 300px до любой ширины
— Плавная анимация появления волны
— Пауза всех плееров на странице, если воспроизвел один
— Кастомизация цветов и размеров, сетки
— Стили инжектятся автоматически
В каких проектах применить:
— Мессенджеры и голосовые чаты
— Подкаст-платформы
— Образовательные проекты с аудио
— Голосовые заметки и диктофоны
— Музыкальные сервисы
— CRM с записями звонков
Как установить?
Что бы вы добавили в функционал?
🔗 Demo
🔗 npm
🔗 GitHub
#инструменты #vuejs #frontend #github
vue-wave-player — аудио плеер голосовых сообщений в стиле Telegram для Vue 3.
Писали изначально для модуля чата, решили поделиться. Волна рендерится на Canvas, весит всего 48.5 kB.
Так же применим для воспроизведения аудио.
Что умеет:
— Canvas-рендеринг с поддержкой Retina
— Перемотка по волне + поддержка touch
— Адаптив от 300px до любой ширины
— Плавная анимация появления волны
— Пауза всех плееров на странице, если воспроизвел один
— Кастомизация цветов и размеров, сетки
— Стили инжектятся автоматически
В каких проектах применить:
— Мессенджеры и голосовые чаты
— Подкаст-платформы
— Образовательные проекты с аудио
— Голосовые заметки и диктофоны
— Музыкальные сервисы
— CRM с записями звонков
Как установить?
npm i vue-wave-player
Что бы вы добавили в функционал?
🔗 Demo
🔗 npm
🔗 GitHub
#инструменты #vuejs #frontend #github
GitHub
GitHub - khudyakv/vue-wave-player: Audio player with Canvas waveform visualization in Telegram style for Vue 3
Audio player with Canvas waveform visualization in Telegram style for Vue 3 - khudyakv/vue-wave-player
Ребят, прошу хэлпа. Идет второй день тестов приложения в проде:
- поправил возможные прыжки колеса
- добавил статистику по розыгрышу (Для тех кто создает свое колесо для клиентов/друзей)
- увеличил память сервера и RPS
Вчера гадали активно гадали в локальных пабликах на понос и беременность, сегодня отгадываем, что может написать клиент в 6 утра
Ссылка ведет на созданный розыгрыш, можно создавать свои и делиться с клиентами и друзьями, разыгрывать скидки и просто выбирать страну для путешествия.
Подходит для всех отраслей, туризм, недвижимость, авто-тематика и многие другие - типа гендер-пати
Крутите колесо, позже расскажу результаты и покажу как выглядит статистика из админки.
Добавил статистику самых попадающихся призов прямо на страницу результатов для организаторов.
Всем мир! ✌️Делитесь призами в комменты, баги тоже жду, если будут, буду благодарен!❤️❤️❤️❤️❤️❤️
UPD: На данный момент почти 200 пользователей, которые активно принимают участие в тестах :) Лучшие!
- поправил возможные прыжки колеса
- добавил статистику по розыгрышу (Для тех кто создает свое колесо для клиентов/друзей)
- увеличил память сервера и RPS
Вчера гадали активно гадали в локальных пабликах на понос и беременность, сегодня отгадываем, что может написать клиент в 6 утра
Ссылка ведет на созданный розыгрыш, можно создавать свои и делиться с клиентами и друзьями, разыгрывать скидки и просто выбирать страну для путешествия.
Подходит для всех отраслей, туризм, недвижимость, авто-тематика и многие другие - типа гендер-пати
Крутите колесо, позже расскажу результаты и покажу как выглядит статистика из админки.
Добавил статистику самых попадающихся призов прямо на страницу результатов для организаторов.
Всем мир! ✌️Делитесь призами в комменты, баги тоже жду, если будут, буду благодарен!❤️❤️❤️❤️❤️❤️
UPD: На данный момент почти 200 пользователей, которые активно принимают участие в тестах :) Лучшие!
Фронтенд делает бэкенд для фронтенда,
который делает бэкенд для фронтенда...
Короче, прям по кейсу пойдем - нужен бэкенд, который будет безопасно получать данные для авторизации, скроет маршруты и заменит их на свои и вот это все...
В чем сама концепция: встраиваем BFF прямо в Nuxt.
Фронтенд обеспечивает бэкенд сам для себя — один инструмент, фронтендер, фронтендеры вокруг и задача не только в том, что бы не разворачивать отдельный бэк - но и уменьшить расстояние в секундах до конечных данных.
Зачем это нужно?
- Безопасно получать данные для авторизации
- Скрыть реальные API маршруты и заменить их на свои
- Агрегировать данные из нескольких источников
- Кэшировать и оптимизировать запросы
Что даст бизнесу?
1. Повысит бизнес-метрики
- Страница явно быстрее загрузится, без лишних промежуточных запросов в другой сервис/сервер.
- Один прямой запрос, значит легче поддержка и меньше рук необходимо держать.
- Рост конверсии за счет скорости, конечно же >100500%
2. Безопасность
- Токены и ключи хранятся на сервере, не доступны из браузера, значит меньше рисков утечки данных
- Валидация и доп. проверки выполняются на сервере Nuxt
3. Разработка и масштабирование
- Один стек/инструмент, проще поддерживать. Меньше ставка на то, что Петя в понедельник не заболеет.
- Быстрее разработка: можно скопировать прям файлами API и изменить роуты (новости/статьи и пр.)
- Проще инфраструктура сервера, один условный контейнер, вместо двух и более
При росте остается возможность перейти на более сложную архитектуру
Для большинства наших проектов — рабочее решение. Это все таки не инструкция, а подход — используйте, если вы считаете, что вам это под задачи подходит.
Зарубежная преза, по которой можно понять принцип без кода и слов, листать стрелками, ссылка тут
#опыт
Какое слово не понятно в тексте? BFF?
Расшифруй или придумай свое :)
Ну или сколько шакалов у картинки по шкале от 1 до 10?
который делает бэкенд для фронтенда...
Короче, прям по кейсу пойдем - нужен бэкенд, который будет безопасно получать данные для авторизации, скроет маршруты и заменит их на свои и вот это все...
В чем сама концепция: встраиваем BFF прямо в Nuxt.
Фронтенд обеспечивает бэкенд сам для себя — один инструмент, фронтендер, фронтендеры вокруг и задача не только в том, что бы не разворачивать отдельный бэк - но и уменьшить расстояние в секундах до конечных данных.
Зачем это нужно?
- Безопасно получать данные для авторизации
- Скрыть реальные API маршруты и заменить их на свои
- Агрегировать данные из нескольких источников
- Кэшировать и оптимизировать запросы
Что даст бизнесу?
1. Повысит бизнес-метрики
- Страница явно быстрее загрузится, без лишних промежуточных запросов в другой сервис/сервер.
- Один прямой запрос, значит легче поддержка и меньше рук необходимо держать.
- Рост конверсии за счет скорости, конечно же >100500%
2. Безопасность
- Токены и ключи хранятся на сервере, не доступны из браузера, значит меньше рисков утечки данных
- Валидация и доп. проверки выполняются на сервере Nuxt
3. Разработка и масштабирование
- Один стек/инструмент, проще поддерживать. Меньше ставка на то, что Петя в понедельник не заболеет.
- Быстрее разработка: можно скопировать прям файлами API и изменить роуты (новости/статьи и пр.)
- Проще инфраструктура сервера, один условный контейнер, вместо двух и более
При росте остается возможность перейти на более сложную архитектуру
Для большинства наших проектов — рабочее решение. Это все таки не инструкция, а подход — используйте, если вы считаете, что вам это под задачи подходит.
Зарубежная преза, по которой можно понять принцип без кода и слов, листать стрелками, ссылка тут
#опыт
Какое слово не понятно в тексте? BFF?
Расшифруй или придумай свое :)
Ну или сколько шакалов у картинки по шкале от 1 до 10?
❤9