first minute (30+ dni do startu) - 3%
dostęp do nagrań w razie potrzeby
dla chętnych bezpłatnie warsztaty 
praktyczne ćwiczenia i miniprojekty
poczęstunek w cenie
stanowisko komputerowe w cenie
Intensywny kurs dla programistów JavaScript
TypeScript, React, architektura aplikacji, testy, Next.js i AI
-
Tematyka:TypeScript, Git i GitHub, React z TypeScriptem, Redux Toolkit, testy i Storybook, Next.js, wdrożenie aplikacji, AI w aplikacji
-
Czas trwania:80 godzin zegarowych zajęć na żywo
+ 40 godzin pracy w domu z naszymi
materiałami = w sumie 120 godzin -
Tryby zajęć:
- weekendowo (sob-niedz., średnio co 2 tygodnie)
- dziennie (blok 4-dniowy i dwa 3-dniowe, co ok. 2 tyg.)
-
Grupa:Zajęcia stacjonarne - na sali max 12 osób.
Dla kursów zdalnych - do 17 osób łącznie.
-
Rekrutacja:znajomość podstaw programowania w JavaScript
-
Miejsce:Warszawa lub Zdalnie (online na żywo z trenerem i grupą)
-
Elastyczność:a) do 15 dni przed startem można zrezygnować
b) podczas zajęć można:
- przejść z trybu stacjonarnego na zdalny
- ze zdalnego na stacjonarny
- w razie potrzeby otrzymać nagrania z zajęć
- zawiesić uczestnictwo i dokończyć później
(w miarę dostępności miejsc)
-
Cena:4 990 PLN*
Ten kurs programowania JavaScript przeznaczony jest dla tych, którzy:
- znają już podstawy programowania w JavaScript,
- potrafią samodzielnie pisać programy, niekoniecznie złożone,
- chcą podwyższyć swoje kwalifikacje,
- są ciekawi aktualnych trendów i bieżących, zaawansowanych technologii - jak również nieco "otoczenia" poza "samym" JS.
Często wybierany jako kontynuacja - po ukończeniu "semestru" od podstaw (tzn. kursu Frontend Developer). Przy czym nie jest to konieczne - serdecznie zapraszamy również wszystkich chętnych, którzy nie byli u nas na pierwszej części. Oczekujemy jedynie znajomości JS. :-)
Najczęściej przychodzą do nas:
- absolwenci naszego kursu podstawowego,
- osoby, które pisały już skrypty na stronach WWW i chcą przejść na React i TypeScript,
- programiści innych języków, którzy dołączają do projektów frontendowych,
- testerzy automatyzujący i osoby z zespołów IT, które chcą rozumieć nowoczesny frontend.
Poznaj lepiej cały ekosystem dzięki zaawansowanemu kursowi JavaScript.
Bycie programistą to więcej niż znajomość wybranego języka. Aplikacje webowe potrzebują zarówno front-endu, jak i back-endu. Dobry programista front-end wie, co dzieje się również "na zapleczu" - i dzięki temu potrafi lepiej implementować warstwę prezentacji.
Przy większych projektach dochodzi konieczność skonfigurowania systemu budowania projektu, a także umiejętność pracy zespołowej przy użyciu Git. Te wszystkie umiejętności odróżniają młodszego programistę od regulara, a ich poznanie bardzo ułatwia pracę - przy bardziej złożonych systemach, ale też nawet w jednoosobowych projektach.
Czego się nauczysz na kursie JavaScript Developer II?
TypeScript i zaawansowany JavaScript
Typy, typowanie danych z API i komponentów, obsługa błędów i kod asynchroniczny – tak, jak pisze się dziś większe aplikacje.
React z TypeScriptem i architektura aplikacji
Komponenty, hooki, formularze, routing, stan aplikacji z Redux Toolkit i podział większej aplikacji SPA na warstwy – od makiety po działający kod.
Testy, Storybook i wdrożenie
Testy komponentów i logiki, dokumentowanie komponentów w Storybooku i wdrożenie aplikacji w internecie.
Next.js i AI w aplikacji
Renderowanie po stronie serwera, komponenty serwerowe i SEO w Next.js oraz funkcje AI w większej aplikacji – z bezpiecznym pośrednikiem do API modelu.
Ten zakres wydaje Ci się za trudny? Chcesz zacząć od podstaw?
Wyszkoliliśmy ponad 7 000 osób w różnych językach programowania – dla wielu z nich nasze kursy są pierwszym krokiem w rozwoju ścieżki kariery.
Trenerzy - wiedza połączona z praktyką
Trener, który będzie prowadził ten kurs to wykładowca i informatyk w jednej osobie. Nasi trenerzy wywodzą się z najlepszych polskich uczelni i od wielu lat wykonują projekty IT dla firm zewnętrznych, organizacji i instytucji publicznych. Na codzień pracują w zawodzie - co daje im możliwość prowadzenia ultra ciekawych zajęć, przepełnionych przykładami z realnych projektów.
którzy umieją dobrze i skutecznie komunikować się z ludźmi. Dzięki temu potrafimy szkolić i przekazywać wiedzę w bardzo przystępny sposób.
którzy IT znają nie tylko w teorii. Cały czas jesteśmy aktywni zawodowo. To siła naszego zespołu.
Zapewniamy go. Nowoczesny sprzęt komputerowy będzie do Twojej dyspozycji podczas kursu. Oprócz motywacji i chęci do nauki nie musisz niczego ze sobą zabierać.
Program szkolenia
- Rynek, aktualne oczekiwania i rola AI we frontendzie
- Obecne oczekiwania wobec front-end developera
- Co jest dziś standardem: JavaScript, TypeScript, React, Git, praca z API, testy, podstawy deployu
- Co się zdeaktualizowało lub zeszło na dalszy plan
- Co jest aktualnie na topie: TypeScript, React, Next.js, Vite, komponentowe UI, testowanie, Storybook, AI-assisted development
- Rola AI w pracy developera
- Ograniczenia AI: halucynacje, bezpieczeństwo, błędy w kodzie, konieczność review
- Omówienie projektu końcowego kursu
- Ćwiczenie I: analiza przykładowej oferty pracy frontendowej i mapowanie wymagań na tematy kursu.
- Node.js, npm, edytor z AI i workflow projektowy
- Node.js jako środowisko narzędziowe dla frontendu
- Menedżer npm, package.json, skrypty projektowe
- Instalacja zależności
- Vite jako środowisko projektowe
- Zmienne środowiskowe i pliki .env
- Konfiguracja edytora z asystentem AI (np. Cursor) do pracy z projektem
- Podstawowa struktura projektu frontendowego
- Konfiguracja ESLint i Prettier
- Ćwiczenie II: utworzenie projektu React/Vite, konfiguracja edytora z AI i podstawowego workflow developerskiego.
- Git, GitHub i praca projektowa
- Instalacja i konfiguracja Git
- Repozytorium lokalne i zdalne
- Polecenia commit, branch, merge, pull, push
- Praca na branchach
- Pull request – idea i uproszczony workflow
- Rozwiązywanie prostych konfliktów przy łączeniu gałęzi
- README projektu
- Dobre praktyki commitowania
- Ćwiczenie III: założenie repozytorium, pierwszy branch, prosty pull request i rozwiązanie konfliktu.
- Zaawansowany JavaScript
- Obsługa błędów: try/catch, throw, własne błędy
- Callbacki i callback hell
- Promises
- Składnia async/await
- Promise.all, Promise.allSettled
- Event loop – koncepcyjnie i praktycznie
- Mikro- i makro-zadania
- Moduły ES: import/export
- Organizacja kodu w modułach
- Praktyczne wzorce pracy z kodem asynchronicznym
- Ćwiczenie IV: refaktoryzacja kodu z callbacków do Promise i async/await.
- TypeScript w aplikacjach frontendowych
- Po co TypeScript w większych aplikacjach frontendowych
- Różnice między JavaScript i TypeScript
- Typy podstawowe
- Typowanie zmiennych
- Typowanie funkcji: parametry i wartości zwracane
- Typowanie tablic i obiektów
- Typy: type vs interface
- Union types
- Literal types
- Optional properties
- Type narrowing – zawężanie typów
- Type guards
- Generics – podstawy
- Utility types: Pick, Omit, Partial, Record
- Typowanie danych z API
- Typowanie propsów komponentów React
- Dobre praktyki pracy z TypeScriptem w projekcie frontendowym
- Ćwiczenie V: przygotowanie typów dla modeli danych aplikacji oraz typowanie funkcji i komponentów.
- Komunikacja client-server i bezpieczeństwo
- REST API w praktyce
- Metody HTTP, statusy, nagłówki
- JSON i struktury odpowiedzi API
- Obsługa błędów API
- Uwierzytelnianie i autoryzacja – koncepcyjnie
- Tokeny, sesje, JWT – podstawy
- Przechowywanie tokenów – ryzyka i dobre praktyki
- CORS – koncepcyjnie
- Mock backend / fake API
- Krótkie omówienie GraphQL i WebSockets: kiedy się ich używa, bez głębokiego wdrożenia
- Ćwiczenie VI: połączenie aplikacji z mock API i przygotowanie prostego przepływu logowania/autoryzacji.
- React z TypeScriptem – komponenty, state i hooks
- Myślenie komponentowe
- JSX i renderowanie UI
- Props i typowanie propsów
- Renderowanie warunkowe
- Renderowanie list
- Obsługa zdarzeń
- State komponentu
- Aktualizacja obiektów i tablic w stanie
- Formularze kontrolowane
- Lifting state up
- Kompozycja komponentów
- Context API – kiedy wystarczy, a kiedy lepszy jest Redux Toolkit
- Hook useEffect i synchronizacja z zewnętrznymi systemami
- Hook useRef
- Custom hooks
- Organizacja komponentów w większej aplikacji
- Ćwiczenie VII: zbudowanie bazowych komponentów aplikacji w React + TypeScript.
- Analiza wymagań, Atomic Design i dekompozycja UI
- Definiowanie wymagań aplikacji
- User stories
- Analiza widoków i przepływów użytkownika
- Podstawy pracy z makietą
- Przejście od makiety do komponentów
- Wprowadzenie do Atomic Design
- Atomy, molekuły, organizmy, template’y/widoki
- Dekompozycja komponentowa na podstawie mockupów
- Uwzględnianie accessibility i WCAG na etapie projektowania UI
- Przygotowanie backlogu / listy zadań na bazie user stories
- Ćwiczenie VIII: analiza wymagań, praca z makietą i dekompozycja UI zgodnie z Atomic Design.
- Architektura aplikacji SPA
- Projektowanie struktury folderów
- Podział aplikacji na warstwy: UI, logika, API, routing, stan
- Routing aplikacji
- Organizacja komponentów, widoków i modułów
- Separacja logiki biznesowej od warstwy prezentacyjnej
- Organizacja komunikacji z API
- Obsługa stanów aplikacji: loading, error, success
- Przygotowanie aplikacji pod dalszą rozbudowę
- Planowanie implementacji większej funkcjonalności
- Ćwiczenie IX: zaprojektowanie architektury aplikacji SPA i przygotowanie struktury projektu.
- Stan aplikacji, Redux Toolkit i integracja z API
- Local state vs global state
- Kiedy globalny store ma sens
- Redux Toolkit – idea i podstawy
- Store
- Slices
- Actions i reducers
- Typowanie Redux Toolkit w TypeScript
- Asynchroniczna komunikacja z API
- Loading/error/success state
- Autoryzowane zapytania do API
- Organizacja logiki aplikacji
- Ćwiczenie X: dodanie globalnego stanu i integracji z API do aplikacji SPA.
- AI w zaawansowanej aplikacji frontendowej
- Jak działają LLM API: klucze, endpointy, format żądań
- Bezpieczne korzystanie z kluczy API
- Backend/proxy/serverless jako pośrednik między frontendem a LLM API
- Łączenie z API wybranego dostawcy modeli, np. OpenAI
- Wysyłanie wiadomości i odbieranie odpowiedzi
- Przekazywanie kontekstu aplikacji do modelu
- Streaming odpowiedzi: ReadableStream, efekt pisania w UI
- Przechowywanie historii konwersacji w JS – tablica messages
- Obsługa stanów: loading, error, success
- Dodanie funkcji AI do budowanej aplikacji SPA
- Ćwiczenie XI: dodanie funkcji AI do aplikacji, np. generatora opisu, podsumowania, sugestii lub asystenta kontekstowego.
- Storybook i dokumentowanie UI
- Po co dokumentować komponenty wizualnie
- Wprowadzenie do Storybooka
- Stories dla komponentów
- Warianty komponentów
- Dokumentowanie propsów i stanów komponentów
- Komponenty w izolacji
- Dokumentowanie komponentów powstałych dla funkcji AI
- Storybook jako narzędzie komunikacji w zespole
- Ćwiczenie XII: przygotowanie Storybooka dla wybranych komponentów aplikacji.
- Testowanie aplikacji frontendowej
- Po co testować frontend
- Testy jednostkowe logiki JS/TS
- Testy komponentów React
- React Testing Library – podstawy
- Mockowanie API
- Testowanie loading/error/success state
- Testowanie wybranej logiki funkcji AI
- Testy E2E – koncepcyjnie
- Playwright/Cypress – krótkie omówienie
- Co testować, a czego nie testować
- Ćwiczenie XIII: napisanie podstawowych testów dla logiki, komponentu i wybranego przepływu użytkownika.
- Wdrożenie aplikacji na Netlify
- Build aplikacji
- Zmienne środowiskowe na produkcji
- Deploy aplikacji SPA na Netlify
- Konfiguracja projektu po stronie Netlify
- Obsługa routingu SPA po wdrożeniu
- Typowe problemy po deployu
- Sprawdzenie działania aplikacji produkcyjnej
- Ćwiczenie XIV: wdrożenie aplikacji na Netlify.
- Next.js – SSR, hydratacja i prosty projekt
- Czym Next.js różni się od klasycznej aplikacji React SPA
- Routing w Next.js
- Client-side rendering vs server-side rendering
- SSR
- SSG – krótkie omówienie
- Hydratacja – o co chodzi i dlaczego ma znaczenie
- Server Components – koncepcyjnie
- Client Components
- Fetchowanie danych w Next.js
- Layouty
- SEO w aplikacjach renderowanych po stronie serwera
- Metadane, struktura treści i wpływ renderowania na indeksowanie
- Jamstack i headless CMS – krótkie omówienie
- Prosty projekt w Next.js
- Kiedy wybrać klasyczne SPA, a kiedy Next.js
- Ćwiczenie XV: stworzenie prostego projektu Next.js z routingiem i pobieraniem danych.
