I refactored the <video> player to support a poster attribute, which points at https://external-preview.redd.it/. Unfortuntely, that URL throws CORS errors:

Access to image at 'https://external-preview.redd.it/_1TOYrQfE2OdJEzynRMOII_9sckKh14T1DYdf07CjoQ.png?width=320&crop=smart&format=pjpg&auto=webp&s=794a4499f058e3a5be291ce690870eb2e80b6dcc' from origin 'https://reddit-image-viewer.vercel.app' has been blocked by CORS policy: The 'Access-Control-Allow-Origin'

• Use a different URL for the poster image

Issue
Full-size unoptimized images from Reddit are being queried and displayed. This is causing poor LCP & CLS scores in Lighthouse.

Solution
Use the image component available in NextJS v10 to display optimized images from Reddit.

Further reading

• https://nextjs.org/docs/api-reference/next/image
• https://github.com/vercel/next.js/tree/canary/examples/image-component

Screenshot

Right now we're using Reddit's public .json to grab data and media. The issue is, without authenticating with Reddit, we have no access to optimized media. As the user scrolls, they're downloading non-optimized images, which can be upwards of 10-15MB!

If we authenticated with Reddit, we could get access to properly optimized and sized media.

When a user either searches for a new sub, or clicks one of the links in the header, the app needs to scroll back to the top.

Issue
I want contributors to this repository to be featured in README.

Hey there, love the project. I was thinking of forking and adding auto play and loop videos/GIFs. Is this type of feature change OK? Would you want it controllable via a toggle in the settings?

Thought I would ask before I fork.

I threw this together with Tailwind...but really, we should be using tailwind.config.js to set defaults and then use @apply via CSS modules.

When a user types in a subreddit, and then clicks one of the 4 links on the header, the search bar needs to update to the sub that was clicked.

After working with Mantine over the last several months, I'd like to convert this hobby app from TailwindCSS to Mantine.

When on mobile, screen real-estate is limited. Move all the things to a drawer.

• Add react hamburger nav
• Move the search bar to drawer
• Move dark mode toggle to drawer
• Move popular subs to drawer
• Add sorting (top, new, hot)

Eventually add history?

Add one.

• Fade in button after user scrolls a little
• Smooth scroll animation to go back to top
• Fade out button when user is back at top

When a user clicks the "Reddit Image Viewer" text in the header, it should clear the search, which will load the default sub itookapicture.

• Create clear function
• Hook up to header "logo" text

If I start my session looking at r/itookapicture, and search a new sub, say "greenbaypackers"... the images persist if a post doesn't have one. Need to double-check for images, before trying to display them

Currently you can click an image to view the original post on Reddit. For other media like videos, you cannot, because clicking it plays the video.

• Either above or below each video, add the Post Title
• The Post Title should back to the original post on Reddit
• Nice to have: Show the Post Title underneath images too

Per PageSpeed Insights:

• Add valid rel=canonical

Need a conditional to check if there are results, before trying to map() over them.

It would be cool if a user could use itookapicture+pics+aww in the search to pull in all of those subreddits and their respective media.

Search area needs to go full-width, and be sticky (like a sticky nav bar) while the user scrolls.

Viewing the production site https://reddit-image-viewer.now.sh/ with Firefox + Enhanced Tracking Protection on, I get CORS errors. When I disable tracking, the site loads fine.

This does not happen in Chrome or Safari.

The autocomplete / typeahead search requires OAuth2 authorization, which I'm currently doing manually. This needs to be an automatic process, because I've learned over the last two days, the bearer token expires every 24 hours (even though it's set for permanent). 😬

There is already code in the develop branch for this.

• Use next/auth to handle automatic generation of a new bearer token every 24 hours

Further reading:

• https://github.com/reddit-archive/reddit/wiki/OAuth2
• https://next-auth.js.org/providers/reddit
• https://github.com/gregrickaby/reddit-image-viewer/blob/develop/pages/api/auth/%5B...nextauth%5D.ts

Instead of doing all the data fetching client side, it can be moved to server components, which makes this app the perfect candidate for the new /app directory structure.

• Review https://beta.nextjs.org/docs and try moving to the new /app directory structure.
• Because Mantine is based on emotion, using server components could be a challenge. Review https://github.com/mantinedev/mantine-next-template/tree/next-13-app for more info

On the initial page load, we're grabbing 200 items from Reddit. This request can take up 10 seconds to resolve.

Is there a way to grab the first 5 items, and then continue to make requests as the user scrolls?

Mantine v7.0 is out with full support for Next.js App Router. Refactor and upgrade to use both.

https://nextjs.org/docs#app-router-vs-pages-router
https://github.com/mantinedev/mantine/releases/tag/7.0.0

1. I think it should be create-next-app rather than create next-app
2. Also, the GitHub repo link contains / at the end which gives an error, repo not found

I was using npx

It'd be cool to see a list of all the searches. Maybe even make them clickable. History does not persist beyond browser session.

Problem: If user types to fast in the search, the app just crashes.

The "fetch as you type" is the UX I want, but there needs some delay added, since the hooks are setup to fetch with each keystroke. This is apparently a common problem, and I found some blog posts:

• https://sebastienlorber.com/handling-api-request-race-conditions-in-react
• https://dev.to/nas5w/avoiding-race-conditions-when-fetching-data-with-react-hooks-4pi9

Sniff out the user's OS preference and use it.

In addition to .MP4, Reddit also returns HLS-based video playlists in the API response. HLS is supported by all major browsers and has advantages, such as optimized video delivery for mobile devices.

The motivation for this is that the .MP4s returned by the Reddit API do not have sound, but the HLS versions do.

• Create an <HlsPlayer /> component leveraging hls.js
• The component must support <video> fallbacks with the MP4 URL
• Replace the <video> tag in the <Card /> component with <HlsPlayer />

When I refactored the codebase for TypeScript, I missed a few props that need types-checking.

• Go through the codebase and add Interfaces

It would be great if users could sort a subreddit by: hot, new, top, and rising from the header after they search.

OMG I can't stand that it's not TypeScript. Fix it!

Per PageSpeed Insights:

• Links do not have a discernible name
• Also, style with monospace font

<a href="https://github.com/gregrickaby/reddit-image-viewer" target="_blank" rel="noopener noreferrer">

Right now, this is a simple SPA with everything contained in /pages/index.js.

Really, I need a <Layout />, and <Header /> components, so we can easily create other pages.

Deal with NSFW content:

• Show a NSFW badge in search results dropdown via custom item component
• Obfuscate NSWF media with blur layover
• Add option via switch to display NSFW media in existing <Settings /> component
• The <Switch /> state is managed via the context provider in <RedditProvider />
• Save that value to local storage via https://mantine.dev/hooks/use-local-storage/

The /api/reddit.ts and /api/search.ts routes both already return over_18 props. The data is there, we just need to deal with it.

When a user clicks/taps the search bar the drop down reads, "nothing found try searching".

Instead, it should show the the Top 5 (or 10) popular Subreddits. See Mantine's Autocomplete docs.

• When a user clicks/taps into search bar, display 5 or 10 Popular Subreddits
• Follow the API docs for the query
• The subreddits listed in the drodpown should match the style and display NSFW badge if necessary

Need to investigate how to get around CORS issues. Asking users to disable ad-blockers and trackers before they can view is poor UX.

Everything was working perfectly...but now there are endless CORS issues.

Not sure how to fix this, is there a CORS header I need to apply? Or has Reddit put CORS restrictions on URLs?

Access to image at 'https://external-preview.redd.it/6eZXVePWtcXm9esra74fXQSkI5X4YKz58vVpj4yf-rc.png?width=1080&crop=smart&format=pjpg&auto=webp&s=e1485b5fabd6f050707ff3190a05e4a53e61b38d' from origin 'https://reddit-image-viewer.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

URL's affected:

• external-preview.redd.it

Media affected:

• poster images
• gifs
• videos

Per PageSpeed Insights:

• Low-contrast text is difficult or impossible for many users to read.

Load more<span class="mantine-qo1k2 mantine-Button-label">
Load more<button class="mantine-UnstyledButton-root mantine-Button-root mantine-1ggl3ol" type="button" data-button="true">

This is a nice to have

Currently, infinite loading is handled via a custom fetch() function. This works, but by leveraging SWR's built in caching, we could potentially decrease the amount of requests to the Reddit API, which is currently capped at 60 hits per minute.

• Refactor <Results /> to use SWR instead of custom fetch()

Note: The SWR library is already installed and used for <Search />

The search bar is lame. It needs some autocomplete/type ahead functionality. Leverage the Mantine <Autocomplete /> component and the Reddit Autocomplete v2 API.

Note: the search endpoint must be an Edge function