Lofi-Music-App Tailwind Templates

Lofi Music App

Lofi lover? You are at the right place, my friend! Play Lofi tracks and mix them up with different ambient sounds. Try it out now! 🎢⚑

Lofi Music App 🎡

A soothing Lofi Music App built using React and Tailwind CSS, offering a collection of relaxing tracks and ambient effects to unwind and boost productivity. ⭐

🌻 Features

  • Track Library: Enjoy a collection of Lofi tracks, perfect for studying, working, or relaxing.
  • Ambient Sounds: Short ambient effects like fire crackling, nature sounds, and rain to set your mood.
  • User-Friendly Interface: Simple and intuitive design for a seamless listening experience.

πŸ›  Tech Stack

  • React: Frontend framework for building the app's user interface.
  • Tailwind CSS: Utility-first CSS framework for styling and responsiveness.
  • JavaScript (ES6+): Core programming language used for functionalities.
  • Vercel: Deployed and hosted using Vercel.

⏩ Quick Start

  1. Clone the Repository: git clone https://github.com/ArvindParekh/lofi-music-app.git
  2. Navigate to Directory: cd lofi-music-app
  3. Install Dependencies: pnpm install
  4. Start the App: pnpm run dev

Screenshot

image

🍰 Demo

Live Demo

πŸ“‘ To-Dos

  • Add a slider to control volume of effects.
  • Use a different font for the title and make it look catchy (maybe position it in the middle?).
  • Make it responsive.
  • Add a music playing animation (something like spotify mobile track playing animation) next to the track that is currently playing.
  • Style the slider.
  • Add tests for components.
  • Build an FM lofi player.

πŸ’ Contributions

Contributions are welcome! If you'd like to contribute, please check out the Contributing Guide, and feel free to open an issue or a pull request.

πŸ“ƒ License

This project is licensed under the MIT License - see the LICENSE file for details.

🦸🏻 Contributors

Top categories

Loading Svelte Themes