Project Overview
MelodyHub is a collaborative music streaming web application built with Django that enables users to upload, share, and listen to music together in real-time. The platform features synchronized listening rooms, playlist management, and social interaction capabilities.
Key Features
- Real-time Collaboration: Synchronized music playback across multiple users
- Music Upload System: Support for various audio formats with metadata extraction
- Social Features: User profiles, playlists, and favorites management
- Authentication: Google OAuth2 integration for seamless login
- Responsive Design: Mobile-friendly interface with custom audio controls
Music Streaming
Custom audio player with progress controls, volume management, and playlist navigation for seamless music experience.
Collaborative Listening
Real-time synchronized playback allowing multiple users to listen to the same music simultaneously with chat functionality.
Playlist Management
Create, edit, and share playlists with drag-and-drop functionality and favorites tracking system.
Real-time Search
Instant search functionality using AJAX for finding music, artists, and playlists without page refreshes.
System Architecture
MelodyHub follows a modern web application architecture using Django's MVT pattern with WebSocket integration for real-time features. The system is designed for scalability and user experience.
🌐 Django Web Framework
Core application built with Django providing MVC architecture, ORM for database operations, and template rendering.
- User authentication and profiles
- Music upload and metadata handling
- Playlist and favorites management
- RESTful API endpoints
⚡ Real-time Communication
Django Channels with WebSocket support for synchronized music playback and live chat functionality.
- Synchronized audio playback
- Real-time chat messaging
- User presence tracking
- Room management system
🎧 Audio Processing
Music file handling with metadata extraction using Mutagen library and efficient storage management.
- Multiple audio format support
- Automatic metadata extraction
- File validation and processing
- Optimized storage handling
🔐 Authentication System
Secure user authentication with Google OAuth2 integration and session management for personalized experiences.
- Google OAuth2 integration
- Session-based authentication
- User profile management
- Secure API endpoints
Technical Implementation
The application demonstrates modern web development practices with Django, implementing both traditional web patterns and real-time communication features.
Django Models Architecture
The data model design supports user management, music storage, and social features:
# Core Data Models
class UserProfile:
- User authentication and profile information
- Social features and preferences
- Playlist and favorites relationships
class Music:
- Audio file storage and metadata
- Artist, album, and genre information
- Upload timestamp and file validation
class Playlist:
- User-created music collections
- Many-to-many relationships with Music
- Sharing and collaboration features
class ListenTogether:
- Real-time listening room management
- Current track and playback state
- Participant tracking and chat historyWebSocket Implementation
Real-time features powered by Django Channels for synchronized experiences:
# WebSocket Consumer Design
class MusicRoomConsumer:
# Connection Management
- User joins/leaves listening room
- Authentication and permission checks
- Room state synchronization
# Music Synchronization
- Broadcast play/pause events
- Sync playback position across clients
- Handle track changes and queue updates
# Chat Functionality
- Real-time message broadcasting
- User presence indicators
- Message history and persistenceFrontend JavaScript Integration
Client-side functionality for audio control and real-time communication:
// Audio Player Management
class MusicPlayer {
// Playback Control
- Play, pause, seek functionality
- Volume and progress bar controls
- Playlist navigation and queue management
// WebSocket Integration
- Receive synchronization commands
- Send user actions to other participants
- Handle connection state and reconnection
// UI Updates
- Real-time progress updates
- Dynamic playlist rendering
- Chat message display and scrolling
}Key Features & Functionality
Core Application Features
Music Upload & Management
- Drag-and-drop file upload interface
- Automatic metadata extraction (title, artist, album)
- File format validation and conversion
- Personal music library organization
Social & Collaboration
- User profiles with customizable preferences
- Playlist sharing and discovery
- Real-time chat during listening sessions
- Favorites and recommendation system
Search & Discovery
- AJAX-powered instant search
- Filter by artist, album, or genre
- Playlist and user discovery
- Recently played and trending music
Learning Outcomes
This project provided hands-on experience with full-stack web development, real-time communication, and modern web technologies.
Technical Skills Developed
- Django Framework: MVT architecture, ORM, authentication, and file handling
- Real-time Communication: WebSockets, Django Channels, and Redis integration
- Frontend Development: JavaScript, AJAX, DOM manipulation, and responsive design
- Database Design: Relational modeling, many-to-many relationships, and query optimization
- Authentication: OAuth2 integration and session management
- File Processing: Audio metadata extraction and file validation
Architecture Design
Learned to design scalable web applications with proper separation of concerns and modular components.
Real-time Systems
Gained experience with WebSocket programming and synchronization challenges in distributed systems.
User Experience
Developed skills in creating intuitive interfaces and smooth user interactions for media applications.
Full-Stack Development
Integrated frontend and backend technologies to create a cohesive, feature-rich web application.