Cервис для создания стильных цифровых приглашений. Выбирайте шаблон, настраивайте дизайн и отслеживайте ответы гостей.Invaiti - онлайн приглашения на ваши мероприятияhttps://teletype.in/atom/invaiti2026-09-15T22:08:32.502Zinvaiti:blog-32026-03-02T20:12:38.667Z2026-03-02T20:12:38.667Z

<img src="https://img4.teletype.in/files/3d/0d/3d0d6acc-2d6b-4900-9913-41bb18863773.jpeg">Прошло много времени с тех пор, как я рассказывал про стек проекта в прошлой статье. Тогда я описывал, на чём всё разрабатывается и почему я выбрал именно эти технологии.

<p id="E5WL">Прошло много времени с тех пор, как я рассказывал про стек проекта в прошлой статье. Тогда я описывал, на чём всё разрабатывается и почему я выбрал именно эти технологии.</p> <p id="8lkC">С тех пор многое поменялось - и не по мелочи, а по сути.</p> <hr /> <h2 id="G9oU">Почему</h2> <p id="iYFk">В прошлой статье я рассказывал про <strong>Vue 3, Pinia + PiniaColada, Axios, UnoCSS, Naive UI, Zod, Lodash и Appwrite</strong>.<br />Это был отличный набор для старта, но когда ты начинаешь думать не только о MVP, но и о будущем масштаба, поддержки, стабильности и понятности - появляется желание пересмотреть фундамент.</p> <hr /> <h2 id="vTEy">Переезд на Nuxt 4</h2> <p id="eJFX">Я полностью перешёл на <strong>Nuxt 4</strong>.</p> <p id="uG6j">Nuxt дал мне всё:</p> <ul id="2XEG"> <li id="yvgc">понятную файловую архитектуру</li> <li id="K926">встроенную работу с данными и API</li> <li id="RMIV">нормальные SSR-дружелюбные механизмы</li> <li id="0ITq">меньше ручных костылей</li> </ul> <hr /> <h2 id="vML3">Удалил PiniaColada и Axios</h2> <p id="q5Hy">Раньше <strong>PiniaColada</strong> помогал кешировать запросы и делать декларативное состояние. Но в <strong>Nuxt</strong> мне это уже встроено через <code>useFetch</code>. Оно делает почти всё, что раньше делалось ручками.</p> <p id="ztd6">Похожая история с <strong>Axios</strong> - когда стандартный инструмент платформы покрывает все задачи, сторонний модуль уже не нужен, меньше зависимостей.</p> <hr /> <h2 id="yuT6">Стили и компоненты</h2> <p id="cjgo">Я отказался от <strong>UnoCSS</strong> и <strong>Naive UI</strong>:</p> <ul id="soe3"> <li id="7Q5u">стили теперь на <strong>Tailwind CSS</strong></li> <li id="HJdm">компоненты на <strong>Nuxt UI</strong> - меньше сторонних “обёрток”, меньше конфликтов дизайна</li> </ul> <hr /> <h2 id="XsdN">Remeda вместо Lodash</h2> <p id="sQ32">В прошлой статье я писал про <strong>Lodash</strong> как про удобный инструмент для работы с данными. Но со временем ощутил, что типизация и функциональный стиль важнее громоздких утилит.</p> <p id="3TWC">Теперь везде <strong>Remeda</strong> - меньше импортов, лучше типы, чище код.</p> <hr /> <h2 id="HJ5o">Supabase заменил Appwrite</h2> <p id="Lv4H">Это был, пожалуй, самый большой сдвиг.</p> <p id="G5nq">Я ушёл от <strong>Appwrite</strong> (в ходе работы наловил много проблем, которые не просто мешали, а не позволяли воплотить свои задумки), к <strong>Supabase</strong>:</p> <ul id="6dgc"> <li id="2tAl">SQL-модель намного более предсказуема для сложных связей данных</li> <li id="m9ii">RLS и безопасность на уровне базы - это спокойнее</li> <li id="KYGJ">весь API открытый</li> <li id="rqjP">нормальные серверные функции</li> <li id="K9AL">комьюнити больше больше чем в половину</li> </ul> <hr /> <h2 id="Fb2F">Инфраструктура</h2> <p id="3bd3">Проект теперь живёт на новом VPS с 16 ГБ RAM.<br />Новый провайдер - <strong>REG.RU</strong>.</p> <p id="TWe6">И отдельно отмечу - подключил <strong>Dokploy</strong> и стало сильно проще жить.</p> <hr /> <h2 id="D8jX">Что по продукту сейчас</h2> <p id="LL6j">Если раньше статья была про стек, то сейчас всё внимание сместилось на конкретный функционал:</p> <p id="zSvK"><strong>Список гостей и управление гостями</strong> - именно этим я сейчас занимаюсь:</p> <ul id="V84C"> <li id="HrEb">добавление и редактирование гостей</li> <li id="gSl0">создание и редактирование групп из гостей (семья, друзья, коллеги)</li> <li id="BOuC">назначение главного гостя в группе</li> <li id="igJi">хранение данных гостей в структуре, удобной для аналитики</li> <li id="JO1c">подготовку к логике рекомендаций (еда, напитки, формат мероприятия)</li> </ul> <hr /> <p id="CnYR"></p> <p id="4UGD">Проект перестал быть прототипом и начал становиться продуктом. И мне самому реально интересно, куда дальше - уже не просто с точки зрения технологий, а с точки зрения пользы людям.</p> invaiti:blog-22025-05-05T21:24:36.331Z2025-05-05T21:44:03.643Z

<img src="https://img1.teletype.in/files/44/09/4409d23a-5343-4f59-8ab0-041569db4106.png">В этой статье расскажу, на чём строится Invaiti, какие технологии использую и почему именно они. Пост будет полезен тем, кто интересуется современным фронтендом и хочет понять, как устроен проект изнутри — без лишней теории, только практический взгляд.

<p id="pgCa">В этой статье расскажу, на чём строится Invaiti, какие технологии использую и почему именно они. Пост будет полезен тем, кто интересуется современным фронтендом и хочет понять, как устроен проект изнутри — без лишней теории, только практический взгляд.</p> <h2 id="Qxsu">Frontend</h2> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="GWNQ" class="m_custom"> <img src="https://img3.teletype.in/files/ef/e1/efe1eac1-82ad-403f-8158-616037604688.png" width="391.80851063829783" /> </figure> </section> <p id="eWae">С самого начала решил, что <strong>UI и взаимодействие</strong> — это ключевое в моём проекте. А значит, нужен фреймворк, который позволит быстро и понятно строить интерактивный интерфейс.</p> <ul id="mn8U"> <li id="Ekob"><strong>Vue 3 + Composition API (TS)</strong> — потому что читаемо, масштабируемо и приятно писать. Я получаю гибкость и контроль без перегруза.</li> <li id="kwZs"><strong>Pinia + PiniaColada + Axios</strong> — для лёгкого и декларативного управления состоянием. PiniaColada помогает кешировать запросы и хорошо ложится в архитектуру Composition API.</li> <li id="X8x1"><strong>VueUse</strong> — удобнейший набор полезных хуков, без которого я уже не представляю себе разработку.</li> <li id="L1yO"><strong>UnoCSS — </strong>Я отказался от Tailwind в пользу <strong>Uno</strong> — он быстрее, легче и даёт больше контроля. Классы применяются моментально, без генерации огромных CSS-файлов; поддерживает кастомные токены, пресеты, темизацию. Отлично сочетается с Vue и даёт свободу в дизайне без ощущения «бойся трогать CSS».</li> <li id="B7tC"><strong>Iconify</strong> — универсальный способ подключения иконок. Можно легко использовать любую коллекцию (Material, Tabler, Fluent и др.) и на лету менять стиль, цвет, отлично дружит с <strong>UnoCSS</strong>.</li> <li id="WMQg"><strong>Naive UI</strong> <strong>— </strong>кастомизируемая компонентная библиотека, легко стилизуется под нужный стиль.</li> <li id="xyQI"><strong>Zod</strong> — использую для строгой <strong>валидации данных</strong>: форм, API-ответов и схем. Удобно типизируется, работает отлично в связке с TypeScript, и позволяет быстро ловить ошибки ещё до рендера.</li> <li id="SLL6"><strong>Lodash</strong> — потому что удобные утилиты для работы с массивами и объектами — это всегда +10 к чистоте кода.</li> <li id="tIuP"><strong>Vite</strong> — быстрый сборщик с хорошей интеграцией с Vue 3.</li> </ul> <hr /> <h2 id="cdP8">Backend </h2> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="HW04" class="m_custom"> <img src="https://img3.teletype.in/files/e6/7d/e67d8974-5c49-4c5f-8c08-dc2a2fa4fa9a.png" width="584" /> </figure> </section> <p id="GGTl">Вместо того, чтобы писать свой бэкенд с нуля, я выбрал <strong>Appwrite</strong> как backend-as-a-service:</p> <ul id="alGP"> <li id="kW6t">Удобная работа с коллекциями, документами и файлами.</li> <li id="RQZu">Готовая авторизация и безопасность из коробки.</li> <li id="f5hG">Быстрый старт — REST API (планирую переезд на GraphQL пока это еще не сильно напряжно) без лишнего, всё по делу.</li> </ul> <p id="drp6">Мне важно было быстро запустить прототип, и Appwrite дал возможность не застревать на инфраструктуре.</p> <hr /> <h2 id="zWsu">Инфраструктура</h2> <p id="vJio">Проект развернут на <strong>VPS </strong>(<em>на данный момент 4 x 3.3 ГГц CPU • 8 ГБ RAM • 80 ГБ NVMe</em>), где крутится всё: фронт, Appwrite, GitLab.</p> <ul id="WtcX"> <li id="7gEo"><strong>Свой GitLab CE</strong> с CI/CD пайплайнами и репозиториями.</li> <li id="IL0W">Фронтенд разбит на <strong>три контейнера</strong>:</li> <ul id="z9YY"> <li id="qrMa"><code>prod</code> — продакшен-сборка.</li> </ul> <ul id="iKG1"> <li id="PqkF"><code>dev</code> — основная ветка разработки.</li> <li id="CL3y"><code>dev-2</code> — для экспериментов, обкатки фичей, работы с UI.</li> <li id="h3wX">В скором времени планирую запустить <code>alpha</code> - сборка с MVP проекта, которым уже можно будет пользоваться по назначению.</li> </ul> <li id="Rp6M"><strong>Бэкапы</strong> всех сервисов автоматизированы и регулярно выгружаются.</li> </ul> <hr /> <h2 id="nGE7">Почему не Nuxt / Tailwind / Firebase?</h2> <ul id="gkqm"> <li id="SW3c"><strong>Nuxt</strong> — пока не нужен SSR и не хочется лишней магии.</li> <li id="OHKH"><strong>Tailwind</strong> — слишком тяжёлый для проекта, сложности в сборке и кастомизации.</li> <li id="6KUR"><strong>Firebase</strong> — мощный, но избыточный, а мне хотелось SelfHosted + REST/GraphQL, а не SDK с обвязками.</li> </ul> <hr /> <h2 id="54NC">На что делаю упор в архитектуре</h2> <ul id="28yd"> <li id="lk5S">Чистый код и <strong>логическая разделённость</strong> слоёв.</li> <li id="VvxI">Компоненты — маленькие и переиспользуемые.</li> <li id="S5uY">Сторы — изолированы и читаемы, храню в них только вспомогательную информацию, никаких данных.</li> <li id="wGje">Работа с API — через универсальные обёртки, чтобы не размазывать логику по компонентам.</li> </ul> <hr /> <h2 id="fSqA">Без вайб-кодинга</h2> <p id="zdUV">В Invaiti я стараюсь избегать «вайб-кодинга» — когда решения принимаются по наитию, без чёткого плана, архитектуры или обоснований, когда ты полагаешься на AI или генераторы настолько, что <strong>перестаёшь </strong>принимать решения осознанно и развивать себя как разработчика. Такой подход может быть забавным на пет-проектах, но в реальном продукте он быстро приводит к хаосу.</p> <p id="rcfp">Зато я за:</p> <ul id="k5rU"> <li id="nBwb"><strong>предсказуемую структуру кода</strong>, чтобы и я, и любой новый разработчик могли быстро разобраться;</li> <li id="HjjP"><strong>разделение ответственности</strong>: компоненты, сторы, API, утилиты — всё отдельно;</li> <li id="HwRt"><strong>логичные имена, минимальный кросс-импорт и максимум читаемости</strong>.</li> </ul> <p id="ua8d">Если пишу компонент — то стараюсь сразу представить, как его протестировать, переиспользовать и изменить через месяц.</p> <blockquote id="j17X">Проект должен быть живым и читаемым через полгода, а не только вечером в пятницу</blockquote> invaiti:blog-12025-05-03T23:09:28.504Z2025-05-05T21:38:17.005Z

<img src="https://img2.teletype.in/files/5d/73/5d739aef-037e-4bd9-81da-005cf0b7098a.png">Здесь я буду делиться этапами создания проекта: от идей и прототипов до реальных технических решений, фич и сложностей, с которыми сталкиваюсь на пути. Это не просто дневник — это история создания сервиса, которым я сам горжусь и который хочу сделать действительно полезным.

<h2 id="fRRr"><strong>Добро пожаловать в блог разработки <code>Invaiti</code>!</strong></h2> <p id="uQ72">Здесь я буду делиться этапами создания проекта: от идей и прототипов до реальных технических решений, фич и сложностей, с которыми сталкиваюсь на пути. Это не просто дневник — это история создания сервиса, которым я сам горжусь и который хочу сделать действительно полезным.</p> <h2 id="FIVI">Идея проекта</h2> <p id="Xx5s">Всё началось с простого наблюдения: организация любого события — это всегда немного хаос. Когда я помогал друзьям готовиться к свадьбе, мы столкнулись с кучей мелочей: как удобно разослать приглашения, как собрать ответы, учесть +1, предпочтения по еде, аллергии... Всё это быстро превратилось в таблицы, списки и десятки сообщений в мессенджерах.</p> <p id="MoNl">Но по-настоящему я прочувствовал эту проблему, когда готовился к собственной свадьбе. Несмотря на весь опыт, оказалось, что собрать и упорядочить всю информацию — это всё ещё головная боль. Я искал простой и красивый инструмент, который бы позволил оформить приглашение, быстро собрать отклики и нужные данные от гостей, но ничего подходящего не нашёл.</p> <p id="igGU">Так родилась идея Invaiti* — сервиса для создания цифровых приглашений, которые не только выглядят стильно, но и реально помогают организаторам. Я хотел создать инструмент, который избавит людей от лишнего стресса и сделает организацию приятной частью подготовки, а не источником головной боли.</p> <p id="JPJI">Invaiti* — это про удобство, эстетику и внимание к деталям. Это сервис, который я сам бы с радостью использовал, когда организовывал своё событие. И теперь я хочу, чтобы он помог и другим.</p> <h2 id="56k0">Цели проекта </h2> <p id="206Z">💡 <strong>Сделать организацию событий проще</strong><br />Чтобы каждый мог без опыта и лишнего стресса оформить приглашение и собрать всю нужную информацию от гостей.</p> <p id="AERd">🎨 <strong>Дать людям инструмент, с которым приятно работать</strong><br />Уделить внимание дизайну, удобству, деталям — чтобы даже мелочи радовали.</p> <p id="F5Dz">🤝 <strong>Помочь создавать атмосферу</strong><br />Событие начинается не с дня “Х”, а с приглашения. Я хочу, чтобы оно задавало правильное настроение.</p> <p id="Odbi">📊 <strong>Добавить аналитику и автоматизацию</strong><br />Показывать, сколько людей точно придёт, кто ещё не ответил, какие есть пожелания — и при этом не перегружать интерфейс.</p> <p id="UtH4">🌍 <strong>Расширить аудиторию</strong><br />Со временем — добавить мультиязычность, поддержку разных культурных сценариев и типов событий: от свадьбы до бизнес-ивента.</p> <hr /> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <p id="xt3h">* Invaiti - [Инвайти]</p> <p id="b5Ev">Если вы когда-нибудь играли с друзьями в онлайн-игры, то точно слышали (или говорили) что-то вроде: <strong>&quot;Заинвайти меня ... !&quot; </strong>(от англ. <em>invite</em>)</p> <p id="51mm">Именно с этой фразы и началась идея названия. Мне захотелось превратить её в нечто более универсальное: <strong>Приглашение, но уже не в игру, а в реальную жизнь. <br /><br /></strong>Так появилось Invaiti — коротко, звучно, с геймерским прошлым и событийным будущим.</p> </section> <p id="9NOs"></p> <section style="background-color:hsl(hsl(0, 0%, var(--autocolor-background-lightness, 95%)), 85%, 85%);"> <figure id="b4lI" class="m_custom"> <img src="https://img3.teletype.in/files/2a/6d/2a6d1f30-36c7-4876-b633-1a58438c9010.png" width="534" /> <figcaption>Лого проекта, запатентовано.</figcaption> </figure> </section>