Akt I — Zanim dotkniemy kodu

Omówienie i filmy

Wprowadzenie do szkolenia, omówienie projektu treningowego, podstawowa konfiguracja środowiska pracy (VS Code i Claude Code), podstawy pracy z Claude Code w terminalu, projektowanie pod wdrażanie z Figmą MCP (/figma-use)


1.0: Przedsłowie i uwagi techniczne


1.1 Wprowadzenie i omówienie projektu treningowego

1.2 Konfiguracja środowiska

1.3 Aktualizacja: 1M context window

1.3: Podstawy pracy z Claude Code w terminalu

Załączniki

Akt II — Nasza pierwsza apka

Omówienie i filmy

Instalacja zależności, implementacja projektu z Figmy przy użyciu pluginów Superpowers i Figma, omówienie CLAUDE.md, reguł, skilli i pluginów.

2.1 Instalacja Node.js, command lines i pluginów w CC

2.2 Pierwsza implementacja z Superpowers i Figma MCP

2.3 Tworzymy nasz własny status line

2.4 Kontekst, CLAUDE.md, reguły, skille i pluginy

2.5 Szybki spacer po plikach i folderach

2.6 Planowanie pracy i praca z Tailwindem (ESLint)

2.7 Extension CC do VS Code, /advisor, nowe variable

2.8 Wprowadzenie do commitów

2.9 Aktualizacja: Komenda /simplify

2.9 Claude na co dzień i komenda /simplify

2.10: Praca ze screenshotami

2.11: Sprzątanie komponentów

Załączniki

Akt III — Już nie “junior”

Omówienie i filmy

3.1: Projektujemy nowy ficzer

3.2: Git i GitHub + konfiguracja GitHub'a w VS Code

3.3: Co to GitHub CLI i czemu jest super

3.4: Tworzymy branch i implementujemy nowy ficzer

3.5: Aktualizujemy plik CLAUDE.md ze skillem

3.6: Tworzymy PR i robimy code review

BONUS: Code review dla chętnych (Greptile)

3.7: Merge'ujemy nasz PR i poznajemy rodzaje merge'ów

3.8: Lukrowanie z (Framer) Motion

3.9: Lukrujemy z Git hookami (pre-push)

3.10: Nasz pierwszy ENV

Załączniki

Akt IV — Żyję w internecie

Omówienie i filmy

4.1: Vercel, czyli żegnaj "localhost:3000"

4.2: Podglądy z Vercelem

Załączniki

Akt V — Twoje pięć minut

Omówienie i filmy

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" />

To jest część interaktywna kursu, którą planujemy przerobić na designowym hackathon niedługo. Więcej informacji niebawem!

tonik.com (@wearetonik) • Instagram profile

</aside>

Akt VI — Yankee swap

Omówienie i filmy

6.1: Klonowanie repo i odnajdywanie się w nowej bazie ko

6.2 Podsumowanie

Załączniki

https://github.com/toiletgranny/tonik-parking-spot-booking

<aside> <img src="/icons/username_gray.svg" alt="/icons/username_gray.svg" width="40px" />

Pytania? Feedback? Przemyślenia?

:slack: Dołącz do kanału #pl-claude-pd-course na Tonik Social Club → https://join.slack.com/t/toniksocialclub/shared_invite/zt-437p6dz9f-k33Je4S1sftbcCfXWHl9Ag

✉️ Wyślij wiadomość na → [email protected]

</aside>

Linki

<aside> <img src="/icons/safety-pin_gray.svg" alt="/icons/safety-pin_gray.svg" width="40px" />

Załączniki


<aside> <img src="/icons/username_gray.svg" alt="/icons/username_gray.svg" width="40px" />

</aside>