Phonq is a specialized music streaming web application built from scratch, focusing on the Phonk genre. This project demonstrates advanced web development skills through a fully functional music platform with real-time audio visualization and comprehensive user features.
- Custom HTML5 Audio Player: Complete music player with play/pause, seek, and volume controls
- Real-time Waveform Visualization: Canvas API and Web Audio API integration for live audio frequency analysis
- Queue Management System: Shuffled playback queues with next/previous navigation and visual queue display
- Multiple Playback Modes: Sequential play, shuffle mode, and loop functionality
- Real-time Stats Tracking: Listen counts, download tracking, and like systems with localStorage persistence
- Popular Songs Algorithm: Ranking system based on user engagement metrics
- Auto-updating Interface: Periodic refresh system to sync statistics across the platform
- Responsive Design: Mobile-first design that adapts seamlessly across devices
- Dynamic Track Rendering: JavaScript-powered track card system with lazy loading
- Category Organization: Automatic categorization system for Slowed and Speed-Up tracks
- Search Functionality: Live search with popup interface and filtering capabilities
- Google OAuth Integration: User authentication system with profile management
- Personal Favorites: User-specific favorites system tied to authenticated accounts
- Social Sharing: Comprehensive sharing system (WhatsApp, Facebook, Telegram, Twitter) with custom embed codes
- Download System: Track download functionality with progress tracking
- Audio Metadata Extraction: Intelligent system to extract artist and track info from filename patterns
- Canvas Visualization: Custom waveform renderer with dynamic styling and responsive scaling
- Event Management: Complex event handling system with proper propagation control
- Data Persistence: localStorage-based data management for user statistics and preferences
- Touch-Friendly Interface: Optimized interactions for mobile devices
- Adaptive Layouts: Different UI patterns for desktop vs mobile (modals vs inline displays)
- Performance Optimization: Lazy loading and efficient rendering for smooth mobile experience
- Frontend: HTML5, CSS3, JavaScript (ES6+)
- Audio Processing: Web Audio API, Canvas API
- Authentication: Google OAuth 2.0
- Data Storage: localStorage for client-side persistence
- UI/UX: Responsive design with custom animations and transitions
Phonq/
├── README.md # Project overview and instructions
├── package.json # Node.js dependencies and scripts
├── public/ # Static public assets
│ ├── index.html # Main HTML page
│ ├── favicon.ico # Favicon
│ ├── assets/ # Images, icons, song covers, etc.
│ └── ... # Other static files
├── src/ # Source code folder (JS, CSS, HTML files)
│ ├── index.js # Main JavaScript entrypoint
│ ├── app.js # Main app logic and initialization
│ ├── components/ # Reusable UI components
│ │ ├── AudioPlayer.js # Custom audio player component
│ │ ├── TrackList.js # Rendering track grids by category
│ │ ├── NowPlaying.js # Now-playing preview frame
│ │ └── ... # Other UI components
│ ├── styles/ # CSS or SCSS stylesheets
│ │ ├── main.css # Global styles
│ │ └── theme.css # Light/dark theme styles
│ ├── utils/ # Utility functions
│ │ ├── bpmDetector.js # BPM detection algorithms
│ │ ├── genrePredictor.js # Genre classification
│ │ └── audioHelpers.js # Audio processing utilities
│ ├── data/ # Static data files or mock JSON
│ │ └── songs.js # Songs metadata array
│ └── index.html # Single page HTML
├── backend/ # Backend code (Express or Django)
│ ├── server.js # Express server entrypoint
│ ├── routes/ # API route handlers
│ ├── controllers/ # Business logic
│ ├── models/ # Database models (Postgres, MongoDB)
│ └── config/ # DB connection, environment config
├── database/ # Database schema and migration scripts
├── tests/ # Unit and integration tests
│ ├── frontend/
│ └── backend/
├── .gitignore # Files ignored by git
├── LICENSE # License info
└── docs/ # Additional documentation
- Modern web browser with Web Audio API support
- Local web server (for development)
- Clone the repository
git clone https://github.com/Heshanmvppp/Phonq.git
- Navigate to the project directory
cd Phonq - Open
index.htmlin your preferred web browser or serve it using a local server
This project showcases full-stack web development capabilities including:
- Complex audio processing and visualization
- Real-time data management and statistics
- User authentication and personalization
- Cross-platform responsive design
- Performance optimization and user experience design
The platform demonstrates not just technical implementation but also thoughtful UX design, making it accessible and engaging for users while maintaining high performance standards across all devices.
🚧 Project paused to focus on my ethical hacking career
✅ Pushed to GitHub for portfolio/archive
🧪 May use as a test bed for web app pentesting in the future
While this project is currently paused, feel free to explore the code and suggest improvements through issues.
This project is open source and available under the MIT License.
Heshan - @Heshanmvppp
Project Link: https://github.com/Heshanmvppp/Phonq
Built with ❤️ for the Phonk music community