ramxcodes / Syncify-frontend

Syncify is a modern, feature-rich music streaming platform that combines a sleek user interface with admin dashboard. Whether you're here to discover new tracks, manage music, or analyze stats, Syncify has it all!

Syncify – Yet Another Spotify Clone... But Better! 🎧

Syncify is a modern, feature-rich music streaming platform that combines a sleek user interface with powerful backend capabilities. Whether you're here to discover new tracks, manage music, or analyze stats, Syncify has it all!

LIVE DEMO 👉🏻 Click to visit website

VISIT DEV PAGE 👉🏻 Click to visit

Connect With Me 🚀

---

🎯 Features

🎶 Play Your Way

• Stream Albums – Enjoy uninterrupted listening.
• Shuffle Play – Experience music in a randomized order.
• Curated Playlists – Find playlists tailored to every mood and genre.

🔍 Search Songs

• Locate your favorite songs instantly.

📈 Discover & Trends

• Explore trending tracks and personalized "Made for You" recommendations.

👀 Real-Time Listening

• See what others are listening to and join in the fun.

✅ Online/Offline Status

• Know who's online to chat or offline enjoying the beats.

💬 Chat About Music

• Connect and chat with other users about your favorite tracks and albums.

---

🎨 Admin Dashboard

The Admin Dashboard empowers administrators with:

• Song & Album Management – Add, edit, or delete songs and albums.
• Analytics – Gain insights into:
  • Total users
  • Total songs
  • Total albums
  • Total artists

---

🛠️ Technologies Used

Frontend

• React + Vite – High-performance frontend framework.
• TypeScript – Type-safe development.
• Zustand – Simplified state management.
• Tailwind CSS – Utility-first styling for responsive designs.
• Shadcn – Prebuilt UI components for rapid development.
• Framer Motion – Advanced animations for enhanced user experiences.

Backend

• Node.js and Express for the API.
• MongoDB for scalable data storage.

---

🚀 Getting Started

Repositories

• Frontend: Syncify-Frontend
• Backend: Syncify-Backend

Frontend Environment Variables

Create a .env file in the root directory with the following variables:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_key
VITE_BASE_URL=your_backend_url
VITE_CHAT_BASE_URL=your_chat_backend_url

Backend Environment Variables

Create a .env file in the backend root with the following variables:

PORT=<your-port>
MONGODB_URL=<your-database-url>
ADMIN_EMAIL=<admin-email>
CLOUDINARY_API_KEY=<your-cloudinary-api-key>
CLOUDINARY_API_SECRET=<your-cloudinary-api-secret>
CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>
NODE_ENV=development
CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
CLERK_SECRET_KEY=<your-clerk-secret-key>

---

🌟 Backend Features

🎸 Control playback with next and previous song options
🔈 Adjust the volume seamlessly
🎧 Admin dashboard for managing songs and albums
💬 Real-time chat with other users
👀 View what others are listening to in real-time
📊 Analytics and insights for the admin

Backend Tech Stack

Core Features

• Secure Authentication – Powered by Clerk.
• Real-Time Communication – Via Socket.IO.
• Cloud Storage – Handle uploads with Cloudinary.
• Data Analytics – Track platform stats.

---

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

How to Contribute

1. Fork the repository.
2. Clone your forked repository.
3. Create a new branch (git checkout -b feature/your-feature).
4. Make changes and commit (git commit -m "Add your message").
5. Push to your branch (git push origin feature/your-feature).
6. Create a Pull Request.

Feel free to reach out to me for guidance or collaboration:

• LinkedIn
• GitHub
• Twitter
• Instagram

Happy coding! 🚀