Kodowanie w 2025: Czy AI zbudowało moje portfolio? Case Study pawel.lipowczan.pl

Często słyszę, że programowanie się kończy. Że wystarczy „zvibecodować” aplikację w jednym z nowych narzędzi no-code, a AI zrobi resztę. Postanowiłem to sprawdzić na żywym organizmie.

Zbudowałem pawel.lipowczan.pl – projekt, który miał być wizytówką, a stał się poligonem doświadczalnym dla współpracy na linii Doświadczony Inżynier – Agent AI.

Wnioski? Jeśli myślisz, że zbudujesz profesjonalny, bezpieczny i skalowalny serwis bez wiedzy technicznej, tylko „rozmawiając” z chatbotem – jesteś w błędzie. Ale jeśli masz fundamenty inżynierskie i potraktujesz AI jako junior developera na sterydach, efekty (i koszty) mogą Cię zaskoczyć.

Oto kulisy powstawania mojego portfolio w stacku React + Vite + Tailwind.

1. Fundament: Nowoczesny stack i SEO w świecie SPA

Mój cel był prosty: wyjście poza ramy statycznego CV. Chciałem estetyki, wydajności i miejsca na dzielenie się wiedzą. Wybór padł na React 18 + Vite.

Dlaczego? Bo Vite zapewnia błyskawiczny build. Jednak React to zazwyczaj Single Page Application (SPA), co bywa problematyczne dla SEO. Tutaj wchodzi inżynieria. Zastosowałem mechanizm prerenderingu. Mimo że pod maską działa React i Tailwind CSS, serwujemy robotom statyczne pliki HTML.

Efekt? Strona jest błyskawiczna, a Google widzi ją tak, jak klasyczny dokument. Całość hostuję na Vercel, co okazało się strzałem w dziesiątkę. Wbudowana analityka i analiza Core Web Vitals pozwoliły mi wykręcić „zielone wyniki” niemal od razu po deployu.

2. Design dla nie-designera: Koniec z „wodotryskami” metodą prób i błędów

Bądźmy szczerzy: nie jestem designerem. Zawsze miałem problem z doborem palety barw, ułożeniem elementów czy animacjami. W tradycyjnym modelu spędziłbym godziny na przesuwaniu pikseli w CSS.

Tutaj ten problem zniknęł. Mogłem wskazać AI przykłady stron, które mi się podobają, a agent adaptował ten styl do mojego projektu. Zamiast eksperymentować z kodem CSS, wskazywałem w IDE miejsce do poprawy, a AI korygowało layout w sekundy.

Lovable vs. IDE Eksperymentowałem z różnymi narzędziami do „vibe codingu”, m.in. z Lovable, Vercel czy Firebase Studio. Lovable dawało świetne efekty wizualne, ale finalnie zdecydowałem się na generowanie kodu bezpośrednio w IDE (Cursor). Dlaczego? Bo zależało mi na pełnej kontroli i nowoczesnym, schludnym efekcie końcowym, który jest „moim” kodem, a nie zamkniętą czarną skrzynką.

3. Grafika: Spójność ponad perfekcję

W idealnym świecie każdy projekt w portfolio byłby opatrzony dedykowanymi zrzutami ekranu z konkretnych narzędzi i procesów. Ale przygotowanie setek takich screenów to tytaniczna praca.

Zastosowałem podejście: Done is better than perfect. Zamiast tracić czas na robienie zrzutów czy szukanie zdjęć stockowych, postawiłem na grafikę generatywną.

• Wykorzystałem Nano Banana MCP.
• Ja dostarczam treść, agent generuje grafikę, a skrypt (konwerter) automatycznie zamienia PNG na WebP.

Dzięki temu strona jest spójna wizualnie, utrzymana w klimacie tech/cyber, a ja nie muszę martwić się o "dziury" w contencie.

4. Rzeczywistość: Doświadczenie vs Nowe Frameworki

Mam 15 lat doświadczenia w IT (.NET, Python, JS), ale frameworki takie jak React czy Vite były dla mnie nowością. Musiałem się ich poduczyć.

I tu kluczowa uwaga: Wiedza programistyczna jest niezbędna. Dzięki doświadczeniu w projektowaniu systemów, kod generowany przez AI jest dla mnie zrozumiały. Potrafię ocenić jego poprawność, zanim trafi na produkcję. Bez tego utonąłbym w błędach.

• Agenci (nawet Claude Sonnet 4.5 czy Gemini 3 Pro) potrafią się zapętlić.
• Zdarzają się halucynacje nieistniejących bibliotek.

Gdybym nie rozumiał fundamentów, nie byłbym w stanie „odkręcić” błędów, które AI wprowadzało przy bardziej skomplikowanej logice.

Pedantyzm w kodzie

Jestem pedantyczny, jeśli chodzi o porządek w plikach (Clean Code). Jasna struktura folderów i podział odpowiedzialności to dla mnie świętość. AI ma tendencję do wrzucania wszystkiego do jednego worka. Moja rola polegała na wymuszaniu tej struktury. Dzięki temu projekt jest łatwy w utrzymaniu i reorganizacji, a nie jest „spaghetti kodem” wyplutym przez maszynę.

5. Polisa ubezpieczeniowa: Testy i Code Review Agent

W projekcie hobbystycznym łatwo o chaos. Aby temu zapobiec, wdrożyłem dwa poziomy zabezpieczeń:

1. Bogate testy E2E (Playwright): Każda zmiana jest weryfikowana przez automatyczne testy. Mam pewność, że nowa funkcja nie „rozsypała” starej.
2. Code Review Agent w Cursor.sh: To genialna funkcja. Agent analizuje zmiany w ostatnim commicie przed wysłaniem do repozytorium. Wyłapał mi sporo błędów logicznych i potencjalnych problemów, które mogłem przeoczyć.

6. Koszty: Ile kosztuje „darmowy” programista?

To ciekawe zestawienie. Przez cały projekt przepuściłem około 60 milionów tokenów. Rozkład wejście/wyjście to mniej więcej 80/20.

Gdybym płacił cennikowo za API (np. Claude Sonnet 4.5 – $3 input / $15 output), koszt wyniósłby około 325 USD.

Realny koszt?

• Plan PRO+ w Cursor.sh: 60 USD.
• Antigravity (w ramach Google Workspace): 0 USD (wliczone w pakiet firmowy).

Oszczędność jest kolosalna. Oczywiście są limity – przy intensywnej sesji zdarzało mi się zobaczyć komunikat o ich przekroczeniu. Wtedy po prostu zmieniałem model (skaczę między Gemini 3 Pro High a Claude Sonnet 4.5). Limity odnawiają się co kilka godzin, więc przy regularnej pracy nie stanowi to blokady.

Podsumowanie

Projekt pawel.lipowczan.pl to dowód na to, że w 2025 roku rola programisty ewoluuje. Przestajemy być rzemieślnikami od składni, a stajemy się architektami zarządzającymi zespołem cyfrowych agentów.

Możesz nie być designerem. Możesz nie znać na wylot najnowszego frameworka. Ale jeśli masz inżynierski umysł, dbałość o jakość (i testy!) oraz umiejętność orkiestracji AI – zbudujesz rzeczy, które wcześniej wymagałyby całego zespołu.

Zapraszam do sprawdzenia efektów i code review! Feedback mile widziany.