🎶 Synapse - A Free Music & Audio streaming platform

A full-stack React application that allows users to stream music, podcasts, and the audio of YouTube videos using the YouTube v3 API. Stream your favorite content seamlessly!

check it out: synapse-music

📹 Tutorial

Learn how to use the project by watching this YouTube tutorial:

🚀 Features

• Stream music and podcasts
• Extract audio from YouTube videos
• Seamless integration with YouTube's v3 API
• Full-stack setup (Frontend: React, Backend: Node.js)
• Hosted on Vercel for fast deployment

🛠️ Tech Stack

• Frontend: React.js
• Backend: Node.js, Express.js
• Database: MongoDB
• Hosting: Vercel

🖥️ Getting Started

Prerequisites

Before you start, make sure you have the following installed:

• Node.js v18.16.0 or later
• npm or yarn
• YouTube Data API v3 (set up and get your API key from Google Cloud Console)
• A Vercel account for hosting (optional)

Installation

1. Clone the repository:

   git clone https://github.com/shivendrra/synapse.git
   cd synapse

2. Install dependencies:

   npm install

3. Create a .env file in the root directory and add your YouTube API key:

   REACT_APP_YOUTUBE_API_KEY=your_youtube_v3_api_key
   

4. Run the app:

   npm start

   The React app will be served locally at http://localhost:3000.

---

🛠️ Backend Setup

1. Navigate to the backend folder:

   cd website/backend

2. Install backend dependencies:

   npm install

3. Start the backend server:

   npm run dev

   The backend server will be running on http://localhost:5000.

🌐 Deploy to Vercel

Deploying the app to Vercel is simple:

1. Sign in to Vercel and link your GitHub repository.
2. Import the project.
3. Vercel will automatically build and deploy your app.

🎥 Video API Integration

The app uses YouTube v3 API to stream audio content from videos:

• To interact with the API, you can find the logic inside the src/services/youtubeService.js file.
• The API extracts only audio from YouTube videos, making it ideal for music and podcast streaming.

📂 Project Structure

├── backend
│   ├── controllers
│   ├── models
│   ├── middlewares
│   ├── routes
│   ├── base.js
│   └── index.js
├── frontend
│   ├── public
│   ├── src
│   ├── components
│   ├── services
│   ├── App.js
│   └── index.js
├── .env
├── package.json
└── README.md

📚 Learn More

For more details, check the official documentation for each framework and library used:

• React
• Express
• YouTube Data API v3
• Vercel

📝 License

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

This README structure provides the basics for:

• Installation: Explains how to set up both the frontend and backend.
• Tech Stack: Lists the key technologies used.
• Project Structure: Shows the overall layout.
• Embedded YouTube tutorial: The embed URL can be updated with your actual tutorial's YouTube link.

Feel free to adjust as needed!