Od zera do Vercela. Jak zbudować własną apkę idąc po linii najmniejszego oporu

Prompty i Warsztat
, ,
1

Jeśli masz pomysł na aplikację, ale na samą myśl o konfiguracji środowiska, pisaniu autoryzacji i spinaniu bazy danych odechciewa Ci się zaczynać – ten poradnik jest dla Ciebie.

poradnik budowy projektu
poradnik budowy projektu1536×1024 335 KB

Zbudujemy aplikację “po linii najmniejszego oporu”, zrzucając 90% powtarzalnej pracy na barki najnowszych modeli agentowych. Zamiast klepać kod, stajesz się menedżerem projektu.

Wybrany tu stos technologiczny (Next.js + Supabase + Vercel) jest optymalny, ponieważ modele AI (takie jak te w Cursorze czy najnowszy GPT-5.5) “widziały” w swoich danych treningowych miliony podobnych rozwiązań i w tym środowisku halucynują najrzadziej.

Oto cały proces, krok po kroku.

Krok 1: Makieta i wizja (Zamiast kodu – obraz)

Nie zaczynaj od prośby o napisanie kodu interfejsu w ciemno. Modele gubią się, gdy muszą jednocześnie wymyślać logikę i estetykę.

  • Narzędzia: Claude Design, v0.dev (od Vercela) lub ostatecznie Midjourney/GPT-Images do samej inspiracji.

  • Co robisz: Prosisz o wygenerowanie interfejsu (w Claude/v0.dev od razu w interaktywnej formie).

  • Przykładowy prompt (np. do v0.dev):

“Buduję aplikację SaaS do [cel apki, np. zarządzania budżetem]. Wygeneruj mi czysty, nowoczesny dashboard korzystając z Shadcn UI. Potrzebuję bocznego panelu nawigacji, górnego paska profilu oraz głównego widoku z tabelą wydatków i prostym wykresem słupkowym. Stwórz też widok minimalistycznego ekranu logowania.”

  • Efekt: Wyklikujesz poprawki na żywym prototypie, a potem eksportujesz wygenerowany kod lub zapisujesz widok jako punkt odniesienia dla agenta programistycznego.

Krok 2: Struktura bazy danych (Supabase)

Supabase to darmowy Backend-as-a-Service, na którym bardzo szybko postawisz bazę PostgreSQL i system logowania. AI doskonale zna to środowisko.

  • Narzędzia: Zwykły czat z GPT-5.5 (świetnie planuje struktury) lub Claude Opus 4.7.

  • Przykładowy prompt:

“Piszę aplikację w Next.js i używam Supabase jako backendu. Zaprojektuj schemat bazy danych SQL dla aplikacji do [cel apki]. Będę potrzebował tabel dla [wymień główne byty, np. użytkownicy, projekty, faktury]. Wygeneruj kompletny kod SQL, który wkleję w SQL Editorze w Supabase. BARDZO WAŻNE: Skonfiguruj od razu polityki bezpieczeństwa RLS (Row Level Security), aby każdy zalogowany użytkownik mógł odczytywać, modyfikować i usuwać wyłącznie własne rekordy, zidentyfikowane przez auth.uid().”

  • Efekt: Kopiujesz SQL, wklejasz do panelu Supabase, naciskasz “Run” – i cała baza z zabezpieczeniami jest gotowa.

Krok 3: Generowanie logiki i łączenie całości (Cursor / Antigravity)

Teraz wchodzimy do środowiska programistycznego. Zamiast pisać pliki ręcznie, zlecamy zbudowanie fundamentów agentowi.

  • Narzędzia: Cursor (tryb Composer), Antigravity lub Cline.

  • Co robisz: Otwierasz pusty folder w Cursorze, odpalasz Composera (Ctrl/Cmd + I) i ładujesz mu pełny kontekst (schemat bazy i pliki UI).

  • Przykładowy “Master Prompt”:

"Zbuduj aplikację internetową używając: Next.js (App Router), Tailwind CSS i komponentów Shadcn UI.

  1. Oto schemat mojej bazy danych w Supabase: [wklej schemat SQL z Kroku 2].

  2. Chcę, aby UI bazowało na tym: [załącz pliki z v0.dev lub screeny makiet z Claude Design].

  3. Skonfiguruj logowanie/rejestrację używając paczki @supabase/ssr.

  4. Zbuduj chroniony chronioną ścieżkę dashboardu (weryfikuj sesję użytkownika), który pobiera i wyświetla listę [nazwa elementu] z mojej bazy. Działaj krok po kroku. Najpierw zainicjuj projekt i zainstaluj zależności, a następnie poproś mnie o zgodę na generowanie struktury katalogów i plików logiki."

Krok 4: Debugowanie (Claude Code)

Zawsze coś się wysypie – błąd routingu, niezgodność wersji biblioteki czy literówka w połączeniu do bazy. Nie trać czasu na szukanie rozwiązań na Stack Overflow.

  • Narzędzia: Wbudowany w Cursora chat agentowy lub narzędzie Claude Code działające w terminalu.

  • Przykładowy prompt naprawczy:

“Dostaję taki błąd w konsoli podczas próby logowania: [wklej treść błędu]. Przeanalizuj moje pliki konfiguracyjne po stronie klienta i serwera, znajdź problem i go napraw.” Tip: Jeśli używasz Claude Code, po zakończeniu pracy użyj komendy /ultrareview. Model sam przeprowadzi bezlitosne “Code Review”, wytykając głupie błędy, luki bezpieczeństwa i zły design architektury.

Krok 5: Publikacja dla świata (Vercel)

Aplikacja śmiga lokalnie? Czas wypuścić ją do sieci. Vercel został stworzony przez twórców frameworka Next.js, więc deploy jest niemal bezobsługowy.

  1. Wrzuć swój gotowy projekt na prywatne repozytorium na platformie GitHub.

  2. Zaloguj się do Vercel.com, kliknij “Add New Project” i podepnij to repozytorium.

  3. Kluczowy krok: Zanim klikniesz wdróż, musisz wejść w ustawienia zmiennych środowiskowych (“Environment Variables”) w panelu Vercel i wkleić tam swoje klucze z Supabase (NEXT_PUBLIC_SUPABASE_URL oraz klucz anon). Bez nich opublikowana aplikacja nie dogada się z Twoją bazą danych.

  4. Kliknij “Deploy”. W dwie minuty masz aktywny, darmowy link do swojej nowej aplikacji.

Jeśli ktoś z Was ma sprecyzowany pomysł na własną aplikację, ale utknął na etapie doboru narzędzi lub nie wie, jak ułożyć dobry prompt startowy (Master Prompt) dla agenta – dajcie znać w komentarzach. Chętnie pomogę i podrzucę gotowy szablon pod konkretny use-case. Powodzenia w budowaniu!