Overview

Lunar is an immersive music streaming web application crafted to deliver seamless audio playback, effortless song search, and personalized playlist creation. It boasts a sleek, minimalist zinc-based user interface optimized for both desktop and mobile experiences.

Features

• Global Audio Engine: Custom player allowing uninterrupted background playback across different routes.
• Admin CMS Dashboard: Secure portal for admins to upload tracks and manage media via Firebase.
• Smart Content Discovery: Real-time search and dynamic recommendations for instant browsing.
• Responsive, Minimalist UI: A monochromatic dark-mode design fully optimized for mobile touch and desktop panels.

Learnings

• Global State with Zustand: Mastered lightweight state management to handle audio playback without Redux boilerplate.
• Data Synchronization: Learned to reliably sync large media uploads in Firebase Storage with a custom backend API.
• Performance Optimization: Improved React render cycles by keeping high-frequency updates out of the global state.

Challenges I Faced

• Persistent Playback: Keeping music playing during route changes required completely decoupling the audio element from page-level components.
• Progress Bar UI Lag: Updating the audio timeline every second caused lag; fixed by using local state and requestAnimationFrame for smooth scrubbing.