https://lofi.cafe  was visited by more 200k people, and it's a simple React app I've made with @maridivi89 in a few weekends.

Here's a little thread with some of the open source libraries we used to build it

We use "react-player" to drive the YouTube embed. It gives you many options and callbacks to customize the experience.

The odd thing you'll see here is the "200vh" height. It's on purpose, to hide the YouTube UI away from the viewport
https://www.npmjs.com/package/react-player

By the way the player is hidden from the user with simple CSS:

We use "recoil" for state management. @frankdilo used it on @typefullyapp and it's truly great.

You can define "atoms" of state and selectors that you can use across all your components.

That "localStorage effect" you see above makes the Recoil atom persist in the browser local storage.

Docs: https://recoiljs.org/docs/guides/atom-effects/#local-storage-persistence

That's how https://lofi.cafe  remembers what station you're listening to, the GIF you're seeing, your current volume etc.

We're using "react-fullscreen" to handle the fullscreen mode on compatible browsers. https://www.npmjs.com/package/react-full-screen

We use "react-localization" to localize the webapp in a few languages. https://www.npmjs.com/package/react-localization

It's just a start but we like the idea of making users across the world feel more welcome.

We use a bunch more, but the last one I want to mention is @framer Motion, which I use on all my projects. https://www.framer.com/motion/ 

Even for simple animations, it makes them a pleasure to create, and it gives you the best spring animations you can hope for.

If there are some cool libraries we can use to improve the project even more, please let me know