For better performance and to avoid hitting the API constantly, I used Next.js caching techniques: once a single user accesses certain information, that data becomes available to everyone else almost instantly.

This cache is refreshed every few days to fetch new data if necessary.

Vibecoded multiplayer-only pong with random match-making and a LOT of lag/delay:

random-pong-frontend.vercel.app

Remove it from the video list of its previous state and add it to the new list based on its new status (Watched/Unwatched), update its status in the 'All' list, and do all of this for every feed in which it was present.

Codebase:

Complexity: My client-side data is cached using the following queryKey structure:
['videos', 'FeedId', 'VideoType', 'VideoWatchedStatus']

So, in order to update the information on the client, I had to update the video data in every place it appears.

A bit of my own documentation

Key Features:
- Create custom feeds (All/Entertainment/Study/Finance/etc.)
- Filter by video type (All/Videos/Shorts/Streams)
- Filter by Watched/Unwatched

Personally, I hate the current YouTube Subscriptions page. All the different videos get grouped together, you can't filter anything, etc.