TL;DR https://reddit-image-viewer.vercel.app
I’ve been deep diving with React and Next.js lately. A big part of that immersion is the simplicity of Next.js. For me, Next.js has the perfect amount of abstraction…somewhere between Create React App and Gatsby. You don’t have to know Webpack or routing, but you’re also not locked into an opinionated way of doing React things alongside Node.
Next.js just blends into the background, so you can focus on building components and ship a static (or SSR) website in no time.
Anyway, there are a bunch of other Reddit image websites and apps out there, but I’ve always wanted to create my own. Here goes…
About
The Reddit Image Viewer app uses Next.js as the platform, the React Hooks useEffect()and useState(), relies on native Fetch to grab the data, and React Cool Image to lazy-load the media of any subreddit. I also hooked up Tailwind CSS for styling the cards and grid.
Challenges
There were some challenges though, like dealing with CORS since web browsers are becoming more and more strict on cross-site content. Luckily, I was able to use CORS Anywhere to get around this.
Parsing the JSON for embeds was difficult too. Reddit allows all types of embedded media, so being able to check for, and display certain types of media was definitely a fun little challenge, and I ended up building a switch statement.
Another gotcha? Reddit encodes rich media, like videos, so I had to decode it into a <textarea> before I could render out the markup.
I really like the “live search” functionality, but hitting an API each time someone types a letter doesn’t work. I used another React Hook called useDebounce() to force the search bar to wait 1 second before sending a fetch request.
But the biggest lesson I learned on this project? How to do inline if/else statements in React components! A topic that is worth its very own blog post, and makes me very excited about React Suspense.
Wrap Up
In the end, the app works pretty well. I’ve already opened a few issues on Github for some enhancements I’d like to add. All and all, it was a fun learning experience!
Check out the code on Github and view the live app here: https://reddit-image-viewer.vercel.app