TL;DR https://reddit-image-viewer.vercel.app
Ho fatto una profonda immersione con React e Next.js ultimamente. Una grande parte di questa immersione è la semplicità di Next.js. Per me, Next.js ha la quantità perfetta di astrazione… da qualche parte tra Create React App e Gatsby. Non c’è bisogno di conoscere Webpack o il routing, ma non sei nemmeno bloccato in un modo di fare React insieme a Node.
Next.js si fonde semplicemente con lo sfondo, così puoi concentrarti sulla costruzione di componenti e spedire un sito web statico (o SSR) in pochissimo tempo.
Ad ogni modo, ci sono un sacco di altri siti e app di immagini Reddit là fuori, ma ho sempre voluto creare il mio. Ecco qui…
Di
L’app Reddit Image Viewer usa Next.js come piattaforma, i React Hooks useEffect()e useState(), si affida al nativo Fetch per prendere i dati, e React Cool Image per caricare pigramente i media di qualsiasi subreddit. Ho anche agganciato Tailwind CSS per lo stile delle schede e della griglia.
Sfide
Ci sono state alcune sfide però, come trattare con CORS dal momento che i browser web stanno diventando sempre più severi sul contenuto cross-site. Fortunatamente, sono stato in grado di usare CORS Anywhere per aggirare questo problema.
E’ stato difficile anche analizzare il JSON per gli embed. Reddit permette tutti i tipi di media incorporati, quindi essere in grado di controllare e visualizzare certi tipi di media è stata sicuramente una piccola sfida divertente, e ho finito per costruire una dichiarazione di switch.
Un altro problema? Reddit codifica i rich media, come i video, quindi ho dovuto decodificarli in un <textarea> prima di poter rendere il markup.
Mi piace molto la funzionalità di “ricerca dal vivo”, ma colpire un’API ogni volta che qualcuno digita una lettera non funziona. Ho usato un altro React Hook chiamato useDebounce() per forzare la barra di ricerca ad aspettare 1 secondo prima di inviare una richiesta di fetch.
Ma la più grande lezione che ho imparato in questo progetto? Come fare dichiarazioni inline if/else nei componenti React! Un argomento che vale un post tutto suo, e che mi rende molto eccitato per React Suspense.
Wrap Up
Alla fine, l’app funziona abbastanza bene. Ho già aperto alcuni problemi su Github per alcuni miglioramenti che vorrei aggiungere. Tutto sommato, è stata un’esperienza di apprendimento divertente!
Guarda il codice su Github e guarda l’app dal vivo qui: https://reddit-image-viewer.vercel.app