Kako da napravite funkcionalan sajt ili aplikaciju za jedno popodne, čak i ako nikada niste napisali liniju koda

Pre nekoliko godina, osoba bez znanja HTML-a, JavaScript-a i hostinga teško je mogla sama da napravi funkcionalan sajt. Danas možete tekstom opisati kako treba da izgleda jednostavna web aplikacija, dobiti početni kod kroz v0, doraditi ga uz Cursor i objaviti ga na Vercel-u. To nije marketinška magija – ali nije ni zamena za razvoj ozbiljnog proizvoda.

Najvažnije je da razlikujete prototype (prototip), MVP – Minimum Viable Product (najmanji funkcionalni proizvod) i pravi produkcioni sistem. AI može pomoći da za nekoliko sati napravite landing stranicu, portfolio, kalkulator, mini alat ili internu aplikaciju. Ne može bez ozbiljnog nadzora bezbedno napraviti bankarsku aplikaciju, sistem za naplatu, medicinsku platformu ili servis koji čuva podatke hiljada korisnika.

U ovom vodiču prikazujemo realan put: kako da napravite malu, upotrebljivu web aplikaciju bez prethodnog programerskog iskustva – od ideje i prompta do objave na internetu.

Ključne poruke

• v0: Generiše početni frontend i funkcionalnu strukturu aplikacije na osnovu detaljnog opisa; može se direktno povezati sa Vercel-om.

• Cursor: AI asistent za programiranje (AI coding agent) koji može da objasni, izmeni i pregleda kod u projektu. Svaku izmenu morate pregledati i testirati.

• Vercel: Platforma koja omogućava objavu GitHub projekta kroz dashboard; svaki novi izmenjen fajl (push) može automatski pokrenuti novu objavu.

• Fokus za početnike: Krenite od jedne funkcije – bez prijave korisnika, plaćanja, baze podataka i osetljivih informacija.

• Bezbednost: Kod koji AI generiše može imati greške, zastarele pakete i propuste. AI je brz saradnik, a ne odgovorna osoba.

Šta možete napraviti za jedno popodne

Najveći problem kod ideje „napravite aplikaciju za jedan dan” nije alat. Problem je što ljudi pod rečju aplikacija zamišljaju potpuno različite stvari.

Jednostavan sajt za uslugu, portfolio, kalkulator ili interni alat mogu nastati za nekoliko sati. S druge strane, platforma sa plaćanjem, korisničkim nalozima, chat-om i bazom podataka nije projekat za jedno popodne – čak ni kada AI piše veliki deo koda.

Za prvi projekat birajte ideju koja ima:

• Jednog tipa korisnika.

• Jedan glavni problem koji rešava.

• Najviše tri ključne funkcije i malo ekrana.

• Mogućnost rada bez naloga i bez čuvanja privatnih podataka.

Nije problem biti ambiciozan. Problem je javno objaviti nešto što obrađuje tuđe podatke ili novac, a da ne razumete šta se dešava ispod lepog AI interfejsa.

Tri alata, tri zadatka

Ovaj vodič koristi tri alata koji pokrivaju različite delove procesa:

Cursor nije „dugme koje pravi aplikaciju”. On je radno okruženje u kom možete otvoriti projekat, pitati AI šta pojedini fajl radi, zatražiti promenu i pregledati izmene pre nego što ih prihvatite.

Prvo napišite mini specifikaciju

Pre nego što otvorite bilo koji AI alat, napišite 5 minuta najdosadnijeg, ali najvažnijeg dokumenta: šta zapravo gradite.

Dovoljno je da odgovorite na sledeća pitanja:

• Ko je korisnik?

• Koji konkretan problem rešava?

• Koja je jedna glavna radnja korisnika i šta on unosi u aplikaciju?

• Šta aplikacija vraća kao rezultat?

• Koje funkcije neće postojati u prvoj verziji?

Ako na ova pitanja ne znate odgovor, AI će ga izmisliti umesto vas. To je najbrži put do aplikacije koja lepo izgleda, ali ne rešava ničiji stvarni problem.

Primer: Generator ponuda

U ovom vodiču pravimo zamišljenu aplikaciju pod nazivom Ponuda za minut. Korisnik je freelancer koji unosi ime klijenta, naziv usluge, cenu i rok. Aplikacija generiše uredan tekst ponude koji korisnik može da kopira. Prva verzija ne sadrži bazu podataka, slanje mejlova ni registraciju.

Korak 1: Napravite početni izgled u v0

Otvorite v0.app i napravite novi projekat. Umesto da napišete „napravi mi sajt za ponude”, dajte mu specifičan zadatak.

Napravi responzivnu web aplikaciju na srpskom jeziku pod nazivom „Ponuda za minut”.
Korisnici su freelanceri i male agencije.
Aplikacija mora da ima:
- Naslov: „Napravite nacrt ponude za manje od minuta”
- Formu sa poljima: ime klijenta, naziv usluge, opis usluge, cena, valuta i rok isporuke
- Dugme „Generiši ponudu” i „Kopiraj tekst”
- Panel za pregled ponude koji se ažurira kada korisnik unese podatke
- Jasne poruke za prazna obavezna polja
- Mobile-first raspored (Svetla pozadina, tamni tekst, plava akcentna boja)

VAŽNO: Ne dodaj login, bazu podataka, plaćanje ni nepotrebne biblioteke.

Ovaj prompt jasno definiše ko korisnik jeste, šta mu treba, kako to izgleda i šta se ne sme ubaciti.

Kada v0 generiše rezultat, popunite formu, kliknite na dugmad i smanjite širinu browser prozora da vidite kako izgleda na telefonu. Popravljajte greške iterativno: „Cena ne sme prihvatiti negativnu vrednost“ ili „Na mobilnom prikazu forma treba da bude iznad pregleda“.

Korak 2: Objavite prvi preview ili povežite GitHub

Ako želite samo da pokažete prototip kolegi, v0 može objaviti projekat na Vercel-u direktno kroz opciju Publish.

Za projekat koji planirate da održavate, najbolje je da ga povežete sa GitHub-om. GitHub čuva verzije koda i omogućava povratak na ranije verzije.

• Izvezite projekat sa GitHub repozitorijumom.

• Nazovite repozitorijum jasno (npr. ponuda-za-minut).

• Nikada ne postavljajte API ključeve ili lozinke u javni repozitorijum.

Korak 3: Otvorite projekat u Cursor-u

Preuzmite Cursor i otvorite folder projekta. Nemojte odmah tražiti od agenta da „sredi ceo kod”. Prvo neka vam objasni šta vidi:

Pregledaj ovaj projekat, ali ne menjaj kod. Odgovori:
1. Koji framework koristi projekat?
2. Koji fajl prikazuje početnu stranu?
3. Koje funkcije su već gotove, a koje su samo vizuelne?
Prikaži mi kratak plan strukture projekta razumljiv početniku.

Kada znate gde je šta, zadajte mali zahtev: „Dodaj validaciju forme. Cena mora biti pozitivan broj. Posle izmene napiši koje fajlove si promenio i kako da testiram rezultat.“

Korak 4: Pokrenite aplikaciju na računaru

Pre objave na internetu, aplikacija mora da radi lokalno. Otvorite terminal u Cursor-u i pokrenite:

npm install
npm run dev

Otvorite adresu http://localhost:3000 u browser-u. Ako dobijete grešku, iskopirajte celu grešku u Cursor i zatražite objašnjenje i najbezbedniji korak za popravku.

Korak 5: Testirajte kao korisnik

Početnik obično proveri samo da li aplikacija radi kada unese idealne podatke. Testirajte aplikaciju pod stresom:

• Prazan obrazac i negativna cena.

• Veoma dug opis usluge i specijalni karakteri (č, ć, ž, š, đ).

• Tablet i mobilni prikaz.

• Dugme za kopiranje teksta.

Tražite od Cursor-a da vam generiše checklistu za manuelno testiranje postojećeg interfejsa.

Korak 6: Uradite AI code review

Pre nego što objavite javni link, zatražite od Cursor-a pregled koda (code review):

Uradi pregled koda za ovu web aplikaciju. Proveri:
- Da li aplikacija može da pukne zbog praznih vrednosti.
- Da li postoje API ključevi, tokeni ili lozinke u kodu.
- Da li postoji rizik da se tekst izvrši kao skripta.
Ne menjaj kod. Nalaze prikaži po prioritetima: kritično, važno, preporuka.

⚠️ Oprez: Sve što se isporučuje u browser-u (frontend) je javno. Tajne vrednosti (API ključevi, DATABASE_URL) ne smeju biti ugrađene u JavaScript.

Korak 7: Postavite aplikaciju na Vercel

1. Otvorite Vercel i prijavite se.

2. Povežite GitHub nalog i kliknite na New Project.

3. Pronađite repozitorijum i izaberite Import.

4. Kliknite na Deploy i sačekajte build.

Nakon ovoga, svaki put kada izmenite kod u Cursor-u i pošaljete ga na GitHub (push), Vercel će automatski napraviti novu, ažuriranu verziju sajta.

Šta ako Vercel prijavi grešku?

Najčešće nedostaje neki paket ili je verzija Node.js-a pogrešna. Iskopirajte ceo build log u AI i zatražite da locira glavnu grešku i predloži najmanju potrebnu izmenu.

Besplatno ne znači zauvek i bez ograničenja

Ovi alati nude besplatne početne planove koji su sasvim dovoljni za lični portfolio, demo aplikacije, testiranje ideja ili male interne alate.

Kada dodate AI API integracije, bazu podataka, upload fajlova ili naplatu, pojavljuju se stvarni troškovi održavanja. Nemojte klijentima prodavati priču o „sajtu koji se održava sam i ne košta ništa”.

Najčešće greške u „Vibe Coding” radu

Vibe coding – generisanje aplikacije isključivo kroz promptovanje – nosi određene zamke:

1. Tražite „celu aplikaciju“: Podelite rad na manje zadatke.

2. Prihvatate svaku AI izmenu: AI može predložiti nepotreban i nebezbedan kod. Tražite objašnjenja pre prihvatanja.

3. Ubacujete tajne u frontend: API ključevi moraju ići na backend.

4. Zaboravljate mobilni prikaz: Ako forma „ispada“ sa ekrana telefona, aplikacija je beskorisna za 70% korisnika.

5. Brzate sa Login funkcijom: Uvođenje korisničkih naloga zahteva ozbiljnu bezbednost. Ne ubacujte ih dok zaista nisu neophodni.

Plan za jedno popodne (4 do 6 sati)

• 30 min: Napišite mini specifikaciju i odaberite jednu funkciju.

• 60 min: Generišite početni interfejs u v0.

• 30 min: Povežite GitHub repozitorijum.

• 90 min: Otvorite projekat u Cursor-u, dodajte validaciju i ispravite greške.

• 45 min: Testirajte na desktopu i telefonu sa dobrim i lošim unosima.

• 30 min: Objavite na Vercel-u i proverite javni URL.

Na kraju dana nećete nužno imati gotov „startup“. Imaćete radni link koji može da pokaže ideju stvarnom korisniku.

Korisni izvori i alati

• v0 (Vercel)

• Cursor (AI Code Editor)

• Vercel (Hosting & Deployment)

• GitHub

Najkraća verzija ovog vodiča glasi: ne pokušavajte odmah da napravite novu veliku platformu. Napravite mali alat koji rešava jedan problem, objavite ga, testirajte ga i dozvolite stvarnim korisnicima da vam kažu da li vredi nastaviti.