🎵 Sonix - Music Streaming App

A beautiful Spotify-inspired music streaming application built with React and Node.js. Discover, search, and listen to millions of songs with a stunning dark UI.

⚠️ Disclaimer

This project is built purely for educational purposes to demonstrate full-stack development skills (React, Node.js, API integration, and UI/UX design). It is NOT intended for commercial use. All music content belongs to its respective owners. This project does not host or distribute copyrighted material.

✨ Features

• 🎵 Search and stream music
• 🎨 Beautiful Spotify-inspired UI
• 🌙 Dark theme with gradients
• ⏯️ Full player controls (play, pause, skip, shuffle, repeat)
• 🎚️ Volume control
• 📱 Responsive design
• 🔥 Trending songs on home page
• 🎤 Multiple categories (Bollywood, Punjabi, Romantic, etc.)
• ⚡ Real-time audio streaming

🛠️ Tech Stack

Frontend:

• React 18
• Tailwind CSS
• Zustand (state management)
• Lucide React (icons)

Backend:

• Node.js
• Express.js
• Axios

📸 Screenshots

(Add screenshots here after taking them)

🚀 Getting Started

Prerequisites

• Node.js 16 or higher
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/YOUR_USERNAME/sonix.git
   cd sonix

2. Install backend dependencies

   cd backend
   npm install

3. Install frontend dependencies

   cd ../frontend
   npm install

4. Set up environment variables (optional)

   cd ../backend
   cp .env.example .env

Running the App

1. Start the backend server

   cd backend
   npm start

   Server runs on http://localhost:5000

2. Start the frontend (in a new terminal)

   cd frontend
   npm start

   App opens at http://localhost:3000

📁 Project Structure

sonix/
├── backend/
│   ├── server.js           # Main server file
│   ├── package.json
│   └── .env.example
├── frontend/
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/          # Page components
│   │   ├── store/          # Zustand store
│   │   └── App.js
│   ├── public/
│   └── package.json
└── README.md

🎯 What I Learned

• Building full-stack applications with React and Node.js
• Managing global state with Zustand
• Creating responsive UIs with Tailwind CSS
• Working with REST APIs and audio streaming
• Handling CORS and proxy servers
• Implementing complex media player logic

🤝 Contributing

This is a personal learning project, but suggestions are welcome! Feel free to open an issue.

📝 License

MIT License - This is an educational project. See LICENSE file for details.

🙏 Acknowledgments

• Design inspired by Spotify
• Built as part of my learning journey in full-stack development

---

Note: This project is for educational purposes only. Please support artists by using official streaming services.