Project RhythmX

Project Overview

RhythmX is a premium, high-performance music streaming interface built entirely with modern web technologies. This project focuses on pushing the boundaries of Vanilla JavaScript and Modern CSS to deliver a "Spotify-level" experience without the overhead of heavy frameworks.

Technology Stack

• Core: HTML5 (Semantic Structure), CSS3 (Modern Flex/Grid), Vanilla JavaScript (ES6+).
• API: Integrated with iTunes Search API for global music access.
• Iconography: Font Awesome 5 for consistent and scalable vector icons.
• Typography: Google Fonts (Outfit) for a sleek, premium editorial feel.

Key Features

• Global Search: Real-time filtering of local tracks combined with asynchronous global music searching.
• Premium Player: Branded purple UI with circular pointers and dynamic gradient-filled progress bars.
• Download & Share: Integrated file downloading (via Blobs) and native Social Sharing (Web Share API).
• Responsive Design: Fully fluid glassmorphism layout optimized for all screen sizes.

Technical Innovations

• Dynamic Sliders: Custom JavaScript-driven linear gradients to ensure high-visibility for circular pointers without clipping.
• Performance Optimization: Implemented Debouncing on search to minimize API overhead and improve responsiveness.
• Accessibility: Screen-reader friendly labels and keyboard shortcuts (Space for Play/Pause, Arrows for Seek).