Lunar
Working
An music streaming web application with features like music playback, song search, playlist creation, and user authentication.
Key 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.
Challenges 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.
Key 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.