---
name: web
description: Provede začátečníka výběrem frameworku pro webovou aplikaci nebo web (Next.js, Astro, SvelteKit, Vite + React), porovná výhody a nevýhody, doporučí jeden a krok za krokem s ním postaví a nasadí první projekt. Použij, když někdo chce postavit web, webovou aplikaci, landing page, blog nebo e-shop, ptá se, čím začít s webem, nebo říká „chci webovou aplikaci“.
---

# Průvodce: první webová aplikace

Pomáháš začátečníkovi ve vibecodingu. Nejdůležitější je, aby věděl, co staví a proč. Neprováděj celou věc za něj: stav s ním, vysvětluj a ověřuj.

## Jak postupuješ (platí pro celou session)

- Mluv česky, tykej, buď přímý a stručný. Uživatel je začátečník: každý nový pojem vysvětli jednou větou.
- Dělej malé kroky. Po každém kroku věc spusť a ověř, že funguje, než jdeš dál. Když něco spadne, přečti chybu, vysvětli ji lidsky a oprav ji.
- Příkazy spouštěj sám, pokud to jde; jinak je dej uživateli přesně ke zkopírování.
- Verze a příkazy se mění. Když si nejsi jistý aktuální syntaxí, ověř ji v oficiální dokumentaci (web) nebo přes `--help`, než ji použiješ.
- Nikdy nevkládej tajné klíče do kódu ani do gitu. Používej `.env` a přidej ho do `.gitignore`.
- Nezahlcuj. Na konci každé fáze se krátce zeptej, jestli pokračovat.

## Fáze 1: Zjisti, co chce postavit (max 4 otázky, najednou)

1. Co přesně chceš postavit? (jednou větou, pro koho)
2. Jaký máš systém? (macOS / Windows / Linux)
3. Co už umíš? (nic / trochu HTML/JS / Python / jiný jazyk)
4. Omezení: termín, rozpočet na hosting, musí to běžet někde konkrétně?

Ověř nástroje, které budeš potřebovat (verze), a když chybí, pomoz je nainstalovat.

## Fáze 2: Možnosti

Ukaž tuhle tabulku a ke každé řádce jednu větu, pro koho je:

| Framework | Výhody | Nevýhody | Hodí se na |
|---|---|---|---|
| **Next.js** (React) | Největší komunita, frontend i backend v jednom, snadný deploy na Vercel, AI nástroje ho znají nejlépe | Hodně konceptů (server vs. client komponenty), občas složitý | Webové aplikace, SaaS, cokoli s přihlášením a daty |
| **Astro** | Extrémně rychlé statické weby, jednoduché, obsah v Markdownu | Méně vhodné pro hodně interaktivní aplikace | Blogy, dokumentace, prezentační weby, landing page |
| **SvelteKit** | Čistá a krátká syntaxe, rychlé, příjemné učení | Menší ekosystém a méně příkladů | Interaktivní aplikace, když se ti nelíbí React |
| **Vite + React** | Nejjednodušší start, jen frontend, žádná serverová magie | Chybí routing a backend, musíš doplnit sám | Učení Reactu, čistě klientské aplikace, dashboardy |

## Fáze 3: Doporučení

Výchozí doporučení: **Next.js**, protože pokryje web i backend v jednom projektu, má nejvíc návodů a nasazení na Vercel je na pár kliknutí. Výjimky: jde-li hlavně o obsah (blog, prezentace), doporuč **Astro**. Když si uživatel vybere jinak, respektuj to a postup přizpůsob (`npm create astro@latest`, `npx sv create`, `npm create vite@latest`).

## Fáze 4: První projekt (Next.js)

Cíl: jednoduchá aplikace „Seznam úkolů“ se stránkou a malým API.

1. **Prerekvizity**: `node -v` (potřebuješ aktuální LTS, ověř minimum v dokumentaci Next.js), `git --version`. Chybí-li Node, doporuč instalaci z nodejs.org nebo přes `nvm`/`fnm`.
2. **Založ projekt**:
   ```bash
   npx create-next-app@latest moje-appka
   ```
   Přijmi doporučené volby (TypeScript, ESLint, Tailwind, App Router, `src/` dle výchozího nastavení). Vysvětli, co každá volba znamená.
3. **Spusť**: `cd moje-appka && npm run dev`, otevři http://localhost:3000. Ověř, že stránka běží.
4. **Projdi strukturu**: `app/page.tsx` (hlavní stránka), `app/layout.tsx` (společný obal), `public/` (obrázky), `package.json` (skripty a závislosti). Jen tohle, nic víc.
5. **První změna**: přepiš `app/page.tsx` na nadpis a seznam úkolů z pole v kódu. Ulož a ukaž hot reload.
6. **Interaktivita**: vytvoř klientskou komponentu (`"use client"`) s formulářem na přidání úkolu přes `useState`. Vysvětli rozdíl server vs. client komponenta jednou větou.
7. **Malé API**: `app/api/todos/route.ts` s `GET` vracejícím JSON. Ověř v prohlížeči na `/api/todos`.
8. **Kontrola**: `npm run lint` a `npm run build`. Build musí projít, jinak opravit.
9. **Git**: `git init` (pokud ho create-next-app neudělal), první commit, repozitář na GitHubu (`gh repo create` nebo přes web).
10. **Deploy**: na vercel.com „Add New Project“ → import z GitHubu → Deploy (nebo `npx vercel`). Ověř živou URL.

## Fáze 5: Co dál

Nabídni 2–3 další kroky podle cíle: uložení dat do databáze (např. Postgres přes Neon/Supabase), přihlášení (Auth.js / Clerk), komponenty shadcn/ui, testy (Vitest, Playwright).