TL;DR https://reddit-image-viewer.vercel.app
Ostatnio głęboko nurkowałem z Reactem i Next.js. Dużą częścią tego zanurzenia, jest prostota Next.js. Dla mnie, Next.js ma idealną ilość abstrakcji… gdzieś pomiędzy Create React App a Gatsby. Nie musisz znać Webpacka ani routingu, ale nie jesteś również zamknięty w opiniotwórczym sposobie robienia rzeczy React obok Node.
Next.js po prostu wtapia się w tło, więc możesz skupić się na budowaniu komponentów i wysyłać statyczną (lub SSR) stronę internetową w mgnieniu oka.
Anyway, istnieje masa innych stron i aplikacji Reddit image, ale zawsze chciałem stworzyć własną. Oto i ona…
About
Aplikacja Reddit Image Viewer używa Next.js jako platformy, React Hooks useEffect()i useState(), polega na natywnym Fetch do pobierania danych i React Cool Image do leniwego ładowania mediów z każdego subreddita. Podpiąłem również Tailwind CSS do stylizacji kart i siatki.
Wyzwania
Były jednak pewne wyzwania, takie jak radzenie sobie z CORS, ponieważ przeglądarki internetowe stają się coraz bardziej rygorystyczne w kwestii zawartości cross-site. Na szczęście byłem w stanie użyć CORS Anywhere, aby to obejść.
Parsowanie JSON dla embedów też było trudne. Reddit pozwala na wszystkie typy osadzonych mediów, więc możliwość sprawdzenia i wyświetlenia określonych typów mediów była zdecydowanie fajnym, małym wyzwaniem, i skończyło się na zbudowaniu switch statement.
Inna wpadka? Reddit koduje bogate media, takie jak filmy, więc musiałem je zdekodować do <textarea> zanim mogłem wyrenderować znacznik.
Naprawdę podoba mi się funkcjonalność „wyszukiwania na żywo”, ale uderzanie w API za każdym razem, gdy ktoś wpisuje literę, nie działa. Użyłem innego React Hook o nazwie useDebounce(), aby zmusić pasek wyszukiwania do odczekania 1 sekundy przed wysłaniem żądania fetch.
Ale największa lekcja, jakiej nauczyłem się w tym projekcie? Jak robić inline if/else statements w komponentach React! Temat, który jest wart własnego wpisu na blogu i sprawia, że jestem bardzo podekscytowany React Suspense.
Wrap Up
W końcu, aplikacja działa całkiem dobrze. Otworzyłem już kilka problemów na Githubie dla kilku ulepszeń, które chciałbym dodać. Podsumowując, to było fajne doświadczenie edukacyjne!
Sprawdź kod na Githubie i zobacz aplikację na żywo tutaj: https://reddit-image-viewer.vercel.app