This is a music streaming web application with a React frontend and a Flask backend. It uses YouTube as a source for audio content, allowing users to search for music, manage playlists, and stream audio directly in the browser.
- YouTube Search: Search for music and playlists on YouTube, with dedicated components for the search bar and search results.
- Playlist Management: View and manage playlists, with a clear and intuitive interface.
- Embedded Video Player: An embedded video player to watch the music videos.
- Audio Streaming: Stream audio from YouTube videos with a feature-rich, Spotify-style playbar that includes play, pause, next, previous, and a draggable progress bar.
- Modern UI: A modern and responsive user interface with left and right sidebars for easy navigation and content discovery.
- Error Handling: Displays error messages for a better user experience.
To run this application, you need to set up both the backend and the frontend.
-
Navigate to the project directory:
cd webdev/music_app -
Create a Python virtual environment:
python -m venv venv
-
Activate the virtual environment:
- On Windows:
venv\Scripts\activate
- On macOS and Linux:
source venv/bin/activate
- On Windows:
-
Install the required Python packages:
pip install Flask Flask-Cors yt-dlp requests
-
Run the backend server:
python app.py
The backend server will start on
http://127.0.0.1:5000.
-
Navigate to the project directory (if you're not already there):
cd webdev/music_app -
Install the required Node.js packages:
npm install
-
Run the frontend development server:
npm run dev
The frontend development server will start, typically on
http://localhost:5173.
- Start the backend server first by running
python app.py. - Then, start the frontend server by running
npm run dev. - Open your browser and navigate to the URL provided by the frontend development server (e.g.,
http://localhost:5173).