Przejdź do treści
Kacper Dryla

Nauczyłem się
tworzyć — tworząc.

Zobacz case studies

Kacper Dryla portfolio

BS Dąbrowa Tarnowska — strona główna
01 BS Dąbrowa Tarnowska
Zobacz więcej
Medway Neuroscience — platforma kursów
02 Medway Neuroscience
Zobacz więcej
DiMarco — harmonogram odpadów
03 DiMarco
Zobacz więcej
mlviz.pl — wizualizer dachówek dla ML SYSTEM S.A.
04 mlviz.pl — ML System (GPW)
Zobacz więcej
TSL Cemor — landing transportowy
05 TSL Grzegorz Cemor
Zobacz więcej
MSTUDIO — dashboard zarządzania
06 System zarządzania MSTUDIO
Zobacz więcej
Edynburg Atlas — mapa + harmonogram
07 Edynburg Atlas
Zobacz więcej
Praktyki MSTUDIO — kanban + materiały
08 Praktyki MSTUDIO
Zobacz więcej
Poleć GPF — landing + dashboard
09 Poleć GPF
Zobacz więcej
Q2 second brain — dashboard dzienny
10 Q2 second brain
Zobacz więcej
Kacper Dryla — fotografia
O mnie — Web Designer & AI Implementation & Web App Developer

21 lat — 3 lata doświadczenia.

21 lat, Kraków. AI zacząłem używać w styczniu 2023; w czerwcu 2023 dołączyłem do MSTUDIO — od WordPressa, przez coraz bardziej rozbudowane projekty klienckie, aż po pełne aplikacje webowe. Z czasem — przez codzienną praktykę i kursy Wadyma Melnyka — przeszedłem od chatów AI przez automatyzacje w Make do Claude Code. Dziś 90% pracy wykonuję przez AI: buduję aplikacje webowe dla klientów oraz wewnętrzne narzędzia firmowe. Równolegle studiuję zarządzanie na UEK, łącząc wiedzę akademicką z codziennym zarządzaniem agentycznymi procesami AI.

21
Lat
3
Lata doświadczenia
50+
Stron WordPress
10+
Aplikacji webowych

Co powstało po drodze

10 projektów — 10 lekcji.

BS Dąbrowa Tarnowska — strona główna
WordPress
BS Dąbrowa Tarnowska
01
WordPress

BS Dąbrowa Tarnowska

Rozbudowa strony banku spółdzielczego z 155-letnią historią. Jeden z moich pierwszych projektów z trudniejszymi wymaganiami compliance i dostępności (WCAG, accessibility toolbar). Tu nauczyłem się, jak ciężko może być spełnić niektóre wymagania klienta. AI — jako copywriter.

  • WordPress
  • Custom theme
  • Accessibility
  • WCAG
Medway Neuroscience — platforma kursów
WordPress
Medway Neuroscience
02
WordPress + LearnDash + WooCommerce

Medway Neuroscience

Platforma kursów dla studentów po angielsku. LearnDash (LMS na WordPressie) + system płatności (WooCommerce), dostęp kursantów, certyfikaty. Projekt, w którym AI realnie uczestniczyła w procesie tworzenia — research, pomoc w nauce nowych narzędzi.

  • WordPress
  • LearnDash
  • WooCommerce
  • Stripe
DiMarco — harmonogram odpadów
WordPress
DiMarco
03
WordPress + Claude Code shortcodes

DiMarco

Strona firmy komunalnej z systemem harmonogramów odbioru odpadów. Punkt zwrotny — WordPress jako szkielet, ale logikę (harmonogramy) i wszystkie ekrany napisałem już w Claude Code jako shortcodes wywoływane w edytorze. Pierwsza Claude Code w projekcie klienckim.

  • WordPress
  • Custom shortcodes
  • Claude Code
  • JS
mlviz.pl — wizualizer dachówek dla ML SYSTEM S.A.
Vibecoding
mlviz.pl — ML System (GPW)
04
Vibecoding pre-Claude Code

mlviz.pl — ML System (GPW)

Wizualizer Dachówki dla ML SYSTEM S.A. — aplikacja AI, która na podstawie zdjęcia generuje profesjonalną wizualizację dachu z nową dachówką. Klient wchodzi na visual.photonroof.eu, wgrywa zdjęcie — może to być gotowy dom, projekt architektoniczny, wizualizacja lub sama konstrukcja dachowa przed kryciem — wybiera jeden z 6 rodzajów dachówki i w krótkim czasie dostaje gotową wizualizację z suwakiem PRZED/PO. Zero instalacji, działa w przeglądarce — frontend-only SPA bez własnego backendu. Zbudowane na React 19 + TypeScript + Vite, z dwuetapowym pipeline'em Gemini AI. Efekt: realna pomoc w decyzji zakupowej — nawet zanim dach powstanie.

  • React 19
  • TypeScript
  • Vite
  • Gemini AI
  • EmailJS
  • reCAPTCHA v2
TSL Cemor — landing transportowy
Claude Code landing
TSL Grzegorz Cemor
05
Claude Code landing

TSL Grzegorz Cemor

Jeden z pierwszych landingów zrobionych w 100% Claude Code — strona firmy transportowo-spedycyjnej. Zero WordPressa, zero template'u. Vite + React + Tailwind v4, w pełni custom. Tu zobaczyłem, że Claude Code to inny, wcześniej dla mnie niewyobrażalny sposób i możliwość tworzenia.

  • Vite 6
  • React 19
  • Tailwind v4
  • TypeScript
MSTUDIO — dashboard zarządzania
Claude Code app
System zarządzania MSTUDIO
06
Claude Code app — internal MSTUDIO

System zarządzania MSTUDIO

Pierwsza realna aplikacja, którą zbudowałem dla potrzeb wewnętrznych, żeby rozwiązała mój problem. Pracujemy zdalnie — komunikacja zadań przez WhatsApp, maile i telefon była chaotyczna i nieefektywna. Wyszedłem od problemu i stworzyłem aplikację: projekty klienckie i firmowe, statusy zadań, zadania cykliczne, faktury cykliczne. Tu zrozumiałem, jak spersonalizowana aplikacja może rozwiązać realny problem i ułatwić życie.

  • Next.js 16
  • Supabase
  • dnd-kit
  • TypeScript
Edynburg Atlas — mapa + harmonogram
Claude Code app
Edynburg Atlas
07
Claude Code app

Edynburg Atlas

Lecieliśmy w 4 osoby do Edynburga na 1 dzień. Zrobiłem aplikację towarzyszącą w zwiedzaniu: kaskadowe planowanie godzin, mapy z punktami, ciekawostki. Mały projekt, ale działał i realnie okazał się użyteczny. AI i tworzenie aplikacji może pomagać mi też w prywatnym życiu — dzięki prostocie i szybkości tworzenia.

  • Next.js
  • PWA
  • Mapbox
  • TypeScript
Praktyki MSTUDIO — kanban + materiały
Claude Code app
Praktyki MSTUDIO
08
Claude Code app — internal MSTUDIO

Praktyki MSTUDIO

System zarządzania praktykantami dla agencji reklamowej MSTUDIO: rejestracja kandydatów przez tokenowe linki, akceptacja regulaminów (RODO, prawa autorskie, poufność) z wersjonowaniem treści, tablica projektów filtrowana po specjalności praktykanta (Grafika / Informatyka), ewidencja czasu pracy Start/Stop, linia czasu praktyki z gradientem zielony → czerwony. Logowanie tylko przez email + 6-cyfrowy kod — bez haseł, bez resetu, bez konfiguracji wysyłki maili. Agencja MSTUDIO potrzebowała własnego narzędzia do organizacji praktyk — z każdą rundą uwag aplikacja rozrastała się o kolejne moduły. Sam zarządzałem cyklem: od specyfikacji, przez koordynację developmentu, po testowanie wdrożeń i dokumentację każdej iteracji.

  • Next.js
  • Supabase
  • Vercel
  • Tailwind
  • TypeScript
Poleć GPF — landing + dashboard
Claude Code app
Poleć GPF
09
Claude Code app — duży klient zewnętrzny

Poleć GPF

System poleceń dla firmy ubezpieczeniowej GPF: klient poleca znajomemu, znajomy kupuje polisę, obaj dostają nagrodę. Cztery osobne panele (admin, przedstawiciel, polecający, polecony), automatyczne powiadomienia SMS i e-mail, udostępnianie przez WhatsApp z podglądem OG. Klient przyszedł z pomysłem na kartkę — wyszła z tego pełna aplikacja webowa z kilkoma rundami iteracji. Pierwszy projekt, w którym sam zarządzałem całym cyklem: od specyfikacji, przez zarządzanie developmentem, po testowanie wdrożeń i dokumentację techniczną.

  • Next.js
  • Supabase
  • Resend
  • SMSAPI
  • Cloudflare Turnstile
Q2 second brain — dashboard dzienny
Claude Code app
Q2 second brain
10
Claude Code app — personal

Q2 second brain

Moja prywatna aplikacja: AI journal + kaskadowe planowanie (Tydzień → Dzień) + tracker nawyków. Przeczytałem „7 nawyków skutecznego działania" Coveya, używałem aplikacji do AI journallingu — chciałem to połączyć w 1: wiedza z książki, planer i aplikacja do journaling. Zbudowałem własną totalnie spersonalizowaną rozbudowaną aplikację do zarządzania sobą. Efekt to codzienne używanie od kilku tygodni, cały czas ulepszane — mogę robić własne rozbudowane aplikacje do zarządzania sobą lepsze i bardziej spersonalizowane niż te dostępne na rynku. Wersja demo (oczyszczona z danych osobowych) dostępna na GitHubie.

  • Next.js 16
  • Supabase
  • AES-GCM
  • Anthropic Claude
  • Vitest

Case studies

4 projekty. Klikaj zakładki, żeby przeskakiwać między historiami.

Wizualizer dachu — suwak PRZED/PO z wybraną dachówką
Wizualizer dachu — suwak PRZED/PO z wybraną dachówką
Schemat działania aplikacji
Schemat działania aplikacji
Vibecoding pre-Claude Code

ML System — wizualizer dachówek

Frontend-only SPA z dwuetapowym pipeline'em Gemini AI dla klienta z GPW.

Problem

Sprzedawcy dachówek mają jeden wspólny problem: klient nie wyobraża sobie efektu końcowego, patrząc na wzorniki i katalogi. A decyzja często zapada jeszcze przed budową — na etapie projektu architektonicznego albo gdy stoi już tylko sama więźba dachowa. Brakowało prostego narzędzia, które pokaże jak konkretna dachówka będzie wyglądać na dachu klienta — niezależnie, czy to gotowy dom, projekt wizualizacji, czy zdjęcie z placu budowy. Każde istniejące rozwiązanie było albo za drogie, albo wymagało specjalistycznego oprogramowania — żadne nie działało natychmiastowo, prosto, z poziomu przeglądarki.

Rozwiązanie

Dwuetapowy pipeline AI: Gemini 2.5 Flash najpierw wykrywa, czy na przesłanym zdjęciu widoczny jest dach — działanie co ważne na pełnym przekroju materiałów: gotowych domów, projektów architektonicznych, wizualizacji 3D oraz zdjęć z placu budowy z samą więźbą dachową. Dopiero po pozytywnej weryfikacji uruchamia się Gemini 3 Pro, który generuje wizualizację z wybraną teksturą dachówki. Jeśli dach nie zostanie wykryty, użytkownik dostaje komunikat z prośbą o inne zdjęcie. Sześć rodzajów dachówki — każdy z osobno sprofilowanym promptem, który wymusza realną skalę, właściwy wzór układania i zero efektu „rozmazania" tekstury. Formularz kontaktowy trafia bezpośrednio do skrzynki odbiorczej ML SYSTEM S.A. z danymi potencjalnego klienta i wybranym rodzajem dachówki.

Impact

Klient widzi efekt na swoim własnym dachu — niezależnie, czy to gotowy budynek, projekt na etapie planowania, czy plac budowy. To eliminuje największy hamulec decyzji zakupowej i skraca ścieżkę od zainteresowania do kontaktu ze sprzedawcą. Aplikacja działa produkcyjnie na visual.photonroof.eu.

  • React 19
  • TypeScript
  • Vite
  • Gemini AI
  • EmailJS
  • reCAPTCHA v2
Admin dashboard — przegląd wszystkich praktykantów
Admin dashboard — przegląd wszystkich praktykantów
Admin — Ustawienia rodzajów praktyk
Admin — Ustawienia rodzajów praktyk
Widok praktykanta — Tablica
Widok praktykanta — Tablica
Claude Code app — internal

System praktyk MSTUDIO

Internal SaaS do zarządzania praktykantami zdalnymi.

Problem

W agencji MSTUDIO co kilka miesięcy pojawiają się nowi praktykanci, a do tej pory cała organizacja toczyła się poza systemem — CV w mailach, godziny w kalendarzach, zgody RODO i prawa autorskie podpisywane na papierze, briefy w rozproszonych folderach Google Drive. Przy kilku praktykantach jednocześnie trudno było zorientować się, kto na jakim etapie jest, ile godzin już odpracował i czy zaakceptował regulaminy. Każda nowa praktyka zaczynała się od tego samego chaosu organizacyjnego.

Rozwiązanie

Zaprojektowałem aplikację z podziałem na panel admina i panel praktykanta. Cały dostęp oparty na tokenach (link rejestracyjny zna tylko zaproszony kandydat) i 6-cyfrowych kodach — bez haseł, bez resetu, bez konfiguracji wysyłki maili; jeśli trzeba, admin generuje nowy kod ręcznie. Akceptacja regulaminów RODO, praw autorskich i poufności jest wersjonowana: każda akceptacja zapisuje migawkę treści, więc praktykant po latach widzi dokładnie tę wersję, którą podpisał — nawet jeśli regulamin został później zmieniony. Praktykant ma typ (Grafika / Informatyka) i widzi tylko projekty zgodne ze swoją specjalnością. Linia czasu praktyki z gradientem zielony → czerwony pokazuje adminowi jednym rzutem oka, ile osobie zostało do końca. System przeszedł kilka rund uwag — od pierwszego MVP po dorabianie ewidencji godzin Start/Stop, typów praktyk i wersjonowania regulaminów.

Impact

Aplikacja działa produkcyjnie i obsługuje rekrutację oraz pracę praktykantów w MSTUDIO. Zamiast maili, wydruków i Excela — jedno miejsce, w którym cały cykl praktyki, od zgłoszenia po datę końcową, dzieje się automatycznie.

  • Next.js
  • Supabase
  • Vercel
  • Tailwind
  • TypeScript
Landing publiczny — z formularzem
Landing publiczny — z formularzem
Widok admina — ustawienia
Widok admina — ustawienia
Widok admina — panel główny
Widok admina — panel główny
Wygenerowany kod i landing polecającego
Wygenerowany kod i landing polecającego
Claude Code app — duży klient zewnętrzny

Poleć GPF — system poleceń i nagród

Pierwszy duży kontrakt zewnętrzny — multiagencja ubezpieczeniowa.

Problem

Klient prowadził program poleceń na papierze — przedstawiciele rozdawali wizytówki, a informację o nowych poleceniach dostawali telefonicznie albo mailem. Nie było żadnego śledzenia: kto kogo polecił, czy polisa została zawarta, ile nagród wypłacono. Przy kilkudziesięciu przedstawicielach i setkach poleconych — chaos.

Rozwiązanie

Zaprojektowałem i koordynowałem budowę czteropanelowego systemu: admin zarządza akcjami i nagrodami, przedstawiciel widzi swoich poleconych i polisy, polecający śledzi status w panelu /moje-konto, polecony rejestruje się przez dedykowany link /r/. Automatyczne powiadomienia e-mail (Resend) i SMS (SMSAPI) na każdym etapie — od rejestracji po wypłatę nagrody. Linki do udostępniania generują podgląd WhatsApp z OG meta tagami. System przeszedł kilkanaście rund iteracji — od pierwszego MVP po pełną obsługę akcji czasowych z konfigurowalnymi progami nagród.

Impact

System działa produkcyjnie, obsługuje dziesiątki przedstawicieli i setki poleconych. Zamiast telefonów i Excelów — jedno miejsce, gdzie cały przepływ od polecenia do nagrody działa automatycznie.

  • Next.js
  • Supabase
  • Resend
  • SMSAPI
  • Cloudflare Turnstile
Dashboard dzienny
Dashboard dzienny
Check in poranny
Check in poranny
Claude Code app — personal

Q2 second brain — personal system

AI journal + kaskadowe planowanie + tracker nawyków.

Problem

Próbowałem wielu plenerów, sposobów zapisywania rzeczy — każde narzędzie rozwiązywało tylko część mojego problemu. Brakowało mi jednego miejsca, które łączy planowanie kaskadowe, journal i nawyki, a do tego zgodnie z wiedzą z książki „7 nawyków skutecznego działania", która mnie zainspirowała do lepszego zarządzania sobą.

Rozwiązanie

Trzy moduły: kaskadowe planowanie (Tydzień → Dzień), cotygodniowy journal z AI na Claude, tracker nawyków; a wszystko oparte na książce Coveya. Wszystko spersonalizowane pod sposób, w jaki ja myślę o swoim rozwoju — od struktury planowania, pytania po nawyki jakie śledzę itp. Dane szyfrowane end-to-end (AES-GCM, klucz z BIP-39 mnemonic, znany tylko mi) — Supabase trzyma tylko zaszyfrowane blob'y, AI widzi tylko to, co świadomie wysyłam. Stack: Next.js 16, Supabase, Anthropic Claude.

Impact

Codziennie jej używam od kilku tygodni, ciągle ulepszam i planuję nowe funkcjonalności. Aplikacja, która stała się nawykiem i rozwiązała moje problemy.

  • Next.js 16
  • React 19
  • Supabase
  • AES-GCM
  • Anthropic Claude API
  • Vitest

Polityka prywatności

Ta strona jest statycznym portfolio Kacpra Dryli. Nie zbieramy danych odwiedzających, nie używamy plików cookies analitycznych, nie ładujemy zewnętrznych narzędzi analitycznych.

Administrator danych

Kacper Dryla, e-mail: kacper@dryla.pl

Jakie dane zbieramy

Żadnych. Strona nie ma formularzy, ustawia jedynie ciasteczko z Twoim wyborem dotyczącym ciasteczek (Twoja preferencja). Serwery hostingowe (Vercel) mogą zbierać standardowe logi dostępu (IP, czas, user agent) zgodnie ze swoją polityką prywatności (vercel.com/legal/privacy-policy).

Dane osobowe na stronie

Strona prezentuje dane osobowe administratora (imię, nazwisko, e-mail, telefon, zdjęcie, miejsce zamieszkania, pracodawca). Są one publikowane świadomie w celu zaprezentowania portfolio. Nazwy klientów (BS Dąbrowa Tarnowska, Medway Neuroscience, DiMarco, mlviz / ML System, TSL Cemor, MSTUDIO, GPF) widnieją za zgodą lub w ramach publicznie dostępnych referencji.

Kontakt

W sprawach związanych z polityką prywatności: kacper@dryla.pl

Ostatnia aktualizacja: 10 maja 2026.