Od nápadu k hotovému webu za pár hodin s vibecodingem

Cíl bloku:

Pochopit principy vibecodingu a připravit si správný mindset pro práci s AI.

Obsah:

• Úvod do vibecodingu: Představení principu, kdy místo ručního psaní kódu řídíte AI asistenty (Cursor, Claude Code). Možnosti a praktická omezení tohoto přístupu v reálném vývoji.
• Technologie, se kterými budeme pracovat: Využití moderních nástrojů pro tvorbu webu (React, Tailwind) a jejich propojení s cloudovými službami. Rozdíl mezi fixním obsahem a dynamickou databází, která reaguje na akce uživatelů.
• Vhodné projekty a bezpečnost: Jak identifikovat zadání ideální pro AI vývoj (např. prezentační weby, dashboardy) a kde je naopak nutná opatrnost, zejména u zabezpečení, práce s citlivými údaji (GDPR) nebo platebních systémů.
• Příprava a organizace práce: Důležitost promyšlené architektury ještě před zahájením generování kódu. Základy verzování a udržování pořádku v projektu, aby byl výsledek dlouhodobě udržitelný.

Cíl bloku:

Zorientovat se v nástrojích a vybrat si ten nejlepší pro váš projekt.

Obsah:

• Práce v prohlížeči (Claude, ChatGPT, Lovable, …): Využití běžných chatovacích rozhraní pro rychlé prototypování a tvorbu dílčích funkcí. Výhody a nevýhody těchto nástrojů.
• Specializované editory (Cursor, Windsurf): Nástroje, které přímo rozumí celé struktuře vašeho projektu. Umožňují automatické zápisy změn do souborů a úzké propojení s prostředím, ve kterém kód vzniká.
• Samostatní agenti (Claude Code): Pokročilí asistenti schopní pracovat autonomně. Zvládají hromadné úpravy v celém projektu, efektivní vyhledávání chyb a automatickou správu verzí.
• Efektivita a náklady: Srovnání technických parametrů jednotlivých řešení. Jakou roli hraje kapacita paměti AI, rychlost její odezvy a jak se rozhodnout mezi měsíčním předplatným a platbou za skutečné využití (API).

Cíl bloku:

Nastavit si vše tak, aby vám technologie pomáhaly.

Obsah:

• Příprava prostředí a pracovní postup: Instalace a nastavení klíčových nástrojů pro AI vývoj. Propojení editoru s online úložištěm projektů (GitHub) a platformou pro okamžité zveřejnění webu na internetu.
• Jak efektivně instruovat AI: Metody, jak předat AI agentům správný kontext a pravidla pro jejich práci. Využití pomocných souborů pro definování standardů a příprava technického zadání, aby výsledný kód přesně odpovídal vaší vizi.
• Od nápadu k fungující aplikaci: Praktický postup, jak přenést rozpracovaný prototyp z prohlížeče do profesionálního vývojového prostředí. Spuštění projektu na vlastním počítači a příprava pro další rozšiřování funkcí.

Cíl bloku:

Uvidíte na vlastní oči, jak se krok za krokem staví aplikace.

Obsah:

• Vývoj aplikace v přímém přenosu: Ukázka postupného budování funkčního projektu od úplného základu. Uvidíte, jak se z prvotní myšlenky stává reálný nástroj díky průběžnému vylepšování a doplňování funkcí v reálném čase.
• Rychlý návrh moderního vzhledu: Generování vizuálních prvků pomocí umělé inteligence a jejich okamžité zapojení do webu. Jak vytvořit profesionálně vypadající uživatelské rozhraní, aniž byste museli ručně ladit každý pixel.
• Řešení problémů a vylepšování: Jak využít AI agenty k vyhledávání chyb a pročištění kódu. Praktické ukázky oprav a úprav, které probíhají přímo v terminálu, a postupy, jak udržet projekt v dobré kondici.
• Spuštění na internetu: Finální krok, kterým je nahrání hotového projektu na web. Propojení s vlastní doménou a zajištění toho, aby byl váš výsledek okamžitě přístupný uživatelům po celém světě.

Cíl bloku:

Naučit web pracovat s daty a přijímat platby.

Obsah:

• Pokročilé funkce a správa dat: Propojení webu s moderními cloudovými službami (Supabase, Railway) pro bezpečné ukládání informací. Ukázka toho, jak nastavit "mozek" aplikace, který se stará o data, aniž byste museli budovat složitou vlastní infrastrukturu.
• Komunikace a platební systémy: Jak do projektu snadno integrovat automatické odesílání e-mailů (Resend) nebo spolehlivé přijímání plateb (Stripe). Využití hotových služeb pro obcházení technicky náročných výzev v zákulisí webu.
• Vlastní správa obsahu (CMS): Představení cesty, jak si vytvořit vlastní redakční systém (např. PayloadCMS ve spojení se Supabase). Díky tomu získáte rozhraní, ve kterém můžete sami měnit texty nebo obrázky na webu, aniž byste museli zasahovat do zdrojového kódu.
• Moderní hosting a plynulý provoz: Využití platformy Vercel pro rychlé a stabilní spuštění celého projektu. Jak zajistit, aby všechny části aplikace (databáze, e-maily i samotný web) spolu správně a efektivně komunikovaly.

Cíl bloku:

Dostat odpovědi na vše, co vás zajímá.

Obsah:

• Prostor pro vaše dotazy: Prostor pro vyjasnění konkrétních bodů, které vás během kurzu zaujaly, a odpovědi na otázky spojené s vašimi vlastními projekty nebo nápady.
• Rady a tipy: Doporučení na zdroje, nástroje a komunity, které vám pomohou zůstat v obraze a pokračovat v rozvoji i po skončení kurzu.