Starter Kit
React Lab Starter Kit
Progetto didattico in Docker: JWT end-to-end, dashboard che verifica la sessione e playground React/JS—non un template enterprise, un laboratorio lineare.
Pensato per studenti e junior: stessa base API e stesso token per le aree protette. Dopo il login memorizzi il JWT nel browser, chiami endpoint protetti con Bearer e gestisci logout o token invalido. Dashboard e Playground sono due modi diversi di esercitarsi sullo stesso “ponte” frontend–backend. Per studio in locale con Docker Compose; non come punto di partenza per produzione. Dopo l’acquisto ricevi lo ZIP con README, FAQ, variabili d’ambiente e credenziali di esempio.
Stack e livello
Cosa fa e cosa include
Di seguito il contenuto previsto nel pacchetto: è il risultato concreto che ottieni, non la guida passo-passo (quella è nel README nello ZIP).
- Struttura `web` (Next.js) e `api` (Express) collegati da variabili d’ambiente (es. `NEXT_PUBLIC_API_BASE_URL`)
- Autenticazione JWT: login, token in localStorage, richieste protette con header `Authorization: Bearer …`
- Dashboard: verifica sessione, chiamata protetta `/api/v1/me`, `/health`, gestione token non valido o scaduto, logout
- Playground (dopo login): mini-lab React (`useState`, `useEffect`, `useMemo`), Function Runner, Type Inspector
- MongoDB 7 via Docker; credenziali di esempio documentate nel README dello ZIP
- Docker Compose per alzare frontend, API e database in locale
- README e FAQ nello ZIP (incluso avviso sul Function Runner: adatto a aula/locale, non da esporre in produzione)
Laboratorio didattico: l’obiettivo è vedere chiaramente auth JWT, chiamate API e stato in React—non clonare un’architettura enterprise. Dettagli operativi, porte e troubleshooting restano nel README nello ZIP.
Come leggerlo (studenti / junior)
Leggi il progetto come una pipeline semplice: fai login, ricevi un JWT, salvi il token nel browser (localStorage), lo usi per chiamare endpoint protetti; se il token manca o non è più valido, torni al login. Dashboard e Playground sono due esercizi pratici sullo stesso meccanismo di autenticazione.
Dashboard (cosa insegna davvero)
La dashboard è la pagina “verifica sessione + stato backend”: controlla che il ponte auth tra browser e API funzioni prima di passare agli esperimenti nel Playground.
Obiettivo didattico
- Capire come il frontend controlla se sei autenticato
- Vedere una chiamata protetta (`/api/v1/me`)
- Vedere una chiamata pubblica (`/health`)
- Gestire logout e sessione invalida
Flusso mentale passo-passo
- Apri `/dashboard`: la pagina cerca il token nel browser
- Se non c’è, redirect immediato a `/login` (non ha senso chiamare API protette senza credenziali)
- Se c’è, richiesta a `/api/v1/me` con header `Authorization: Bearer …`
- Se la risposta è valida, mostra i dati utente
- Poi chiama `/health` e mostra lo stato dell’API
- Se qualcosa fallisce (token non valido o scaduto), rimuove il token e rimanda al login
Cosa impari qui
- Differenza tra “utente loggato nel browser” e “token accettato dal server”
- Gestione base di stati UI: loading, errore, successo
- Pattern minimo di logout: elimina token e redirect
Playground (cosa insegna davvero)
Laboratorio in tre moduli, sempre dietro login: allenare React di base, sperimentare JS con input/output reale e ragionare sui tipi.
Sezione 1: React mini-lab
Cosa impari: ciclo di render, stato locale, effetti collaterali, memoization.
- Contatore con `useState`
- Input testuale con echo live
- Lista dinamica con add/clear e rendering con `map`
- Orologio con `useEffect` e cleanup
- Valore “pesante” con `useMemo` per intuire la memoization
Sezione 2: Function Runner
Cosa impari: parsing JSON e gestione errori, funzioni piccole su input, `fetch` controllato con helper (`ctx.fetchJson`), debug rapido con output e stack.
- Scelta di un template (somma, stringhe, array, oggetti, health API)
- Input JSON, codice JS, Run: vedi log (`ctx.log`), output finale ed errori di parsing/runtime
Punto didattico importante (come nel README): l’esecuzione usa `new Function`—ottimo in aula o in locale per imparare, non va esposta così com’è in produzione.
Sezione 3: Type Inspector
Cosa impari: differenze pratiche tra tipi JS che spesso confondono all’inizio (es. `object` vs `null`, array, ecc.).
- Inserisci JSON e ottieni metadati sul tipo (`typeof`, array/null, tag degli oggetti)
Collegamento tra Dashboard e Playground
Entrambe richiedono login e token valido; entrambe usano la stessa base API (`NEXT_PUBLIC_API_BASE_URL`, con fallback tipico a localhost). Se rompi il contratto auth (`Authorization: Bearer …`), smettono di funzionare entrambe.
In sintesi: la Dashboard verifica che il ponte frontend–backend–auth sia a posto; il Playground usa quel ponte per esercizi React/JS in sicurezza sul tuo PC.
Messaggio chiave per chi inizia
Il progetto non punta alla perfezione enterprise: mostra in modo lineare i mattoni di una web app moderna—autenticazione JWT lato client e server, chiamate API protette, gestione sessione nel frontend, basi solide di React e debugging.
Stack tecnologico
- Frontend: Next.js 14 e React 18 (`web/package.json`).
- Backend: Express, Mongoose, JWT, bcryptjs, cors, dotenv (`api/package.json`).
- Database: MongoDB 7 (Docker).
- Dev tooling: nodemon lato API; configurazione Next minimale (`web/next.config.js`).
Per un percorso passo-passo (ordine degli esercizi, cosa provare su Dashboard e su Playground), usa il README nello ZIP insieme a questa sezione.
Anteprima
Esempi visivi del pacchetto; le schermate definitive possono variare in base alla versione inclusa nello ZIP.
Avvio rapido
Il download dello ZIP non è ancora attivo. Qui trovi come è pensato l'avvio e cosa potrai esplorare in locale; README e FAQ saranno nel pacchetto al rilascio.
Alza lo stack con Docker Compose dalla root del repository estratto dallo ZIP, poi apri il frontend, fai login e percorri Dashboard e Playground nello stesso ordine mentale: prima verifica auth e API, poi esperimenti nel laboratorio React.
Passi ad alto livello
- Con Docker installato, dalla root del progetto: `docker compose up --build` e attendi che frontend, API e MongoDB siano pronti.
- Apri il frontend nel browser (URL nel README), verifica l’health dell’API se indicato.
- Accedi con le credenziali di esempio del README (create al primo avvio).
- Dashboard: controlla `/api/v1/me`, `/health`, token invalido e logout.
- Playground: mini-lab React, Function Runner (solo contesto didattico), Type Inspector.
- Per CORS, base URL API, Mongo irraggiungibile o porte occupate, usa README e FAQ nello ZIP.
Quando il download sarà attivo, nel README nello ZIP troverai comandi, URL, credenziali di esempio e le domande ricorrenti: qui resta solo il percorso ad alto livello.