Vibe coding z replitem - kazdy moze zbudowac apke!
# Jak zbudowałam aplikację w kilka godzin (bez kodowania) 🚀
Chcę Wam dziś pokazać czym jest vibe-coding i udowodnić, że sami jesteście w stanie zbudować aplikację — bez developera, bez kodowania, bez żadnego technicznego doświadczenia.
Brzmi za pięknie? Też tak myślałam. Więc sprawdziłam.
## Od pomysłu do apki
Potrzebowałam pomysłu na pierwszą apkę. Zamiast wymyślać coś na siłę, zadałam sobie proste pytanie: jaki problem mogę rozwiązać? I wtedy mnie oświeciło — urodziny. Co roku ta sama sytuacja: ktoś bliski ma urodziny, a ja dowiaduję się za późno żeby zdążyć kupić prezent. Excel z datami mam, ale Excel nie wyśle mi przypomnienia 14 dni wcześniej.
Cel: apka która pilnuje urodzin za mnie.
## Czym jest vibe-coding?
Vibe-coding to budowanie aplikacji przez rozmowę z AI. Nie piszesz kodu — opisujesz co chcesz, a AI to buduje. Mówisz po ludzku, dostajesz działającą apkę. Brzmi jak magia, ale to po prostu nowy sposób tworzenia. I jest dostępny dla każdego.
## Narzędzie: Replit Agent
Ja użyłam Replit — platformy do budowania aplikacji online. Mają Replit Agent: opisujesz czego chcesz, a AI pisze kod, stawia bazę danych, serwer i publikuje apkę pod prawdziwym linkiem.
Ile to kosztuje?
- Replit Core: $25/miesiąc
- Można dokupywać kredyty na dodatkowe użycie Agenta
- Twoja apka dostaje darmową domenę .replit.app
Dla porównania — zlecenie takiej apki developerowi to tysiące złotych i tygodnie czekania. Tu? Jedno popołudnie ☕
## Zanim zaczniesz — FAQ dla nieprogramistów 🙋♀️
"Ale ja naprawdę nic nie umiem technicznie"
Ja też nie. Serio. Prowadzę startup, nie piszę kodu. Jeśli umiesz napisać maila, umiesz vibe-codować.
To dosłownie pisanie wiadomości.
"A jak coś się zepsuje?"
Piszesz Agentowi: "Coś nie działa, kiedy klikam X to Y" — i on to naprawia. Nie musisz wiedzieć dlaczego się zepsuło. Tak jak nie musisz być mechanikiem żeby powiedzieć w warsztacie co stuka.
"Czy muszę coś instalować?"
Nie. Wszystko działa w przeglądarce. Wchodzisz na replit.com, logujesz się i zaczynasz. Zero instalacji.
"A jak nie wiem co napisać Agentowi?"
Zacznij od problemu, nie od rozwiązania. Nie pisz "zrób mi React app z PostgreSQL". Pisz po ludzku: "Chcę apkę gdzie wpisuję urodziny znajomych i dostaję maile z przypomnieniami." Agent ogarnie technikalia.
"Ile to realnie trwa?"
Moja apka od zera do opublikowanej wersji — jedno popołudnie. Pierwsze cokolwiek-działające? 15 minut.
"Co jak chcę zmienić coś wizualnie?"
Możesz dołączyć screenshoty lub zdjęcia do wiadomości! Np. zdjęcie szkicu z kartki albo screenshot innej apki z komentarzem "chcę żeby wyglądało podobnie do tego". Agent rozumie obrazki.
## Mój proces (krok po kroku)
### 1. Najpierw kartka, nie klawiatura ✏️
Zanim otworzyłam Replita, wzięłam kartkę i narysowałam:
- Jak wygląda strona główna?
- Jak działa logowanie?
- Co widzi użytkownik po wejściu?
To najważniejszy krok. Bez planu AI nie wie czego chcesz, a Ty nie wiesz czy wynik ma sens. 5 minut z długopisem oszczędza godzinę poprawek.
### 2. Plan, nie Build! 📋
Kiedy wchodzisz na replit.com i tworzysz nowy projekt, zobaczysz dwa tryby:
- Build — od razu zaczyna budować
- Plan — najpierw planuje, potem buduje
Wybierz Plan! To ważne. Agent najpierw przeanalizuje Twój pomysł, rozpisze co jest potrzebne (baza danych, ekrany, funkcje) i dopiero potem zaczyna kodować. Dzięki temu masz kontrolę nad tym co powstaje — możesz powiedzieć "nie, to zmień" zanim napisze choćby linijkę kodu.
Build jest kuszący (bo szybciej!), ale Plan daje lepsze wyniki.
### 3. Opisz co chcesz 💬
W okienku opisujesz swoją apkę po ludzku:
> "Zbuduj aplikację do przypominania o urodzinach. Użytkownik dodaje imiona i daty ręcznie lub przez upload Excela. Apka wysyła emaile 14, 7, 5, 3, 2, 1 dzień przed i w dniu urodzin. Dashboard z nadchodzącymi urodzinami. Czysty design w różowo-białej kolorystyce."
Agent stworzy plan, Ty go zatwierdzasz, i patrzysz jak buduje Twoją apkę na żywo.
### 4. Rozmawiaj i poprawiaj 🔄
Pierwsza wersja nie będzie idealna — i to jest OK. Każda poprawka to kolejna wiadomość:
- "Dodaj landing page z opisem funkcji"
- "Dodaj import polskich nazw miesięcy"
- "Zmień nagłówek na bardziej chwytliwy"
Jak rozmowa z programistą który nigdy nie jest zmęczony i nigdy się nie obraża na zmiany.
### 5. Publikuj jednym kliknięciem 🚀
Klikasz Publish — apka jest live. Prawdziwy link, prawdziwa strona. Gotowe w sekundy.
## Efekt
Oto co zbudowałam w jedno popołudnie:
Mapa apki - birthday-buddy-reminder.replit.app - jeśli masz ochotę dostać kod, napisz na priv :)
Przejdźmy przez gotową apkę ekran po ekranie. Dzięki temu zobaczysz co tak naprawdę powstało — i co powiedzieć Agentowi żeby zbudował coś podobnego.
Ekran 1: Landing Page (strona powitalna) 🎂
To pierwsza rzecz jaką widzisz po wejściu na link apki:
- Duży nagłówek — "Pamiętaj o każdych urodzinach które się liczą"
- Uroczy piesek w czapeczce urodzinowej 🐕🎉
- Dwa przyciski: "Zacznij za darmo" (prowadzi do rejestracji) i "Dowiedz się więcej" (scrolluje do opisu funkcji)
- "Na zawsze za darmo / Bez karty kredytowej"
- Sekcja "Wszystko czego potrzebujesz" — 6 kart z opisem funkcji
- Na dole: "Gotowy, żeby zacząć?" z kolejnym przyciskiem
- Nawigacja na górze: przełącznik PL/EN, Funkcje, Zaloguj, Rejestracja
Ekran 2: Rejestracja z kodem dostępu 🔐
⚠️ Ważne! Apka jest zabezpieczona kodem dostępu. Dlaczego? Bo utrzymanie apki kosztuje (wysyłanie maili, baza danych). Jeśli dasz kod wszystkim — rachunek może Cię zaskoczyć.
Jak to wygląda:
- Ikona prezentu 🎁
- "Dołącz do BDay Remind"
- Pole "Wpisz kod dostępu"
- Przycisk "Kontynuuj z Google" — Po wpisaniu kodu logujesz się kontem Google, Apple lub emailem
- Bez kodu — nie wejdziesz dalej
Rada: Dawaj kod tylko najbliższym osobom. To Twoje prywatne narzędzie 🤫
Ekran 3: Logowanie ✅
Po wpisaniu kodu zostaniesz przekierowany na stronę Replit (platforma na której stoi apka). Tam wybierasz jak chcesz się zalogować: kontem Google, Apple albo emailem. Klikasz, wybierasz konto — gotowe. Zero wymyślania haseł. Replit pilnuje bezpieczeństwa za Ciebie.
Ekran 4: Dashboard (panel główny) 🎯
Serce apki. Po zalogowaniu widzisz:
- Powiadomienia e-mail — toggle on/off na górze, z info na jaki email
- Wyszukiwarka — "Szukaj imion..."
- Trzy przyciski: "Dodaj" (ręcznie), "Import" (Excel), "Masowe" (harmonogram dla wszystkich)
- Lista urodzin — z inicjałami, datą, odliczaniem ("25d pozostało"), ikonami przypomnień, przyciskami edycji ✏️ i usuwania 🗑️
Ekran 5: Dodawanie urodzin ➕
Klikasz "Dodaj" i widzisz formularz:
- Imię — np. "Anna Kowalska"
- Dzień / Miesiąc (lista rozwijana po polsku!) / Rok (opcjonalny)
- "Przypomnij mi" — checkboxy: 14, 7, 5, 3, 2, 1 dzień przed + w dniu urodzin
- Domyślnie zaznaczone: 7 dni + 1 dzień + w dniu — ale możesz zmienić dla każdej osoby!
Drugi sposób: Import z Excela — uploadzjesz plik .xlsx. Apka rozumie "February" i "Luty" 🇵🇱🇬🇧
Harmonogram przypomnień ⏰
Dwa sposoby ustawienia:
1. Per osoba — przy dodawaniu/edycji zaznaczasz które chcesz
2. Masowo — przycisk "Masowe" ustawia to samo dla wszystkich
Opcje: 14 dni, 7 dni, 5 dni, 3 dni, 2 dni, 1 dzień przed + w dniu urodzin.
Przypomnienia wysyłają się same na Twój email — nic nie musisz klikać.
Na każdym ekranie: przełącznik języka 🌍
W rogu ekranu jest przełącznik PL/EN. Jedno kliknięcie zmienia cały interfejs — przyciski, etykiety, komunikaty. Polscy i zagraniczni znajomi zobaczą apkę w swoim języku.
Co działa w apce — pełna lista ✅
✅ Landing page z pieskim w czapeczce 🐕
✅ Zabezpieczenie kodem dostępu
✅ Logowanie przez Google, Apple lub email
✅ Dashboard z odliczaniem dni
✅ Wyszukiwarka imion
✅ Dodawanie ręczne z customizacją per osoba
✅ Import z Excela (PL i EN nazwy miesięcy!)
✅ Masowe ustawianie harmonogramu
✅ Przypomnienia 14/7/5/3/2/1 + w dniu urodzin
✅ Edycja i usuwanie wpisów
✅ Powiadomienia email z toggle on/off
✅ Przełącznik języka PL/EN 🌍
✅ Responsywny design — telefon i komputer
Jak rozmawiać z Agentem — ściąga dla nie-koderów 🗣️
Agent to Twój programista. Nie mówisz mu JAK kodować — mówisz CO chcesz zobaczyć:
Opisujesz wygląd:
"Na górze strony chcę duży napis 'Witaj!' i pod nim dwa przyciski obok siebie"
Zgłaszasz problem:
"Kiedy klikam przycisk 'Dodaj' nic się nie dzieje. Powinno otworzyć formularz."
Chcesz zmianę:
"Zmień kolor tła na jasny róż. Przyciski niech będą zaokrąglone."
Coś Ci się nie podoba:
"Dashboard wygląda zagracony. Uprość go — mniej elementów, więcej przestrzeni."
Możesz też wkleić screenshot i napisać: "Chcę żeby wyglądało jak na tym zdjęciu" — Agent rozumie obrazki!
## Pomysły na Twoją pierwszą apkę 💡
Nie wiesz co zbudować? Pomyśl jaki problem rozwiązujesz Excelem, kartką albo w głowie:
📚 Lista książek do przeczytania — z ocenami i statusem
🏋️ Tracker ćwiczeń — co robiłeś na siłowni
🍽️ Planner posiłków — jadłospis na tydzień
🎁 Wishlist — lista życzeń z linkami do prezentów
🐕 Pet tracker — wizyty u weterynarza, leki, szczepienia
💰 Dzielnik wydatków — kto komu ile jest winien po wspólnym wyjeździe
📝 Dziennik wdzięczności — codziennie 3 rzeczy za które jesteś wdzięczna
Każdy z tych pomysłów to jeden prompt i popołudnie w Replit.
## Porady jeśli chcecie spróbować
1. Zacznij od problemu — jaki masz problem? To Twoja apka.
2. Rysuj na kartce — plan > prompt
3. Wybierz Plan, nie Build — daj Agentowi chwilę na przemyślenie
4. Małe kroki — proś o jedną funkcję na raz, nie o wszystko naraz
5. Testuj po każdej zmianie — klikaj, sprawdzaj, poprawiaj
## Podsumowanie
Nie musisz być programistą żeby zbudować aplikację. Nie musisz wydawać tysięcy na developera. Wystarczy pomysł, kartka i $25 miesięcznie.
Vibe-coding to nie przyszłość — to teraźniejszość. I jest dla każdego z Was.
A teraz przepraszam — muszę lecieć kupić prezent. Apka mi przypomniała 😉🎂
