EchoNode 🎶

---

✨ Overview

EchoNode is a modern, aesthetically‑styled web app that streams music from YouTube directly to your browser using the powerful yt‑dlp and mpv tools. The UI features a dark, futuristic vibe with animated “orbs”, a visualizer, and a quick‑tags bar for instant playback of popular songs.

“Stream your universe, effortlessly.” – the EchoNode tagline.

🚀 Features

• One‑click song playback – type any song name, artist, or vibe and EchoNode streams the best YouTube match.
• Popular presets – predefined buttons for quick access to trending tracks.
• Dynamic visualizer – animated bars that react to the loading state.
• Animated background orbs for a spatial‑audio feel.
• Responsive design – works on desktop and mobile browsers.
• Server‑side API – /api/play accepts a POST request with { "title": "song name" } and streams the audio via yt‑dlp → mpv.

🛠️ Tech Stack

Component	Version
Next.js	16.1.1
React	19.2.3
TypeScript	^5
TailwindCSS	^4
yt‑dlp	latest (install via pip)
mpv	latest (system package)

📦 Getting Started

Prerequisites

• Node.js (v20 or later) – download
• pnpm / npm – the repo uses npm scripts.
• yt‑dlp – install with pip install -U yt-dlp or your package manager.
• mpv – a media player that can read from stdin.

  # Ubuntu/Debian
  sudo apt-get install mpv
  # macOS (brew)
  brew install mpv

Installation

# Clone the repo
git clone https://github.com/<YOUR_USERNAME>/echonode.git
cd echonode

# Install Node dependencies
npm install

Development server

npm run dev

Open http://localhost:3000 in your browser. The app will hot‑reload as you edit files.

Building for production

npm run build   # Generates an optimized production build
npm start       # Starts the production server

📡 API Reference

POST /api/play

• Request Body (JSON)

  { "title": "song name or artist" }

• Responses
  • 200 OK – { "message": "Playing: <title>" }
  • 400 Bad Request – { "error": "Song title is required" }
  • 500 Internal Server Error – { "error": "Failed to Play" }

The endpoint spawns yt‑dlp to fetch the best audio stream from YouTube and pipes it directly to mpv for playback.

🎨 Customisation

• Tailwind Config – edit tailwind.config.js to adjust colours, fonts, or breakpoints.
• UI Themes – the root layout imports Google fonts Geist and Geist_Mono. Swap them out in app/layout.tsx if you prefer a different typeface.
• Orbs & Visualizer – the animation parameters live in app/page.tsx under the useEffect hooks – feel free to tweak size, speed, or colours.

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a feature branch (git checkout -b feat/your-feature).
3. Install dependencies and make your changes.
4. Run lint and type‑check:

   npm run lint
   npx tsc --noEmit

5. Open a pull request with a clear description of what you changed.

📜 License

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

---

Contact

Twitter/X : @itsCzar16