Weboldal Claude Code-dal – lépésről lépésre

Mit kapsz a végére?

• Egy gyors, mobilbarát weboldalt (React + Tailwind), amelynek minden sora a tiéd – nincs bezárva egy szerkesztő felületébe.
• Adatbázist és belépést a Supabase segítségével (pl. kapcsolatűrlap, foglalás, ügyfélfiók).
• Automatikus közzétételt: ha módosítasz valamit, pár perc múlva élesben is ott van.
• Saját domaint (pl. viragbolt.hu) SSL-tanúsítvánnyal, vagyis lakatos, biztonságos címmel.

Programozni nem kell tudnod. A Claude Code egy parancssorban (terminálban) futó AI-asszisztens: magyarul leírod neki, mit szeretnél, ő pedig megtervezi, megírja, lefuttatja és kijavítja a kódot. A te dolgod a döntés és az ellenőrzés – ezt fogjuk lépésről lépésre gyakorolni.

Az architektúra egy képen

Miért jó ez a felállás? Mert minden darab cserélhető. Ha egyszer más tárhelyre költöznél, a kód és a domain veled jön. Ha másik AI-eszközt használnál, a projekt akkor is egy teljesen szabványos mappa marad.

Mennyibe kerül?

Hogyan használd a tanfolyamot?

1. Haladj sorban – minden modul az előzőre épít. Az első három modul ingyenes, ezekkel már működő weboldalad lesz a saját gépeden.
2. A szürke dobozokban lévő parancsokat és promptokat a Másolás gombbal másold ki, és illeszd be a terminálba vagy a Claude Code-ba.
3. Ha valami nem úgy néz ki, mint a képen, ne ijedj meg: a programok felülete időnként változik. Írd le Claude-nak, mit látsz – ő segít.

Amire szükséged lesz

• Windows 10 vagy 11, stabil internet
• Egy Claude-előfizetés (Pro vagy Max) – ezzel lépsz be a Claude Code-ba
• Egy ingyenes GitHub-fiók
• Kb. 5 GB szabad hely (Node.js, csomagok, projektek)

1. Git for Windows (ajánlott)

A Git a verziókezelő: minden mentett állapotot megjegyez, így bármikor vissza tudsz lépni. A Claude Code Windowson a Git mellé telepített Git Bash-t is szívesen használja a parancsok futtatásához, ezért érdemes elsőként ezt felrakni.

1. Nyiss egy PowerShell-ablakot, és futtasd az alábbi parancsot (a winget a Windows beépített programtelepítője):

2. Ha nincs winget a gépeden, töltsd le a telepítőt a git-scm.com oldalról, és kattints végig az alapbeállításokkal.
3. Zárd be, majd nyisd meg újra a terminált, és ellenőrizd: git --version – egy verziószámot kell kiírnia.
4. Add meg a nevedet és e-mail-címedet (ez kerül a mentésekre):

2. Node.js (a weboldal futtatásához)

A modern weboldalak építőeszközei Node.js-en futnak. Ez adja az npm parancsot is, amivel a csomagokat telepíted és az előnézetet indítod.

1. Telepítsd a hosszú távon támogatott (LTS) verziót:

2. Nyiss új terminált, és ellenőrizd: node -v és npm -v.

3. A Claude Code telepítése

1. Futtasd a hivatalos telepítőt PowerShellben:

2. Várd meg a „telepítve” üzenetet, majd nyiss új terminált (a régi még nem ismeri az új parancsot).
3. Ellenőrizd: claude --version. Ha azt írja, hogy a parancs ismeretlen, indítsd újra a gépet, vagy futtasd a telepítőt még egyszer.
4. Ha bármi gyanús, a claude doctor parancs átvizsgálja a telepítést, és megmondja, mi hiányzik.

4. Előfizetés

Az előfizetést a claude.ai oldalon, a fiókbeállításokban intézed. A csomagokhoz időszakos használati keret tartozik – ha elfogy, pár óra múlva újratöltődik. Hogy hol tartasz, azt a Claude Code-ban a /usage paranccsal nézheted meg.

5. Első indítás és bejelentkezés

1. Írd be a terminálba: claude
2. Válassz színtémát (a sötét a legkíméletesebb a szemnek) – nyilakkal mozogsz, Enterrel választasz.
3. A bejelentkezési módnál válaszd a Claude-fiókkal (előfizetéssel) történő belépést.
4. Megnyílik a böngésző: lépj be, és engedélyezd a hozzáférést. Utána térj vissza a terminálba – látnod kell az üdvözlő képernyőt.
5. Kilépni a /exit paranccsal vagy kétszer Ctrl+C-vel tudsz.

6. GitHub-fiók + GitHub Desktop vagy gh CLI

1. Regisztrálj a github.com oldalon, és kapcsold be a kétlépcsős azonosítást (Settings → Password and authentication).
2. Válassz, hogyan kezeled a GitHubot a gépedről (akár mindkettő mehet):

A gh CLI bejelentkezése:

3. A kérdéseknél válaszd: GitHub.com → HTTPS → „Login with a web browser”.
4. Másold ki a kijelzett egyszer használatos kódot, a böngészőben illeszd be, és engedélyezd.
5. Ellenőrzés: gh auth status – ha „Logged in” szerepel, kész vagy.

1. Projektmappa és indítás

1. Hozz létre egy mappát a projekteknek, és azon belül egyet a weboldalnak. Kerüld a szóközt és az ékezeteket a mappanévben:

2. Az első indításnál Claude megkérdezi, megbízol-e ebben a mappában. Mivel te hoztad létre, válaszd az igent.

2. /init és a CLAUDE.md – a projekt „emlékezete”

A CLAUDE.md egy sima szövegfájl a projekt gyökerében. Claude minden munkamenet elején elolvassa, így nem kell újra és újra elmondanod a szabályaidat. A /init parancs automatikusan létrehozza és kitölti a projekt alapján.

1. A Claude Code-ban írd be: /init – üres mappánál a fájl még rövid lesz, ez rendben van.
2. Kérd meg, hogy vegye fel a házirendedet:

3. Amikor a weboldal már elkészült (a modul végén), futtasd újra a /init-et – ekkor már a valódi szerkezetet is leírja.

3. Jogosultsági módok (Shift+Tab)

Claude fájlokat ír és parancsokat futtat a gépeden. Hogy ezt mennyire önállóan teszi, azt a jogosultsági mód dönti el. A Shift+Tab billentyűkkel lépkedsz köztük; az aktuális mód neve a beviteli sor alatt látszik.

Terv módban is indíthatod a programot: claude --permission-mode plan. Ha nálad nem jelenik meg az auto mód (a csomagtól és a szervezeti beállításoktól függ), az sem baj – a kézi és a terv mód mindenhol elérhető.

4. Az első építés terv módban

1. Nyomd a Shift+Tab-ot, amíg a sor alatt a terv mód felirat meg nem jelenik.
2. Másold be az alábbi promptot (a saját vállalkozásodra szabva):

3. Olvasd át a tervet. Ha valami hiányzik, írd meg („a kapcsolat szekcióba kérek térképhelyet is”), és kérj új tervet.
4. Ha rendben van, hagyd jóvá. Claude létrehozza a projektet, telepíti a csomagokat, és megírja az oldalt – ez néhány percig tart.

5. Előnézet: npm run dev

1. Nyiss egy második PowerShell-ablakot ugyanabban a mappában (cd D:\Projektek\viragbolt), hogy a Claude-os ablak szabad maradjon.
2. Indítsd el a fejlesztői szervert:

3. Nyisd meg a kiírt címet a böngészőben (általában http://localhost:5173). Amíg fut, minden módosítás azonnal frissül.
4. Leállítás: Ctrl+C ebben az ablakban.

6. Ellenőrzés telefon-szélességen

1. A böngészőben nyomd meg az F12-t, majd a Ctrl+Shift+M-et (eszköznézet).
2. Állítsd a szélességet 375 px-re. Görgesd végig: nincs-e vízszintes görgetés, levágott szöveg, túl apró gomb.
3. Saját telefonon is megnézheted: indítsd a szervert így: npm run dev -- --host, és a telefonon (ugyanazon a wifin) nyisd meg a kiírt „Network” címet.
4. Ha hibát látsz, írd le Claude-nak pontosan: „375 px-en a csokrok kártyái kilógnak jobbra, tedd őket egymás alá”.

7. Bónusz: sablon az Affilion Motion könyvtárból (MCP)

Az MCP egy „csatlakozó”, amellyel Claude külső eszközöket érhet el. Az Affilion Motion MCP-szerverén keresztül a teljes magyar sablonkönyvtárban tud keresni, és a kiválasztott sablon építési promptját maga olvassa ki.

1. Lépj ki a Claude Code-ból (/exit), és futtasd a terminálban:

2. Indítsd újra: claude, és írd be: /mcp – az affilion-motion szervernek „connected” állapotban kell lennie.
3. Kérj tőle sablont: