Ichofy – Your Stylish Music Companion🎧

Ichofy 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, Ichofy has it all!

Homepage

LIVE DEMO 👉🏻 Click to visit website

VISIT MY PORTFOLIO 👉🏻 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.

📈 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.

• 🎸 Listen to music: Play, pause, and skip between songs effortlessly.

• 🔈 Volume control: Adjust the volume with an intuitive slider.

• 🎧 Admin dashboard: Create and manage albums and songs easily.

• 💬 Real-time chat: Interact with other users through an integrated chat app.

• 👨🏼‍💼 Online/Offline status: See who's online and ready to chat.

• 👀 Friend activity: See what others are listening to in real-time.

• 📊 Analytics dashboard: Gain insights into aggregated user data.

🎨 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

• Frontend: React, Tailwind CSS

• Backend: Node.js, Express

• Database: MongoDB

• State-Management: Zustand

• Authentication: Clerk

• Real-time Features: Socket.IO

• Deployment: Render.com

🛠️ 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

• Client: Ichofy-Client
• Server: Ichofy-Server

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:

Happy coding! 🚀