[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-uk-tailwindcss":3,"technology-projects-uk-tailwindcss":30,"mdc-vb9efl-key":142},{"id":4,"title":5,"category":6,"content":7,"description":8,"extension":9,"faq":10,"icon":11,"links":12,"meta":21,"projects":22,"since":26,"stem":27,"updated":28,"__hash__":29},"technologies_uk\u002Fuk\u002Ftechnologies\u002Ftailwindcss.yml","Tailwind CSS","frontend","Tailwind CSS — CSS-фреймворк із готовими утилітарними класами. Я використовую його для інтерфейсів застосунків і публічних сайтів, зокрема VetCard, VetSpace, DigiSpace та цього портфоліо.\n\n## Стилізація на практиці\n\nУ VetCard спільні компоненти задають структуру сторінок, а індивідуальні кольори зберігають впізнаваність клінік. У портфоліо Tailwind CSS v4 працює разом із Nuxt UI, а параметри теми визначено в CSS. DigiSpace також використовує Tailwind в адміністративному інтерфейсі.\n\n## Як підтримувати узгоджений вигляд\n\n- **Адаптивні макети** — навігація, форми й картки для різних розмірів екрана.\n- **Спільні параметри дизайну** — кольори та відступи, узгоджені між компонентами.\n- **Повторне використання** — винесення схожих елементів у компоненти, коли вони мають спільне призначення.\n\n## Чого не гарантують утилітарні класи\n\nКласи поряд із розміткою полегшують читання стилів, але зміни спільних компонентів чи теми можуть зачепити багато сторінок. Розмір CSS залежить від знайдених класів і власних стилів. Мобільний вигляд, фокус клавіатури та контраст кольорів потрібно перевіряти окремо — фреймворк не робить цього автоматично.\n","Tailwind CSS для адаптивних Vue- і Nuxt-інтерфейсів: спільні компоненти, оформлення сторінок клінік і підтримка стилів.","yml",null,"i-simple-icons-tailwindcss",[13,18],{"label":14,"to":15,"color":16,"icon":17},"tailwindcss.com","https:\u002F\u002Ftailwindcss.com","neutral","i-heroicons-arrow-top-right-on-square",{"label":19,"to":20,"color":16,"icon":17},"Технічна документація","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdetecting-classes-in-source-files",{},[23,24,25],"digispace","vetcard","vetspace","2021","uk\u002Ftechnologies\u002Ftailwindcss","2026-09-20","JzSLdim-19VdMTMan4JJOzRf2UcnVjyQlUpoAnsvu8I",[31,77,106],{"id":32,"title":33,"content":34,"date":35,"description":36,"extension":9,"featured":37,"image":38,"links":39,"meta":48,"stack":49,"stem":72,"tags":73,"url":42,"__hash__":76},"projects_uk\u002Fuk\u002Fprojects\u002Fdigispace.yml","DigiSpace","Production-сайт digispace.pro — публічний сайт агенції, адмін-панель та кастомна CMS в одному застосунку Laravel, тепер повністю мультимовний (EN\u002FUK\u002FPL), з Filament-панеллю поруч зі старою адмінкою на Inertia + Vue. Той самий код, що працює на живому сайті, доступний на GitHub.\n\n## Ключові можливості\n\n- **Адмін-панель на Filament** - паралельна панель `\u002Fcontrol` (24 ресурси) з TipTap-редактором, заливкою зображень напряму в MinIO та контент-орієнтованою навігацією, впроваджена ресурс за ресурсом поруч з існуючою Inertia-адмінкою\n- **Мультимовність за задумом** - перекладаються не лише сторінки, а й структурні UI-рядки (меню, футер, кнопки) для кожної локалі, з hreflang-маршрутизацією\n- **SEO з коробки** - структуровані дані JSON-LD, локалізовані sitemap та коректна обробка 404 для кожної локалі\n- **Моноліт як треба** - публічний сайт і обидві адмінки в одному застосунку Laravel, без окремого API\n- **Самостійний контент** - сторінки, послуги й кейси редагуються в CMS — без деплою заради зміни тексту чи перекладу\n- **Брама якості** - PHPUnit-тести та статичний аналіз PHPStan у CI\n- **Відкритий код** - саме той код, що обслуговує digispace.pro, публічний на GitHub\n\n## Стек технологій\n\n- **Бекенд**: Laravel\n- **Адмінка**: Filament 5 (`\u002Fcontrol`) + стара адмінка на Inertia.js + Vue\n- **Фронтенд**: Vue.js, Vite\n- **Локалізація**: переклади контенту й структури EN\u002FUK\u002FPL\n- **Архітектура**: Кастомна CMS\n","2022-10-05","Мультимовний (EN\u002FUK\u002FPL) production-сайт агенції з кастомною CMS — Filament-панель з розширеним редактором контенту, переклади, JSON-LD і локалізовані sitemap із коробки, поруч зі старою адмінкою на Inertia + Vue",true,"\u002Fhero\u002Fdigispace.avif",[40,44],{"label":41,"to":42,"color":43,"icon":17},"Live Demo","https:\u002F\u002Fdigispace.pro","primary",{"label":45,"to":46,"color":16,"icon":47},"GitHub","https:\u002F\u002Fgithub.com\u002FYurij2015\u002FDigiSpace","i-simple-icons-github",{},[50,53,56,59,62,65,66,69],{"name":51,"icon":52},"Laravel","i-simple-icons-laravel",{"name":54,"icon":55},"Inertia","i-simple-icons-inertia",{"name":57,"icon":58},"Vue","i-simple-icons-vuedotjs",{"name":60,"icon":61},"Vite","i-simple-icons-vite",{"name":63,"icon":64},"MySQL","i-simple-icons-mysql",{"name":5,"icon":11},{"name":67,"icon":68},"Filament","i-simple-icons-filament",{"name":70,"icon":71},"CMS","i-heroicons-document-text","uk\u002Fprojects\u002Fdigispace",[51,67,54,57,74,75],"i18n","SEO","6eh_R4Py3nOuDZ26oLWb7x2WWp4iSV66uJrBh_MkX_U",{"id":78,"title":79,"content":80,"date":28,"description":81,"extension":9,"featured":37,"image":82,"links":83,"meta":89,"stack":90,"stem":101,"tags":102,"url":85,"__hash__":105},"projects_uk\u002Fuk\u002Fprojects\u002Fvetcard.yml","VetCard","Публічна частина VetSpace — мультитенантний каталог ветеринарних клінік. Один Nuxt SSR-деплой обслуговує всі клініки: SEO-сторінки клінік, онлайн-запис на прийом з проксуванням до tenant-бекенду кожної клініки, темізація під бренд клініки та підтримка філій.\n\n## Ключові особливості\n\n- **Один деплой — багато клінік** — застосунок маршрутизує за slug клініки; запити на запис і слоти проксуються до власного tenant-бекенду кожної клініки\n- **SEO-first каталог** — 590+ клінік з SSR-сторінками, структурованими даними та локалізованими маршрутами\n- **Брендинг кожної клініки** — сторінка клініки темізується її кольором, з бейджем \"Powered by VetSpace\"\n- **Реальний UX запису** — вільні слоти показують кількість вільних лікарів із кольоровим кодуванням дефіциту\n- **Повна локалізація** — українська, англійська та польська з prefix-маршрутизацією\n\n## Технології\n\n- **Фронтенд**: Nuxt 4 \u002F Vue 3, Tailwind CSS v4\n- **Бекенд**: Laravel catalog API + tenant-ендпоінти для запису\n- **Рендеринг**: SSR для SEO-сторінок, CSR для флоу запису\n- **Тестування**: Vitest юніт-тести + Cypress E2E проти реального бекенду\n","Мультитенантний каталог ветеринарних клінік: SEO-сторінки клінік, онлайн-запис на прийом, брендинг кожної клініки — один Nuxt-застосунок обслуговує всіх","\u002Fhero\u002Fvetcard.avif",[84,86],{"label":41,"to":85,"color":43,"icon":17},"https:\u002F\u002Fvetcard.pro",{"label":87,"to":88,"color":16,"icon":47},"Огляд проєкту","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-vetcard",{},[91,94,95,98,99],{"name":92,"icon":93},"Nuxt","i-simple-icons-nuxtdotjs",{"name":57,"icon":58},{"name":96,"icon":97},"TypeScript","i-simple-icons-typescript",{"name":5,"icon":11},{"name":100,"icon":52},"Laravel API","uk\u002Fprojects\u002Fvetcard",[92,57,103,75,104],"Multi-tenant","SSR","RHyDtiD49495RNKUgIdwAcH8oiwELVMSL6Ik4JsT6H4",{"id":107,"title":108,"content":109,"date":110,"description":111,"extension":9,"featured":37,"image":112,"links":113,"meta":124,"stack":125,"stem":138,"tags":139,"url":115,"__hash__":141},"projects_uk\u002Fuk\u002Fprojects\u002Fvetspace.yml","VetSpace","Двостороння ветеринарна платформа — SEO-каталог клінік та CRM для підписки з призначеннями та записами пацієнтів. Публічний каталог клінік, побудований для SEO-first набуття клієнтів, та підписка на основі CRM (призначення, візити, записи пацієнтів) як окремі Vue\u002FNuxt додатки над одним Laravel API. Архітектура database-per-tenant, підписки Stripe через Cashier, GraphQL + REST, та аналіз візитів з допомогою AI через присвячений Go мікросервіс.\n\n## Ключові можливості\n\n- **Двостороння воронка** - SEO-каталог залучає клініки, а CRM за підпискою (візити, картки пацієнтів) їх утримує\n- **Справжня ізоляція тенантів** - database-per-tenant тримає дані кожної клініки окремо, а GDPR-експорт\u002Fвидалення — це операція на рівні бази\n- **Дві грані API** - GraphQL для складних запитів каталогу, REST для CRM — одна кодова база Laravel\n- **Білінг із коробки** - підписки Stripe через Cashier: тріали, зміна планів, dunning\n- **AI там, де допомагає** - аналіз візитів виконує окремий Go-мікросервіс, не навантажуючи основний API\n\n## Стек технологій\n\n- **Бекенд**: Laravel (API)\n- **Фронтенд**: Vue\u002FNuxt (окремі застосунки)\n- **Архітектура**: Database-per-tenant multi-tenancy\n- **Платежі**: Stripe через Cashier\n- **API**: GraphQL + REST\n- **AI**: Go-мікросервіс для аналізу візитів\n","2026-09-19","Двостороння ветеринарна платформа — SEO-каталог клінік та CRM для підписки з призначеннями та записами пацієнтів","\u002Fhero\u002Fvetspace.avif",[114,116,119,122],{"label":41,"to":115,"color":43,"icon":17},"https:\u002F\u002Fvetspace.pro",{"label":117,"to":118,"color":16,"icon":47},"Огляд API","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-api",{"label":120,"to":121,"color":16,"icon":47},"Огляд фронтенду","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-frontend",{"label":123,"to":88,"color":16,"icon":47},"Огляд VetCard",{},[126,127,128,129,132,135],{"name":51,"icon":52},{"name":57,"icon":58},{"name":92,"icon":93},{"name":130,"icon":131},"Stripe","i-simple-icons-stripe",{"name":133,"icon":134},"GraphQL","i-simple-icons-graphql",{"name":136,"icon":137},"AI","i-heroicons-sparkles","uk\u002Fprojects\u002Fvetspace",[140,51,57,103,130,136],"SaaS","DG_13GfOpIs-FP9mwOJDR33DOhZ0GdfeSK1u1JLzZt8",{"data":143,"body":144},{},{"type":145,"children":146},"root",[147,155,162,167,173,209,215],{"type":148,"tag":149,"props":150,"children":151},"element","p",{},[152],{"type":153,"value":154},"text","Tailwind CSS — CSS-фреймворк із готовими утилітарними класами. Я використовую його для інтерфейсів застосунків і публічних сайтів, зокрема VetCard, VetSpace, DigiSpace та цього портфоліо.",{"type":148,"tag":156,"props":157,"children":159},"h2",{"id":158},"стилізація-на-практиці",[160],{"type":153,"value":161},"Стилізація на практиці",{"type":148,"tag":149,"props":163,"children":164},{},[165],{"type":153,"value":166},"У VetCard спільні компоненти задають структуру сторінок, а індивідуальні кольори зберігають впізнаваність клінік. У портфоліо Tailwind CSS v4 працює разом із Nuxt UI, а параметри теми визначено в CSS. DigiSpace також використовує Tailwind в адміністративному інтерфейсі.",{"type":148,"tag":156,"props":168,"children":170},{"id":169},"як-підтримувати-узгоджений-вигляд",[171],{"type":153,"value":172},"Як підтримувати узгоджений вигляд",{"type":148,"tag":174,"props":175,"children":176},"ul",{},[177,189,199],{"type":148,"tag":178,"props":179,"children":180},"li",{},[181,187],{"type":148,"tag":182,"props":183,"children":184},"strong",{},[185],{"type":153,"value":186},"Адаптивні макети",{"type":153,"value":188}," — навігація, форми й картки для різних розмірів екрана.",{"type":148,"tag":178,"props":190,"children":191},{},[192,197],{"type":148,"tag":182,"props":193,"children":194},{},[195],{"type":153,"value":196},"Спільні параметри дизайну",{"type":153,"value":198}," — кольори та відступи, узгоджені між компонентами.",{"type":148,"tag":178,"props":200,"children":201},{},[202,207],{"type":148,"tag":182,"props":203,"children":204},{},[205],{"type":153,"value":206},"Повторне використання",{"type":153,"value":208}," — винесення схожих елементів у компоненти, коли вони мають спільне призначення.",{"type":148,"tag":156,"props":210,"children":212},{"id":211},"чого-не-гарантують-утилітарні-класи",[213],{"type":153,"value":214},"Чого не гарантують утилітарні класи",{"type":148,"tag":149,"props":216,"children":217},{},[218],{"type":153,"value":219},"Класи поряд із розміткою полегшують читання стилів, але зміни спільних компонентів чи теми можуть зачепити багато сторінок. Розмір CSS залежить від знайдених класів і власних стилів. Мобільний вигляд, фокус клавіатури та контраст кольорів потрібно перевіряти окремо — фреймворк не робить цього автоматично."]