Zbuduj aplikację AI, którą znajomi rozwiążą jak challenge

Cel modułu: Rozumiesz, co zbudujesz, widzisz pełne demo i masz działające środowisko.

W tym module

1. 1.1Demo gotowej aplikacji - Pokaz od A do Z: stworzenie quizu, publiczny link, rozwiązanie, leaderboard i feedback AI.
2. 1.2Setup i terminal - Node, npm, edytor i podstawy terminala - uruchamiasz projekt lokalnie bez strachu przed czarnym oknem.
3. 1.3Git i GitHub od podstaw - Repozytorium, commity, .gitignore i wypychanie kodu na GitHub - projekt jest bezpieczny i od pierwszego dnia gotowy do portfolio.
4. 1.4Jak korzystać z Cursora w kursie - Jak promptować, jak weryfikować kod od AI i kiedy mu nie ufać. AI pomaga, ale to Ty rozumiesz każdą linijkę.

Cel modułu: Rozumiesz architekturę: klient, serwer, baza, AI - i dlaczego nie wszystko dzieje się w przeglądarce.

W tym module

1. 2.1Mapa aplikacji - Co robi frontend, co backend, co baza i w którym miejscu wchodzi AI - pełny obraz, zanim napiszesz pierwszą linijkę.
2. 2.2Jak komunikuje się web: HTTP i REST - Request i response, metody GET/POST, status code i JSON - wspólny język frontu i backendu, którego użyjesz w każdym endpointcie projektu.
3. 2.3Przepływ danych w naszej apce - Twórca → AI → baza → publiczny quiz → ocena na serwerze → attempts → leaderboard. Widzisz, którędy i dlaczego wędrują dane.
4. 2.4Zakres MVP i decyzje projektowe - Co budujemy, czego świadomie nie budujemy i dlaczego - myślenie o zakresie to umiejętność, nie skrót.

Cel modułu: Poznajesz podstawy Vue i budujesz pierwszy działający ekran: formularz tworzenia quizu ze stanami loading/error.

W tym module

1. 3.1Podstawy Vue - Komponent, template, reaktywność (ref/reactive) i wiązanie danych (v-model) - podstawy Vue, których realnie używasz w całym projekcie, wyjaśnione od zera dla osoby znającej czysty JavaScript.
2. 3.2Jak Nuxt renderuje: SSR, CSR i universal rendering - Co dzieje się na serwerze, co w przeglądarce, czym jest hydration i dlaczego Nuxt domyślnie renderuje uniwersalnie. Rozumiesz różnicę między SSR a CSR i kiedy która ma sens - to wiedza, która zostaje z Tobą poza tym projektem.
3. 3.3Struktura projektu Nuxt - Jak Nuxt organizuje kod (pages, components, server, composables) i dlaczego akurat tak - żebyś wiedział, gdzie co trafia, także w kolejnych aplikacjach.
4. 3.4Formularz kreatora (na danych testowych) - Budujesz formularz tworzenia quizu (temat, poziom, liczba pytań) z v-model i walidacją, na razie na statycznym quizie - dopracowujesz UI, zanim podłączysz AI.
5. 3.5Stany UI - Loading, error, zablokowany przycisk i czytelne komunikaty - obsługa stanów, o której początkujący zwykle zapominają.

Cel modułu: Tworzysz server route, ogarniasz async/await i rozumiesz, dlaczego klucz AI nie może trafić do frontendu.

W tym module

1. 4.1Server routes / Nitro - Pierwszy endpoint POST i odczyt danych z żądania (readBody).
2. 4.2.env i runtimeConfig - Sekrety po stronie serwera, bez publicznych prefiksów.
3. 4.3async/await i fetch w praktyce - Jak działa Promise, po co await i jak pobrać dane przez fetch - fundament każdego wywołania API, którego użyjesz w całym projekcie.
4. 4.4Pierwsze wywołanie modelu - Wywołujesz model AI z backendu i oglądasz surową odpowiedź - punkt wyjścia, zanim w kolejnym module zamienisz ją w ustrukturyzowane dane.
5. 4.5Obsługa błędów i debugging - Co pokazać użytkownikowi, gdy API nie odpowiada - oraz jak nie panikować przy czerwonym logu: czytasz stack trace i sprawdzasz zakładkę Network w DevTools.

Cel modułu: Zamieniasz odpowiedź AI w przewidywalne dane, które aplikacja bezpiecznie zapisze i wyrenderuje.

W tym module

1. 5.1Schemat quizu w Zod - Pytanie, odpowiedzi, poprawna odpowiedź, wyjaśnienie i tag kompetencji.
2. 5.2Typy w praktyce (TypeScript z Zod) - Ze schematu Zod dostajesz gotowe typy TypeScript - modelujesz kształt danych raz i masz podpowiedzi oraz bezpieczeństwo typów w całym projekcie. Praktyczny TS dokładnie tam, gdzie realnie pomaga.
3. 5.3generateObject - Model zwraca obiekt zgodny ze schematem, nie luźny tekst.
4. 5.4Walidacja i model „retry” - Co robić, gdy AI zwróci niepoprawny format.
5. 5.5Podgląd quizu (render przez v-for) - Iterujesz po tablicy pytań (.map / v-for), renderujesz je w UI i przygotowujesz do zapisu w bazie.

Cel modułu: Dodajesz bazę, zapisujesz challenge i tworzysz publiczną stronę /c/[slug].

W tym module

1. 6.1Dobór bazy pod projekt (Supabase w chmurze) - Postgres na Supabase, w chmurze od początku. Projektujesz dwie tabele i rozumiesz, dlaczego na tym etapie świadomie nie dokładasz auth ani ORM-a - to decyzja architektoniczna, nie uproszczenie.
2. 6.2Model challenges - Slug, temat, poziom, pytania jako JSON (JSON.stringify przy zapisie, parse przy odczycie), data utworzenia.
3. 6.3Zapis challenge’u i kopiowanie linku - Po wygenerowaniu quizu zapisujemy go, tworzymy publiczny slug i dajemy przycisk „skopiuj link” - ten, który aż chce się od razu wysłać znajomym.
4. 6.4Dynamiczna strona quizu - Routing /c/[slug], pobranie quizu po stronie serwera (useFetch) i ukrycie poprawnych odpowiedzi przed przeglądarką - łączysz tu rendering z bezpieczeństwem danych.

Cel modułu: Budujesz flow gracza i uczysz się, dlaczego scoring musi dziać się po stronie serwera.

W tym module

1. 7.1Formularz gracza - Nick, przechodzenie przez pytania, zapisywanie wyborów i pomiar czasu.
2. 7.2Endpoint submit-attempt - Frontend wysyła odpowiedzi, ale nie zna poprawnych. Walidujesz input i zabezpieczasz endpoint przed nadużyciami.
3. 7.3Ocena po stronie serwera - Serwer pobiera challenge z bazy i liczy wynik - iterujesz po odpowiedziach metodami tablic (.map / .filter / .find) i porównujesz z poprawnymi.
4. 7.4Zapis podejścia - Nick, wynik, czas, odpowiedzi i data w tabeli attempts.
5. 7.5Ekran wyniku - Punkty, czas i krótkie podsumowanie podejścia.

Cel modułu: Kończysz produkt: ranking, feedback AI po podejściu i CTA zamieniające gracza w twórcę.

W tym module

1. 8.1Leaderboard - Sortowanie po wyniku malejąco i czasie rosnąco, top podejścia dla challenge’u.
2. 8.2Drugie wywołanie AI - Feedback po podejściu: mocne strony, luki, co powtórzyć, jedno ćwiczenie.
3. 8.3Feedback jako dane (Zod) - Schemat feedbacku, żeby UI było przewidywalne.
4. 8.4CTA: gracz → twórca - Przycisk „Stwórz własny challenge” i logika pętli wiralowej.

Cel modułu: Wdrażasz działające MVP na produkcję - masz publiczny adres, który możesz wysłać komukolwiek.

W tym module

1. 9.1Deploy na Vercel - Wypychasz aplikację na produkcję, ustawiasz produkcyjne zmienne środowiskowe (klucz AI, URL bazy) i robisz test na żywo.
2. 9.2Test na produkcji - Przechodzisz cały flow na wdrożonej wersji: tworzysz quiz, wysyłasz link, rozwiązujesz i sprawdzasz leaderboard - tak jak zrobi to użytkownik.

Cel modułu: Dopracowujesz wygląd i odczucia z aplikacji, żeby wyglądała na skończony produkt, nie prototyp.

W tym module

1. R1.1Puste i skrajne stany - Brak podejść, brak wyników, długie nazwy - projektujesz to, o czym łatwo zapomnieć, gdy „u mnie działa”.
2. R1.2Mikrodopracowania UI - Spójne odstępy, focus, czytelne komunikaty i drobne animacje, które robią różnicę w odbiorze.
3. R1.3Podstawy dostępności - Kontrast, obsługa klawiatury i sensowne etykiety - produkt działa dla większej liczby osób.

Cel modułu: Porządkujesz projekt i uczysz się, gdzie abstrakcja realnie pomaga, a gdzie tylko komplikuje kod.

W tym module

1. R2.1Wydzielanie komponentów - Rozbijasz duże widoki na mniejsze, wielokrotnego użytku kawałki - bez zmiany działania.
2. R2.2Helpery i composables - Powtarzającą się logikę przenosisz w jedno miejsce, żeby łatwiej ją utrzymać i testować.
3. R2.3Czytelność i nazewnictwo - Nazwy, struktura plików i formatowanie (Prettier/ESLint), po których wrócisz do kodu za miesiąc bez bólu.

Cel modułu: Pakujesz projekt tak, żeby robił wrażenie w portfolio i na rozmowie o pracę.

W tym module

1. R3.1README, które sprzedaje projekt - Opis, funkcje, stack, zrzuty i link do demo - tak, żeby ktoś w 30 sekund zrozumiał, co zbudowałeś.
2. R3.2Opis do portfolio i CV - Jak opisać ten projekt jednym akapitem i punktami, podkreślając decyzje i umiejętności, nie tylko technologie.

Cel modułu: Feedback AI pojawia się słowo po słowie - efekt „na żywo”, którego nie było w MVP.

W tym module

1. R4.1Streaming odpowiedzi z serwera - Jak przesyłać odpowiedź modelu kawałkami i renderować ją na bieżąco w interfejsie.
2. R4.2Stany i płynność - Obsługa trwającego strumienia, zakończenia i błędu - żeby efekt był dopracowany, a nie migający.

Cel modułu: Rozbudowujesz generator: nowe typy pytań i mocniejszy, bardziej sterowalny prompt.

W tym module

1. R5.1Nowe typy pytań - Rozszerzasz schemat Zod o kolejny typ (np. prawda/fałsz albo wielokrotny wybór) i obsługujesz go w UI oraz w ocenie.
2. R5.2Inżynieria promptu - Jak formułować i wersjonować prompt, żeby pytania były trudniejsze do „oszukania” i lepiej trzymały poziom.
3. R5.3Kontrola jakości generacji - Proste sprawdzenia po stronie kodu, które odsiewają słabe pytania, zanim trafią do gracza.

Cel modułu: Dostajesz mapę rozbudowy: konta, historia, płatności, anti-cheat - i wiesz, jak się do nich zabrać.

W tym module

1. R6.1Kierunki rozwoju - Logowanie i konta, historia podejść, adaptive learning, płatności, anti-cheat - przegląd z oceną trudności.
2. R6.2Jak dokładać funkcje bezpiecznie - Praca na branchach, małe kroki i checkpointy - ta sama metoda, którą znasz z kursu, przy dalszym rozwoju.