Costruire interfacce

Le pagine che il cliente guarda: home, schede, wizard di prenotazione, pannello, stati d'errore e resa sul telefono.

18 prompt

• C028

  Prima che lo lanci: spiegami cosa fa create-next-app e cosa mi chiederà

  Una spiegazione in cinque punti con l'elenco tradotto delle impostazioni consigliate, la conferma che la tua versione di Node basta, e la cartella da cui lanciare il comando.

  Base ·10 min ·Code ·cap. 2.2 ·go.totaliweb.com/c028
  Apri
• C029

  Guidami nel giro di create-next-app, risposta per risposta

  Per ogni schermata incollata, tre righe: che cosa chiede, che tasto premere, che cosa cambierebbe l'altra scelta.

  Intermedio ·10 min ·Code ·cap. 2.2 ·go.totaliweb.com/c029
  Apri
• C030

  Anatomia del progetto: spiegami le cartelle una per una, in italiano

  Un elenco ordinato di cartelle e file con tre righe ciascuno, la regola sull'organizzazione delle pagine e la lista di ciò che è generato automaticamente. Nessun file modificato.

  Base ·10 min ·Code ·cap. 2.2 ·go.totaliweb.com/c030
  Apri
• C031

  La prima home: nome, mestiere, una riga, un bottone

  Un file modificato (`app/page.tsx`), la pagina che nel browser mostra nome, mestiere, una riga e un bottone, e la frase «una cartella dentro `app/` è un indirizzo del sito».

  Intermedio ·15 min ·Code ·cap. 2.2 ·go.totaliweb.com/c031
  Apri
• C032

  Pagina bianca: leggi l'errore e proponi la correzione più piccola

  Traduzione dell'errore, file e riga, una correzione minima proposta ma non applicata, e il criterio per verificare nel browser.

  Intermedio ·10 min ·Code ·cap. 2.2 ·go.totaliweb.com/c032
  Apri
• C033

  La home in cinque blocchi, uno alla volta

  Una home in cinque blocchi con intestazione e piede riusabili, più le due pagine segnaposto `/privacy` e `/cookie` che si aprono davvero.

  Intermedio ·45 min ·Code ·cap. 2.6 ·go.totaliweb.com/c033
  Apri
• C034

  Contenuti veri al posto del Lorem ipsum: listino, durate, testi

  I dati in un file solo, le funzioni di formattazione riusabili, e una tabella «valore → come esce a schermo» da confrontare col listino.

  Base ·20 min ·Code ·cap. 2.6 ·go.totaliweb.com/c034
  Apri
• C035

  La pagina servizi: quattro schede, una con un bottone diverso

  La pagina `/servizi` con le schede, una sola diversa nell'etichetta e nel bottone, e un componente scheda condiviso con la home.

  Intermedio ·30 min ·Code ·cap. 2.6 ·go.totaliweb.com/c035
  Apri
• C036

  Raddrizza il telefono: trova i difetti di resa mobile e correggili uno alla volta

  Una tabella «bersaglio · altezza · che cos'è» dei soli elementi sotto soglia, poi una correzione alla volta con il punto da riguardare dopo ognuna.

  Avanzato ·40 min ·Code ·cap. 2.6 ·go.totaliweb.com/c036
  Apri
• C037

  Le pagine leggono dal database: fuori i prezzi dal codice

  Le pagine passano dal file al database in tre passi, con la riga che le fa rileggere a ogni richiesta.

  Intermedio ·45 min ·Code ·cap. 3.1 ·go.totaliweb.com/c037
  Apri
• C038

  Il wizard di prenotazione in 4 passi, uno alla volta

  I quattro passi del modulo, costruiti uno per volta, col bivio del servizio che va a preventivo.

  Avanzato ·60 min ·Code ·cap. 3.4 ·go.totaliweb.com/c038
  Apri
• C039

  Validazioni doppie: nel modulo e sul server

  I controlli del browser e quelli del server, separati, con il commento che dice cosa il vincolo copre e cosa no.

  Avanzato ·30 min ·Code ·cap. 3.4 ·go.totaliweb.com/c039
  Apri
• C040

  Quando qualcosa va storto: i messaggi che il cliente capisce

  Le strade infelici riscritte in italiano: cosa è successo, di chi non è la colpa, cosa si può fare adesso.

  Intermedio ·25 min ·Code ·cap. 3.4 ·go.totaliweb.com/c040
  Apri
• C041

  La dashboard della settimana: dati veri, colpo d'occhio

  La settimana a colpo d'occhio, con i tre numeri in cima e i giorni vuoti che si vedono.

  Avanzato ·45 min ·Code ·cap. 3.5 ·go.totaliweb.com/c041
  Apri
• C042

  Stati e bottoni giusti: conferma, annulla, completa

  I bottoni che compaiono solo dove il passaggio è ammesso, e la scrittura che conta le righe toccate.

  Avanzato ·45 min ·Code ·cap. 3.5 ·go.totaliweb.com/c042
  Apri
• C043

  La griglia della disponibilità: orari ed eccezioni modificabili

  Griglia settimanale ed eccezioni sulla stessa pagina, con l'effetto della modifica visibile subito.

  Avanzato ·45 min ·Code ·cap. 3.5 ·go.totaliweb.com/c043
  Apri
• C044

  Il widget chat su ogni pagina pubblica

  Il widget di chat su tutte le pagine pubbliche e su nessuna dell'admin, con la risposta che compare mentre si forma.

  Avanzato ·60 min ·Code ·cap. 4.2 ·go.totaliweb.com/c044
  Apri
• C045

  Il pannello admin: i bottoni «Prepara bozza» e «Riepilogo della settimana»

  I due bottoni delle funzioni AI di Marta, con la casella di testo che aspetta la sua rilettura.

  Intermedio ·45 min ·Code ·cap. 4.4 ·go.totaliweb.com/c045
  Apri