Gratisfy

A sleek, cyber-noir inspired YouTube Music player built with React, Vite, and Tailwind CSS.

---

🚀 Features

• 🎵 YouTube Music Integration – Stream and play music directly from YouTube
• 🔍 Advanced Search – Instant search with debouncing + rich results
• 📚 Library Management – Save & organize your favorite tracks
• ⏯️ Queue System – Create and manage custom playlists
• 🎨 Cyber‑Noir UI – Dark mode with purple aesthetics and smooth animations
• 📱 Responsive – Works beautifully on mobile & desktop
• 🎛️ Advanced Controls – Repeat, shuffle, volume, seeking
• ⚡ Performance Optimized – Fast loading & smooth playback

---

🧰 Tech Stack

Frontend

• React 18
• Vite
• Tailwind CSS
• Framer Motion

Backend

• Node.js middleware
• yt-search
• yt-dlp

Other

• Zustand (persistent state)
• HTML5 Audio API
• Lucide React icons

---

🛠️ Getting Started

Prerequisites

• Node.js v16+
• npm or yarn

Installation

git clone https://github.com/jino99/gratisfy
cd gratisfy
npm install

Start Dev Server

npm run dev

Open: http://localhost:5173

---

🎮 Usage

• Search and play tracks
• Save favorites into your library
• Queue songs to build custom playlists
• Use shuffle / repeat / seeking

---

📁 Project Structure

gratisfy/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── assets/
├── public/
├── bin/
├── vite.config.js
├── package.json
└── README.md

---

📡 API

GET /api/ytm/search?q=<query>
GET /api/ytm/stream?videoId=<id>

---

🤝 Contributing

Fork → Branch → Commit → PR

---

📜 License

MIT License

---

🙏 Acknowledgments

YouTube Music • yt-dlp • yt-search • Vite • TailwindCSS • Framer Motion