Crea un SaaS da ZERO con Next.js, Supabase e Tailwind: il TUTORIAL completo 🔥

Поділитися
Вставка
  • Опубліковано 28 жов 2024

КОМЕНТАРІ • 75

  • @giuppidev
    @giuppidev  3 місяці тому +27

    Vorresti vedere altri mega tutorial come questo su argomenti specifici o su altre tecnologie?? Fammelo sapere qui 👇

    • @Twiddli
      @Twiddli 3 місяці тому +2

      assolutamente, piu' mega tutorial!

    • @GiuseppePiccolo
      @GiuseppePiccolo 3 місяці тому +1

      Si molto bravo è complimenti

    • @mattiascapin6235
      @mattiascapin6235 3 місяці тому +1

      Assolutamente siii!😎

    • @domenicomilano
      @domenicomilano 3 місяці тому +2

      Sì, vorrei vederne altri. Non so se php è un po' obsoleto, come argomento mi viene in mente costruzione di dashboard che leggono dati in tempo reale. Oppure qualcosa da "badboy" come scraping di dati su pagine web

    • @74giannico
      @74giannico 3 місяці тому

      Molto belli e utili. Assulutamente!!

  • @vinzolomanzolo
    @vinzolomanzolo 3 місяці тому +5

    Mi é capitato di vedere qualche tuo video per caso. Fino ad ora ho sempre e solo seguito creator d'oltre oceano per la qualitá dei contenuti e per le competenze. Che dire, finalmente un connazionale che ci sa fare! Bravo!

    • @giuppidev
      @giuppidev  3 місяці тому

      Guarda, ne seguo parecchi anche io quindi questo tuo commento mi fa un enorme piacere, grazie! ❤️ Ovviamente con le dovute proporzioni 😂

  • @DanieleOresteMarino
    @DanieleOresteMarino 3 місяці тому +8

    A mani basse il tipo di video più utile

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Grazie Daniele, allora va rifatto!

  • @giulia6930
    @giulia6930 3 місяці тому

    Grazie per questo tutorial, io mi sto formando come junior e sto studiando node.js: vedere come applichi il ragionamento per costruire il backend mi ha aiutata tantissimo. Grande 🌟🥇

    • @giuppidev
      @giuppidev  3 місяці тому

      Mi fa molto piacere ☺️

  • @lorenzobandinii
    @lorenzobandinii 3 місяці тому

    Veramente contenuto d'oro, grazie mille di portare questi contenuti con questa qualità

    • @giuppidev
      @giuppidev  3 місяці тому

      Mi fa molto piacere, grazie a te! 😍

  • @stefanoanghe
    @stefanoanghe 3 місяці тому +1

    Grande Giuppi!! Ottimo video tutorial, utile ed interessante per una panoramica a 360° di un progetto, continua con questi video che a me piacciono un sacco!!

    • @stefanoanghe
      @stefanoanghe 3 місяці тому

      Mi piacerebbe vedere anche un mega tutorial di sviluppo di un app in flutter da zero alla pubblicazione negli store Android/ios, ma non so se è il tuo campo, in caso sarebbe bellissimo! 😊

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Grazie Stefano! Ho fatto un sondaggio e come puoi vedere Flutter è in lista 😎

  • @marcolancellotti8114
    @marcolancellotti8114 3 місяці тому +3

    I video che mi piacciono. Questo me lo spolpo per bene.

    • @giuppidev
      @giuppidev  3 місяці тому +2

      Grande Marco!! Attendo come semper un tuo prezioso feedback 😍

  • @albertoplebani77
    @albertoplebani77 3 місяці тому

    Tutorial davvero interessante, ben fatto e ben spiegato, definitivamente grazie! Non ho mai usato Supabase quindi l'ho trovato interessante anche per quel motivo.

  • @marcosfrias28
    @marcosfrias28 3 місяці тому +2

    Per me questo e' il miglior format che esiste per imparare, perche si va nel dettaglio di tantissime cose e si spiegano altrettante... Complimenti, unico UA-camr di Programmazione che seguo in Italiano! continua cosi, e grazie per il lavoro che ci hai dedicato a tutti!

    • @gianlucalomarco
      @gianlucalomarco 3 місяці тому

      Stai dicendo che non segui il mio bellissimo canale sullo sviluppo 3D?!? 😢

    • @giuppidev
      @giuppidev  3 місяці тому

      Wow, non sai quanto mi fa piacere, ci tenevo molto a questo video perché condivido il tuo pensiero, sono sempre utili anche per me. Ancora più carico per farne altri 😍

    • @gianlucalomarco
      @gianlucalomarco 3 місяці тому

      @@marcosfrias28 quindi ancora non conosci il mio bellissimo canale sullo sviluppo 3D?

    • @gianlucalomarco
      @gianlucalomarco 3 місяці тому

      @@marcosfrias28 quindi a me non mi segui… 😞

  • @giovannil.8443
    @giovannil.8443 3 місяці тому

    sei il numero 1! forse so dove hai trovato l'ispirazione per questo megatutorial

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Tu conosci troppi dietro le quinte della mia vita ahahahha

  • @domenicomilano
    @domenicomilano 3 місяці тому

    Un tutorial spaziale! Per me son tutte cose molto avanzate ma la qualità della spiegazione, la qualità del codice e anche come è registrato è di altissimo livello. Ho solo un micro suggerimento: provare a portare su (un po' più in alto) gli output dei console.log nel terminale di Vscode. Sei forte

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Wow grazie Domenico! Purtroppo del console log me ne sono accorto solo a registrazione finita, questo il problema di ore e ore di registrazione no stop ahahahha Prossima volta lo fixo, promesso :)

  • @g.n.1666
    @g.n.1666 Місяць тому

    Video Top

  • @DanieleGilioDigitalMarketing
    @DanieleGilioDigitalMarketing 3 місяці тому

    Bomba! me lo guarderò con calma! :D

  • @NazarKoshla
    @NazarKoshla 3 місяці тому

    grande Giuseppe

  • @BoobaGreen
    @BoobaGreen 3 місяці тому

    Super! 👍

  • @skaemusic
    @skaemusic 2 місяці тому

    Ciao Giuppi, come uso un font diverso da quello primario esclusivamente in un particolare div?

    • @giuppidev
      @giuppidev  2 місяці тому +1

      Ciao, lato nextfont puoi caricarli anche su una singola pagina così come fai nel file di Layout di root.
      Lato tailwind, puoi definire i tuoi font family e poi richiamare le classi.

    • @skaemusic
      @skaemusic 2 місяці тому

      @@giuppidev grazie ❤️

  • @ddddevice
    @ddddevice 3 місяці тому

    YEAHHHHHHH!!!!!!!

  • @ePilicK_tv
    @ePilicK_tv 2 місяці тому

    ciao Giuseppe, in primis grazie per il video e per la condivisione del tuo modo di lavorare. Volevo farti una domanda, se dovessi gestire il tutto tramite un cms (quindi un progetto leggermente diverso, dove anche gli user hanno un pannello per inserire determinate cose) cosa sceglieresti? Ritieni valido strapi? in caso mi consiglieresti altro? (come db rimarresti sempre con supabase)?
    Grazie in anticipo per la risposta

    • @giuppidev
      @giuppidev  2 місяці тому +1

      Ciao ti ringrazio. Strapi l'ho usato poco ma è molto valido e utilizzato, ti consiglio di guardare anche Directus che non è male.

  • @skaemusic
    @skaemusic 3 місяці тому

    Ciao Giuseppe, potresti parlarci dei rischi di sicurezza che corre l'app? Il primo che mi viene in mente arrivato a circa un'ora di video è il limite di email che supabase ci permette di inviare, ma immagino ce ne saranno altri più avanti nel video: cosa succede su un utente, o un bot, si mette a registrare utenze false a raffica e ci consuma il limite di email inviabili? Come proteggere l'app? Grazie

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Ciao, il metodo più veloce per limitare i bot sono i recaptcha. Diciamo che per la messa in prod vanno tenuti in considerazione molti punti, ottim ospunto per prossimi contenuti

  • @dayg88
    @dayg88 3 місяці тому

    Ciao Giuseppe, grazie per il video molto interessante.
    Ti vorrei chiedere: nel realizzare questa tipologia di web application (o simili) è necessario anche tenere in considerazione tematiche come cookie banner, cookie policy e privacy policy prima di mandare il prodotto in produzione? Ti sei mai occupato di questi argomenti? Grazie

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Ciao! Assolutamente si, è un discorso complesso e noioso ma una qualche policy se hai cookies e se hai dati va messa. Grazie, è assolutamente da affrontare in altro video o tutorial

  • @lorenzoromeo8874
    @lorenzoromeo8874 3 місяці тому

    Sarebbe interessante capire come avviene il render delle pagina , stai usando ssr per prendere i video delle lezioni ? Si può ottimizzare usando ssg ed isr? E come avviene questo con le nuove versioni di next

  • @Zavy86
    @Zavy86 3 місяці тому

    curiosità ma il browser client di supabase, come riceve i process.ENV.. e sono visibili anche lato client o restano comunque privati?

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Ottima domanda, su supabase farò un video dedicato su questi aspetti.
      Ti provo a rispondere qui in sintesi: lato client le key passate sono recuperabili (in env sono NEXT_PUBLIC_) e si utilizza la anon key, che ha pochi privilegi. Ovviamente tutto dipende poi dalle policy che scrivi, in cui puoi dare agli utenti di ruolo "anon" diritti di lettura etc (che quindi sarebbero poi possibili recuperare avendo la chiave).
      Quindi di base dovresti avere tutte le RSL attive sulle tue tabelle e scrivere le policy con attenzione rispetto ai ruoli (per esempio gli anon non sono utenti autenticati).
      Detto questo è un attimo sbagliare (io per primo avevo fatto casino con le RSL ed esposto delle query in lettura), quindi 2 approcci più sicuri sono:
      - utilizzare solo il client lato server
      - avere le RSL attive ovunque ma con ZERO policies, utilizzando solo un client lato server (non ssr, l'admin per intenderci della repo) che utilizzando la service role key bypassi le rsl.
      Onestamente non so dirti l'approccio migliore al 100%, ma personalmente al momento opto per RSL con policies scritte e client lato server (l'admin solo per operazioni backend).

    • @Zavy86
      @Zavy86 3 місяці тому

      @@giuppidev ah ok quindi il db resta cmq esposto e devi gestire bene bene le policy.
      ora capisco anche come possa funzionare per il db in tempo reale effettivamente..
      grazie, aspetto il video di supabase, è sempre bello conoscere tecnologie nuove!

  • @sguessone
    @sguessone 3 місяці тому

    Grande Giuppi! Qualche tutorial su Auth.js o magari Lucia Auth? Mi interesserebbe sopratutto il credentials login.

    • @giuppidev
      @giuppidev  3 місяці тому

      Assolutamente in un prossimo tutorial useremo autenticazione differente 🔥

  • @AndreaBarbieriDev
    @AndreaBarbieriDev 3 місяці тому

    Giuppi, ma che browser/estensione stai usando per cambiare scheda?
    Grazieee

    • @guidopanzieri150
      @guidopanzieri150 3 місяці тому +1

      usa arc c'è solo su w11 e macos :)

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Come detto dal buon Guido, uso Arc (ci ho fatto un video tempo fa), disponibile per mac e w11.

    • @AndreaBarbieriDev
      @AndreaBarbieriDev 3 місяці тому

      @@giuppidev Recupero immediatamente!

  • @GiuseppePiccolo
    @GiuseppePiccolo 3 місяці тому

    Ma usi estensioni particolari su vscode? Se si potresti condividere quali.

    • @giuppidev
      @giuppidev  3 місяці тому

      Sicuramente ne uso, ma ormai le dimentico 😂 Ti riferisci a qualche cosa in particolare che hai visto?

    • @GiuseppePiccolo
      @GiuseppePiccolo 3 місяці тому

      @@giuppidev ho visto che ti suggerisce il codice quando scrivi e quando salvi ti formatta in automatico

    • @Mercury9416
      @Mercury9416 3 місяці тому

      @@GiuseppePiccolo per quanto riguarda il suggerimento del codice penso usi github copilot che è pagamento, in alternativa esiste anche roba free tipo codium, il format automatico invece è una feature di vscode che puoi trovare nelle impostazioni sotto editor: format on save

  • @federicofiaschi
    @federicofiaschi 3 місяці тому

    Ciao Giuseppe, ho seguito a fondo il tutorial. Purtroppo lato database mi sento di dire che la spiegazione è insufficiente. Avrei inoltre optato per l'eliminazione completa della webcam che, spesso e (non) volentieri, non permette una visione di quello che succede a schermo. Per il resto buon video.

    • @giuppidev
      @giuppidev  3 місяці тому

      Ciao Federico, grazie del feedback. Posso dirti che sulla parte db condivido, non mi ci sono soffermato dandola quasi per scontato e poi passando nello specifico a cose di Supabase. Sulla webcam purtroppo per video così lunghi opto per layout fisso altrimenti esco matto, e credo che una spiegazione con un volto sia più piacevole (opinione assolutamente personale). Ne terrò comunque conto, facendoci più caso, nei prossimi che arriveranno

  • @marcofari532
    @marcofari532 3 місяці тому

    Perchè usi il refresh e non il navigate? Essendo che stiamo lavorando in React non perdiamo lo stato dell applicazione facendo il reload completo della pagina? Per esempio quando fai il logout anzichè fare refresh, non conviene fare navigate su / ?
    Comunque viene rifatto il controllo sull user se è autenticato o meno..e non perdiamo nessuno stato
    Comunque ottimo video..avrei speso qualche minuto in più su qualche argomento. Non avendo mai visto Next.js ho fatto un po di difficoltà, ma andando avanti nel video i concetti li ho capiti. Apprezzo il lavoro e mi piacerebbe vedere altri contenuti simili a questo.

    • @giuppidev
      @giuppidev  3 місяці тому

      Ciao Marco! Allora, in realtà il router di next gestisce lo stato dell'applicazione, non è un vero e proprio refresh. Da docs:
      Refresh the current route. Making a new request to the server, re-fetching data requests, and re-rendering Server Components. The client will merge the updated React Server Component payload without losing unaffected client-side React (e.g. useState) or browser state (e.g. scroll position).
      Sono molto contento ti sia piaciuto, ovviamente nei prossimi cercherò di avere un flusso più comprensibile, al netto che poi li affiancherò ai miei corsi più "teorici". Se posso chiederti, c'è qualche argomento che avresti voluto vedere approfondito? Thanks

    • @marcofari532
      @marcofari532 3 місяці тому

      @@giuppidev ah ok, grazie per la spiegazione. Comunque mi piacerebbe veder spiegato meglio next js (sempre nei limiti, capisco che hai un corso dedicato). Diciamo che ho dovuto rivedere più volte la gestione dei file e delle cartelle nel modo in cui l hai implementato! Mi è sembrato un po confusionario ma come già detto non conoscendo next forse è solo un mio problema. Comunque grazie a questo video ho ripreso una mia web app in react, e per prova ho tolto tutto il backend fatto con node che gestiva le rest api, sessioni/autenticazioni e l ho sostituito con Supabase in modo da avere tutto lato client. Veramente figo! L'unica cosa che non mi piace di Supabase (ma leggendo su Github non si può modificare almeno per ora) è il fatto che quando un utente clicca sul link per resettare la password in automatico viene loggato e creata una sessione anche se la password poi non verrà modificata.

  • @FabrizioMorroia
    @FabrizioMorroia Місяць тому

    Se preprepari tutto come facciamo a seguire? Comunque bravo!!!

    • @giuppidev
      @giuppidev  Місяць тому +1

      ahahahah vediamo se col prossimo riesco a far tutto tutto

  • @gabrielemercurio9447
    @gabrielemercurio9447 3 місяці тому

    Non capisco perché non ha pubblicato i miei commenti... 🤔 Proponevo un videone per implementare un CMS headless come PayloadCms che, nella versione 3 in beta, ha sotto Next.js.
    Spesso nei videoni tutorial vengono inseriti dati mockati e hardcodati, ma questo va contro quello che succede in realtà, nella mia esperienza, cioè la necessità di avere dati dinamici che il cliente possa inserire autonomamente dal backend di un CMS. 😊

    • @giuppidev
      @giuppidev  3 місяці тому

      Ciao Gabriele, non sei il primo che mi dice dei commenti e onestamente non ne ho la più pallida idea! 😂
      Molto interessante come idea, penso sfrutterò l'estate per tirare giù una lista da condividervi e l'approccio che hai usato qui (vedo gente fare cose nei tutorial che non sono la realtà) penso mi aiuterà molto. 🔥

    • @gabrielemercurio9447
      @gabrielemercurio9447 3 місяці тому

      @@giuppidev Forse ho capito perché i commenti spariscono: Ho notato che, se inserisco dei link esterni nel commento, questo non viene salvato... Boh... ma magari mi sbaglio...

  • @SergioOlivieri89
    @SergioOlivieri89 3 місяці тому

    Come mai usi ancora quell'ippopotamo di VSCode e non Zed?

    • @giuppidev
      @giuppidev  3 місяці тому +1

      Guarda, Zed l'ho provato per qualche settimana e poi per un progetto son tornato a VSCode quasi "dimenticandomi" di Zed. Con l'estate ci ritorno, anche perché mi sta di nuovo rallentando molto vscode in alcuni progetti (e magari è colpa sua).