Read on Twitter
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
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
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.
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.
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.
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.
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 
