[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"technology-pl-tailwindcss":3,"technology-projects-pl-tailwindcss":30,"mdc--hc398s-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_pl\u002Fpl\u002Ftechnologies\u002Ftailwindcss.yml","Tailwind CSS","frontend","Tailwind CSS to framework CSS oparty na klasach narzędziowych. Używam go w interfejsach aplikacji i publicznych witrynach, między innymi VetCard, VetSpace, DigiSpace oraz w tym portfolio.\n\n## Stylowanie w praktyce\n\nW VetCard wspólne komponenty określają strukturę stron, a indywidualne kolory pozwalają zachować identyfikację placówek. W portfolio Tailwind CSS v4 współpracuje z Nuxt UI, a parametry motywu są zapisane w CSS. DigiSpace również korzysta z Tailwind w interfejsie administracyjnym.\n\n## Jak dbam o spójny wygląd\n\n- **Responsywny układ** — nawigacja, formularze i karty dopasowane do różnych ekranów.\n- **Wspólne parametry projektu** — kolory i odstępy używane w wielu komponentach.\n- **Ponowne użycie** — wydzielanie podobnych elementów w komponenty, gdy mają wspólne przeznaczenie.\n\n## Czego nie gwarantują klasy narzędziowe\n\nKlasy blisko znaczników ułatwiają czytanie stylów, ale zmiana wspólnego komponentu czy motywu może wpłynąć na wiele stron. Rozmiar CSS zależy od wykrytych klas i własnych stylów. Wygląd na telefonie, obsługę fokusu klawiatury i kontrast kolorów trzeba sprawdzić osobno — framework nie robi tego automatycznie.\n","Tailwind CSS dla responsywnych interfejsów Vue i Nuxt: wspólne komponenty, kolory placówek i łatwiejsze utrzymanie stylów.","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},"Dokumentacja techniczna","https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fdetecting-classes-in-source-files",{},[23,24,25],"digispace","vetcard","vetspace","2021","pl\u002Ftechnologies\u002Ftailwindcss","2026-09-20","bEYrDTq-ym5oLsp1D90nD9Su-PHZf9bjrj3552QB5Ug",[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_pl\u002Fpl\u002Fprojects\u002Fdigispace.yml","DigiSpace","Produkcyjna strona digispace.pro — publiczny serwis agencji, panel administracyjny i autorski CMS w jednej aplikacji Laravel, teraz w pełni wielojęzyczna (EN\u002FUK\u002FPL), z panelem Filament obok starego panelu na Inertia + Vue. Ten sam kod, który obsługuje żywą stronę, jest dostępny na GitHub.\n\n## Kluczowe funkcje\n\n- **Panel administracyjny Filament** - równoległy panel `\u002Fcontrol` (24 zasoby) z edytorem TipTap, przesyłaniem obrazów bezpośrednio do MinIO i nawigacją zorientowaną na treść, wdrażany zasób po zasobie obok istniejącego panelu Inertia\n- **Wielojęzyczność od podstaw** - tłumaczone są nie tylko strony, ale i strukturalne teksty UI (menu, stopka, przyciski) dla każdej lokalizacji, z routingiem opartym na hreflang\n- **SEO wbudowane** - dane strukturalne JSON-LD, zlokalizowane sitemapy i poprawna obsługa 404 dla każdej lokalizacji\n- **Monolit zrobiony dobrze** - publiczna strona i oba panele administracyjne w jednej aplikacji Laravel, bez osobnego API\n- **Treść pod kontrolą** - strony, usługi i portfolio edytuje się w CMS — bez deploymentu dla zmiany tekstu czy tłumaczenia\n- **Bramy jakości** - testy PHPUnit i analiza statyczna PHPStan w CI\n- **Otwarty kod** - dokładnie ten kod, który obsługuje digispace.pro, jest publiczny na GitHub\n\n## Stos technologiczny\n\n- **Backend**: Laravel\n- **Panel admina**: Filament 5 (`\u002Fcontrol`) + stary panel na Inertia.js + Vue\n- **Frontend**: Vue.js, Vite\n- **Lokalizacja**: tłumaczenia treści i struktury EN\u002FUK\u002FPL\n- **Architektura**: Niestandardowy CMS\n","2022-10-05","Wielojęzyczna (EN\u002FUK\u002FPL) produkcyjna strona agencji z autorskim CMS — panel Filament z rozbudowanym edytorem treści, tłumaczenia, JSON-LD i zlokalizowane sitemapy wbudowane obok starego panelu na 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","pl\u002Fprojects\u002Fdigispace",[51,67,54,57,74,75],"i18n","SEO","Fk6DSrh4wV9UrvlIWm6anLNeGfF5gl4G-jy8qzYVLUM",{"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_pl\u002Fpl\u002Fprojects\u002Fvetcard.yml","VetCard","Publiczna część VetSpace — multi-tenant katalog klinik weterynaryjnych. Jeden deployment Nuxt SSR obsługuje wszystkie kliniki: strony klinik zoptymalizowane pod SEO, rezerwację wizyt online z proxy do własnego backendu tenant każdej kliniki, tematyzację pod markę kliniki oraz obsługę wielu oddziałów.\n\n## Kluczowe funkcje\n\n- **Jeden deployment — wiele klinik** — aplikacja routuje po slugu kliniki; żądania rezerwacji i slotów są proxy'owane do backendu tenant danej kliniki\n- **Katalog SEO-first** — 590+ klinik ze stronami SSR, danymi strukturalnymi i zlokalizowanymi trasami\n- **Branding każdej kliniki** — strona kliniki jest tematyzowana jej kolorem, z badge'em \"Powered by VetSpace\"\n- **Realny UX rezerwacji** — wolne sloty pokazują liczbę dostępnych lekarzy z kodowaniem kolorami\n- **Pełna lokalizacja** — ukraiński, angielski i polski z routingiem opartym na prefiksach\n\n## Stack technologiczny\n\n- **Frontend**: Nuxt 4 \u002F Vue 3, Tailwind CSS v4\n- **Backend**: Laravel catalog API + endpointy tenant do rezerwacji\n- **Renderowanie**: SSR dla stron SEO, CSR dla flow rezerwacji\n- **Testowanie**: testy jednostkowe Vitest + Cypress E2E na realnym backendzie\n","Multi-tenant katalog klinik weterynaryjnych: SEO strony klinik, rezerwacja wizyt online, branding każdej kliniki — jedna aplikacja Nuxt obsługuje wszystkie","\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},"Przegląd projektu","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","pl\u002Fprojects\u002Fvetcard",[92,57,103,75,104],"Multi-tenant","SSR","4Q1qMR6jtn2ViojU9Uk8TaztwOrlQBTjLNLBv9AASnE",{"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_pl\u002Fpl\u002Fprojects\u002Fvetspace.yml","VetSpace","Dwustronna platforma weterynaryjna — katalog SEO klinik i CRM oparty na subskrypcji z wizytami i rekordami pacjentów. Publiczny katalog klinik zbudowany pod kątem pozyskiwania klientów przez SEO oraz CRM oparty na subskrypcji (wizyty, rekordy pacjentów) jako osobne aplikacje Vue\u002FNuxt na jednym API Laravel. Architektura database-per-tenant, subskrypcje Stripe przez Cashier, GraphQL + REST oraz analiza wizyt wspomagana AI przez dedykowany mikroserwis w Go.\n\n## Kluczowe funkcje\n\n- **Dwustronny lejek** - katalog SEO pozyskuje kliniki, a CRM w subskrypcji (wizyty, rekordy pacjentów) je utrzymuje\n- **Prawdziwa izolacja tenantów** - database-per-tenant trzyma dane każdej kliniki osobno, a eksport\u002Fusuwanie GDPR to operacja na bazie\n- **Dwa interfejsy API** - GraphQL dla złożonych zapytań katalogu, REST dla CRM — jedna baza kodu Laravel\n- **Billing od ręki** - subskrypcje Stripe przez Cashier: triale, zmiany planów, dunning\n- **AI tam, gdzie pomaga** - analizę wizyt wykonuje dedykowany mikroserwis w Go, nie obciążając głównego API\n\n## Stos technologiczny\n\n- **Backend**: Laravel (API)\n- **Frontend**: Vue\u002FNuxt (osobne aplikacje)\n- **Architektura**: Multi-tenancy database-per-tenant\n- **Płatności**: Stripe przez Cashier\n- **API**: GraphQL + REST\n- **AI**: Mikroserwis Go do analizy wizyt\n","2026-09-19","Dwustronna platforma weterynaryjna — katalog SEO klinik i CRM oparty na subskrypcji z wizytami i rekordami pacjentów","\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},"Przegląd API","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-api",{"label":120,"to":121,"color":16,"icon":47},"Przegląd frontendu","https:\u002F\u002Fgithub.com\u002FYurij2015\u002Fvetspace-frontend",{"label":123,"to":88,"color":16,"icon":47},"Przegląd 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","pl\u002Fprojects\u002Fvetspace",[140,51,57,103,130,136],"SaaS","xvJ2gsG93A4aTrZYPgp4UuQdQsPe-Ae8ups9tasKAD8",{"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 to framework CSS oparty na klasach narzędziowych. Używam go w interfejsach aplikacji i publicznych witrynach, między innymi VetCard, VetSpace, DigiSpace oraz w tym portfolio.",{"type":148,"tag":156,"props":157,"children":159},"h2",{"id":158},"stylowanie-w-praktyce",[160],{"type":153,"value":161},"Stylowanie w praktyce",{"type":148,"tag":149,"props":163,"children":164},{},[165],{"type":153,"value":166},"W VetCard wspólne komponenty określają strukturę stron, a indywidualne kolory pozwalają zachować identyfikację placówek. W portfolio Tailwind CSS v4 współpracuje z Nuxt UI, a parametry motywu są zapisane w CSS. DigiSpace również korzysta z Tailwind w interfejsie administracyjnym.",{"type":148,"tag":156,"props":168,"children":170},{"id":169},"jak-dbam-o-spójny-wygląd",[171],{"type":153,"value":172},"Jak dbam o spójny wygląd",{"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},"Responsywny układ",{"type":153,"value":188}," — nawigacja, formularze i karty dopasowane do różnych ekranów.",{"type":148,"tag":178,"props":190,"children":191},{},[192,197],{"type":148,"tag":182,"props":193,"children":194},{},[195],{"type":153,"value":196},"Wspólne parametry projektu",{"type":153,"value":198}," — kolory i odstępy używane w wielu komponentach.",{"type":148,"tag":178,"props":200,"children":201},{},[202,207],{"type":148,"tag":182,"props":203,"children":204},{},[205],{"type":153,"value":206},"Ponowne użycie",{"type":153,"value":208}," — wydzielanie podobnych elementów w komponenty, gdy mają wspólne przeznaczenie.",{"type":148,"tag":156,"props":210,"children":212},{"id":211},"czego-nie-gwarantują-klasy-narzędziowe",[213],{"type":153,"value":214},"Czego nie gwarantują klasy narzędziowe",{"type":148,"tag":149,"props":216,"children":217},{},[218],{"type":153,"value":219},"Klasy blisko znaczników ułatwiają czytanie stylów, ale zmiana wspólnego komponentu czy motywu może wpłynąć na wiele stron. Rozmiar CSS zależy od wykrytych klas i własnych stylów. Wygląd na telefonie, obsługę fokusu klawiatury i kontrast kolorów trzeba sprawdzić osobno — framework nie robi tego automatycznie."]