TL;DR https://reddit-image-viewer.vercel.app
Ik ben de laatste tijd diep gedoken in React en Next.js. Een groot deel van die onderdompeling is de eenvoud van Next.js. Voor mij heeft Next.js de perfecte hoeveelheid abstractie… ergens tussen Create React App en Gatsby. Je hoeft geen verstand te hebben van Webpack of routing, maar je zit ook niet vast aan een vastgeroeste manier om React-dingen naast Node te doen.
Next.js verdwijnt gewoon op de achtergrond, zodat je je kunt richten op het bouwen van componenten en in een mum van tijd een statische (of SSR) website kunt maken.
Hoe dan ook, er zijn een heleboel andere Reddit-afbeeldingenwebsites en -apps, maar ik heb altijd al mijn eigen willen maken. Hier gaat ie…
Over
De Reddit Image Viewer app gebruikt Next.js als platform, de React Hooks useEffect()en useState(), vertrouwt op native Fetch om de gegevens op te halen, en React Cool Image om de media van een subreddit lazy-loaded. Ik heb ook Tailwind CSS aangesloten voor de styling van de kaarten en grid.
Uitdagingen
Er waren wel wat uitdagingen, zoals het omgaan met CORS omdat webbrowsers steeds strenger worden op cross-site content. Gelukkig kon ik CORS Anywhere gebruiken om dit te omzeilen.
Parsing van de JSON voor embeds was ook moeilijk. Reddit staat alle soorten embedded media toe, dus in staat zijn om te controleren op, en bepaalde soorten media weer te geven was zeker een leuke kleine uitdaging, en ik eindigde met het bouwen van een switch statement.
Een andere gotcha? Reddit codeert rijke media, zoals video’s, dus ik moest het decoderen in een <textarea> voordat ik de markup kon renderen.
Ik vind de “live search”-functionaliteit erg leuk, maar elke keer als iemand een letter typt, werkt het niet om een API aan te spreken. Ik gebruikte een andere React Hook genaamd useDebounce() om de zoekbalk te dwingen 1 seconde te wachten voordat hij een fetch-verzoek verzendt.
Maar de grootste les die ik bij dit project heb geleerd? Hoe je inline if/else statements in React componenten moet doen! Een onderwerp dat een eigen blogpost waard is, en me erg enthousiast maakt voor React Suspense.
Wrap Up
In the end werkt de app best goed. Ik heb al een paar issues geopend op Github voor wat verbeteringen die ik zou willen toevoegen. Al met al was het een leuke leerervaring!
Bekijk de code op Github en bekijk de live-app hier: https://reddit-image-viewer.vercel.app