Skip to content

aristofany-herderson/lofi-youtube-sound

Repository files navigation

Lofi Youtube Sound

🎷 A lofi player using Next.js


🧪  Technologies

This project was developed with the following technologies:

Project Dependencies:

Dev Dependencies:


🧑🏻‍💻  Getting Started

Clone the project and access the project folder

$ git clone https://github.com/aristofany-herderson/lofi-youtube-sound
$ cd lofi-youtube-sound

To run it, follow the steps below:

# Install dependecies
$ pnpm install

# Run the project
$ pnpm dev

Open http://localhost:3000 with your browser to see the result.


💻  Project

Resume: 🎷 A lofi player for you when you're coding. Including, player controller, sound effects, window adjustments and more!

❔  Why do it?

Because I like listen lofi when coding and together we test new advanced features of the next.js 14


🎨  Assets

Player Data: From youtube.com, all the iframes picked up from there.

Design: Inspired by the project Youtube Background Sound


🚀  Features

  • Play Controllers (play/pause, change lofi video, volume changer)
  • Extra relaxing audio effects (campfire, ocean, birds, and more)
  • Full Screen changer

🧠  Used tools

  • useContext - to create a control over the application by determining global roles and states
  • useToggle - to control boolean states
  • useRef - to represent screen elements in memory
  • useList - to store lists and enable delete, edit, add, etc
  • useLocalStorage - to store values in local storage, maintaining state even with page reload

🧑🏻  Author

aristofany-herderson

Aristofany Herderson

linkedin linkedin linkedin