https://github.com/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!
https://github.com/ramxcodes/syncify-frontend
Last synced: 8 months ago
JSON representation
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!
- Host: GitHub
- URL: https://github.com/ramxcodes/syncify-frontend
- Owner: ramxcodes
- Created: 2024-11-07T14:18:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-21T09:15:20.000Z (about 1 year ago)
- Last Synced: 2025-08-25T02:46:23.539Z (9 months ago)
- Language: TypeScript
- Homepage: https://www.syncify.rocks
- Size: 20.2 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Syncify – Yet Another Spotify Clone... But Better! 🎧
[](https://github.com/ramxcodes/Syncify-frontend)   [](https://twitter.com/intent/follow?screen_name=ramxcodes)
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!
[](https://syncify.rocks)
#### LIVE DEMO 👉🏻 Click to visit website
#### VISIT DEV PAGE 👉🏻 Click to visit
#### Connect With Me 🚀
[](https://www.linkedin.com/in/ramcodes) [](https://www.github.com/ramxcodes) [](https://twitter.com/ramxcodes) [](https://instagram.com/__ramfr)
---
## 🎯 **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
[](https://syncify.rocks)
- **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
[](https://syncify.rocks)
- **Node.js** and **Express** for the API.
- **MongoDB** for scalable data storage.
---
## 🚀 **Getting Started**
### Repositories
- **Frontend:** [Syncify-Frontend](https://github.com/ramxcodes/Syncify-frontend)
- **Backend:** [Syncify-Backend](https://github.com/ramxcodes/Syncify-backend)
### Frontend Environment Variables
Create a `.env` file in the root directory with the following variables:
```env
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:
```env
PORT=
MONGODB_URL=
ADMIN_EMAIL=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_CLOUD_NAME=
NODE_ENV=development
CLERK_PUBLISHABLE_KEY=
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
[](https://syncify.rocks)
### 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](https://www.linkedin.com/in/ramcodes)
- [GitHub](https://github.com/ramxcodes)
- [Twitter](https://twitter.com/ramxcodes)
- [Instagram](https://instagram.com/__ramfr)
Happy coding! 🚀