Kapitola průvodce
Co se vyplatí znát pro vibe coding
Kód musí někde bydlet, hotová appka se musí dostat online a ideálně na vlastní adresu. Kousky kolem samotného tvoření, díky kterým pochopíte, jak vibe coding zapadá dohromady.
Začněte cestou appky ven do světa: localhost, GitHub, Vercel. Zbytek jsou dílky, po kterých sáhnete, až je projekt bude potřebovat.
14průvodců v kapitoleNa start stačí tři
Kde začít
Tři průvodci na start
Když je tohle téma pro vás nové, projděte nejdřív tyhle. Zbytek kapitoly je příručka — sáhněte po ní, až narazíte.
- 1Co je localhost?Proč váš web běží na localhost:3000 a vidíte ho jen vy? Co je port, že ho Claude Code spustí sám a jak se z localhostu dostane na internet. S interaktivní cestou webu.→
- 2Co je GitHub?Místo, kde žije váš kód: záloha, historie a tlačítko, kterým se appka dostane na web. Commit, push, fork i bezpečnost polopaticky. Příkazy za vás obsluhuje Claude Code.→
- 3Co je Vercel?Cloud, kde vaše appky žijí online. Napojíte GitHub a každý push se sám nasadí, na živou adresu s HTTPS zdarma. Free vs Pro a Vercel CLI, který ovládá Claude Code.→
Celá kapitola
Všech 14 průvodců kapitoly
V pořadí studijní cesty. Každý průvodce stojí sám o sobě — začněte tím, který řeší vaši otázku.
- 1Co je localhost?Proč váš web běží na localhost:3000 a vidíte ho jen vy? Co je port, že ho Claude Code spustí sám a jak se z localhostu dostane na internet. S interaktivní cestou webu.→
- 2Co je GitHub?Místo, kde žije váš kód: záloha, historie a tlačítko, kterým se appka dostane na web. Commit, push, fork i bezpečnost polopaticky. Příkazy za vás obsluhuje Claude Code.→
- 3Co je Vercel?Cloud, kde vaše appky žijí online. Napojíte GitHub a každý push se sám nasadí, na živou adresu s HTTPS zdarma. Free vs Pro a Vercel CLI, který ovládá Claude Code.→
- 4Co je Supabase?Hotový backend pro appky z vibe codingu: databáze, přihlašování a úložiště nad PostgreSQL. Co to je, jak ho obslouží Claude Code a na co pozor (pausování, RLS, klíče).→
- 5Co je Firebase?Hotový backend od Googlu a nejznámější alternativa k Supabase: databáze Firestore, přihlašování, hosting. Poctivé srovnání Firebase vs Supabase, ceny a kdy který zvolit.→
- 6shadcn/uiNejpopulárnější sbírka hotových React komponent pro hezké appky. Fígl: kód si zkopírujete přímo do projektu a vlastníte ho. K čemu vibe coderům slouží a jak ho rozjet v Claude Code i přes MCP.→
- 7Co je OpenRouter?Jeden klíč a jeden účet ke stovkám AI modelů (Claude, GPT, Gemini, DeepSeek) přes jedno API. Jak funguje, kolik stojí, na co pozor a k čemu ho ve vibe codingu využijete.→
- 8Google Cloud ConsoleOšklivá, ale nutná. Jak se v ní vyznat a vytáhnout API klíč pro Gemini, GA4 nebo Search Console. Projekt, API, tři typy klíčů (API key, OAuth, service account) a billing.→
- 9Environment variables (.env)Kam schovat API klíče, aby neskončily v Gitu ani v prohlížeči. Soubor .env, past prefixu NEXT_PUBLIC_ a nastavení na Vercelu. S interaktivní ukázkou, kdo klíč uvidí.→
- 10Co je webhook?Zpráva, kterou služba pošle vaší appce, když se něco stane (platba, nový kód, doručený e-mail). API voláte vy, webhook volá vás. Webhook vs polling, payload a ověření podpisu. S interaktivní ukázkou.→
- 11Co je cron job?Budík pro vaši appku: naplánovaná úloha, co se spustí sama podle času. Jak číst cron výraz (0 7 * * *), kde ho pustíte (Vercel cron, GitHub Actions) a proč pozor na UTC. S interaktivním dekodérem.→
- 12GitHub ActionsAutomatizace v GitHubu: když se v repu něco stane (push, PR) nebo podle rozvrhu, spustí workflow = série kroků (testy, nasazení, úklid). Poctivě o ceně i o tom, kdy je nepotřebujete (Vercel deployuje sám). S interaktivní ukázkou.→
- 13Co je DNS?Telefonní seznam internetu: překládá vasefirma.cz na adresu serveru. Co je A záznam a CNAME, k čemu nameservery a hlavně proč se změna DNS projeví až za pár hodin (TTL a cache). S interaktivní ukázkou propagace.→
- 14Jak dostat vibe codovaný web na vlastní doménuWeb běží na vercel.app a chcete vasefirma.cz? Koupíte doménu, nastavíte dva DNS záznamy a Vercel zařídí HTTPS. Checklist krok za krokem, asi 15 minut práce.→
Průvodci vysvětlují pojmy. Kurz vás naučí tvořit.
V kurzu AI First si vibe coding osaháte krok za krokem na reálných projektech. Průvodci vám pak poslouží jako příručka, ke které se budete vracet.