Spotify Clone

A modern Spotify clone built with React, TypeScript, Node.js, and Socket.IO, featuring real-time chat, music streaming, admin dashboard, and social features.

Features • Tech Stack • Quick Start • Development • Screenshots

Home Page

Home Screen	Real-time Chat
Admin Dashboard	Album View

• 🎵 Music Streaming: Browse and play songs with a custom audio player.
• 💿 Album Management: Explore albums with detailed track listings.
• 🔍 Search: Search for songs, albums, and artists in real-time.
• 📱 Responsive Design: Optimized for desktop, tablet, and mobile devices.
• 🎨 Custom Player: Audio player with playback controls and progress tracking.
• 👥 Social Features: Friends activity feed showing what others are listening to.

• 💬 Real-time Chat: Socket.IO powered messaging system.
• ⚡ Performance Optimized: Code splitting, lazy loading, and efficient state management.
• 🎨 Modern UI: Tailwind CSS with shadcn/ui components.
• 🔐 Authentication: Secure OAuth integration with Clerk.
• 📊 Admin Dashboard: Manage songs, albums, and view statistics.
• 🎯 State Management: Zustand for lightweight and efficient state handling.

• 🎪 Smooth Animations: Framer Motion for transitions and effects.
• 🎵 Playlist Management: Create and manage custom playlists.
• 📋 Activity Feed: See what friends are listening to in real-time.
• ⚡ Fast Loading: Optimized API calls and caching strategies.

spotifyclone/
├── backend/
│   ├── src/
│   │   ├── controller/      # API controllers
│   │   ├── models/          # MongoDB models
│   │   ├── routes/          # Express routes
│   │   ├── middleware/      # Authentication middleware
│   │   ├── lib/             # Database, Socket.IO, Cloudinary setup
│   │   └── index.js         # Server entry point
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/      # Reusable UI components
│   │   ├── pages/           # Page components
│   │   ├── stores/          # Zustand stores
│   │   ├── layout/          # Layout components
│   │   ├── providers/       # Context providers
│   │   ├── types/           # TypeScript types
│   │   └── lib/             # Utility functions
│   ├── public/              # Static assets
│   └── package.json
├── .env.example             # Environment variables template
└── README.md                # Project documentation

The project demonstrates modern React development with:

1. Custom Hooks: Reusable logic for music playback and chat functionality.
2. Context Providers: Global authentication state with Clerk.
3. Code Splitting: Lazy loading routes to reduce bundle size.
4. Zustand Stores: Lightweight state management for music, chat, and player.

// Music store example
export const useMusicStore = create<MusicStore>((set) => ({
  songs: [],
  albums: [],
  currentAlbum: null,
  isLoading: false,
  fetchAlbums: async () => {
    set({ isLoading: true });
    const response = await axiosInstance.get('/albums');
    set({ albums: response.data, isLoading: false });
  },
}));

// Socket.IO integration for real-time messaging
socket.on('newMessage', (message) => {
  useChatStore.getState().addMessage(message);
});

socket.emit('sendMessage', {
  receiverId: userId,
  content: messageContent,
});

• Node.js 16+
• MongoDB instance (local or Atlas)
• Cloudinary account for media storage
• Clerk account for authentication

1. Clone the repository

   git clone https://github.com/Niteshagarwal01/Spotifyclone.git
   cd Spotifyclone

2. Install dependencies

   # Install backend dependencies
   cd backend
   npm install
   
   # Install frontend dependencies
   cd ../frontend
   npm install

3. Set up environment variables

   Create .env files in both backend and frontend directories:

   Backend .env:

   MONGODB_URI=your_mongodb_uri
   PORT=5000
   ADMIN_EMAIL=your_admin_email
   NODE_ENV=development
   CLOUDINARY_CLOUD_NAME=your_cloudinary_name
   CLOUDINARY_API_KEY=your_cloudinary_key
   CLOUDINARY_API_SECRET=your_cloudinary_secret
   CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   CLERK_SECRET_KEY=your_clerk_secret_key

   Frontend .env:

   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key

4. Start development servers

   # Start backend (from backend directory)
   npm run dev
   
   # Start frontend (from frontend directory)
   npm run dev

5. Seed data (Optional)

   # From backend directory
   npm run seed:albums
   npm run seed:songs

Modify Tailwind theme in frontend/tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        'spotify-green': '#1DB954',
        'spotify-black': '#191414',
      },
    },
  },
};

Backend:

MONGODB_URI=mongodb://localhost:27017/spotify-clone
PORT=5000
ADMIN_EMAIL=admin@example.com
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
CLERK_PUBLISHABLE_KEY=your_publishable_key
CLERK_SECRET_KEY=your_secret_key

Frontend:

VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
VITE_API_URL=http://localhost:5000

• Code Splitting: Route-based and component-based splitting with React.lazy.
• Lazy Loading: Images and audio files loaded on demand.
• Memoization: React.memo and useMemo for expensive operations.
• Bundle Analysis: Optimized imports and tree shaking with Vite.
• API Optimization: Efficient data fetching with caching strategies.

Current Limitations

• Requires Clerk account for authentication.
• Cloudinary required for media storage.
• Basic error handling for network failures.

Planned Features

• Playlist creation and management
• Liked songs collection
• Advanced search filters
• User profiles and customization
• Lyrics integration
• Podcast support
• Comprehensive test suite
• PWA support for offline playback

Contributions are welcome! Please feel free to:

1. Report bugs and issues.
2. Suggest new features.
3. Submit pull requests.

This project is open source and available under the MIT License.