feat: Immersive Music Page, Local Playlist Management, Uploads, Favorites, and Animated UI

[gurjeetsinghvirdee]

• Fix: 🎵 Enhance Mood Playlist Experience — Create Dedicated Interactive Music Page (Weather Synced UI + User Playlists) #20

Description

This PR introduces a major upgrade to the music experience, focusing on in-app playlist management, local audio uploads, custom playback, and a beautiful, animated UI using Framer Motion. The work is ongoing see below for a list of completed and pending features.

✅ Features Implemented

• Dedicated Mood Playlist page inside SkyBuddy
• Dynamic weather-synced backgrounds (rain, snow, clouds, etc.)
• User playlist management: add, edit, delete playlists by mood (local storage)
• Add and delete tracks within playlists
• Upload, list, play, and delete multiple local audio files per playlist
• Custom, professional audio player UI (no default bar, no download)
• Responsive UI with Framer Motion transitions and animations
• No external redirection for local playback (Spotify/YT embed is in-app)
• • Interactive music player:
  • Volume control
  • Shuffle
  • Animated progress bar (the current bar is functional but not animated)
  • Next/Previous (for uploaded tracks in the custom player)
• Shareable mood playlists: generate shareable links for playlists
• State management with Zustand/Context API (currently using React state/hooks)
• • Storage with Cloudflare R2 + Cloudflare CDN (currently only local storage)

⏳ Features NOT YET Implemented

• API integration: Spotify API/Open Music API for real track data (currently using local/demo data)

Attachments

Recording.2025-10-12.061121.1.mp4

[gurjeetsinghvirdee]

Heya @SrinjoyeeDey,
This PR will take some time. And just wanted to share a quick thought, Firebase might not be the best fit for storing all the mood playlist audio. Since we’re planning to have hundreds of songs (around 3GB+ total as we have 5 different moods), it could easily surpass the free tier limits. Firebase also doesn’t notify you when limits are crossed, so it might lead to unexpected billing later 😅.

I have an alternative suggestion that could work smoothly and stay completely free if you’d like. I can share that idea!

[SrinjoyeeDey]

@gurjeetsinghvirdee , yes please go ahead and share the idea

[gurjeetsinghvirdee]

@SrinjoyeeDey,
We can use Cloudflare R2 + Cloudflare CDN, which gives 10GB free storage, super-fast global delivery, and smooth streaming without buffering.

It’s perfect for hosting all our mood playlist songs, and we can keep user favorites locally using localStorage. That way, everything stays fast, free, and simple to maintain.

[SrinjoyeeDey]

Go ahead @gurjeetsinghvirdee and also document the entire implementation which can smoothen other developers work

[gurjeetsinghvirdee]

@SrinjoyeeDey
For documentation, I will open another PR that will not be a part of hacktoberfest. I mean don't label it anything, just mark it as docs, nothing else.

[SrinjoyeeDey]

Heyy @gurjeetsinghvirdee , any progress?

[gurjeetsinghvirdee]

Heyy @gurjeetsinghvirdee , any progress?

Sorry, but my health is still down! I try to do this before 18

[gurjeetsinghvirdee]

Added a custom music player with all functions

[gurjeetsinghvirdee]

[gurjeetsinghvirdee]

Recording.2025-10-17.054637.mp4

Hey @SrinjoyeeDey,
I've implemented the code for Cloudflare R2 and CDN integration, but there's a minor blocker:

• The API setup requires a credit card for account verification
• I attempted to use my card, but it wasn't accepted
• Currently using localStorage as a fallback for audio files
• Once the account is verified, data will be fetched directly from Cloudflare R2

Spotify API Integration

The Spotify API integration code is implemented, but requires a deployed website:

• OAuth redirect URLs must point to a deployed domain
• Authentication flows will redirect to the SkyBuddy homepage if authentication fails
• All the necessary code is in place for when we have a proper deployment

This PR is nearly complete with the following status:

✅ UnifiedPlayer component fully implemented
✅ Playlist management functionality complete
✅ Track upload/import functionality working
✅ README updated with Cloudflare setup instructions

🟡 Some CSS refinements still needed
🟡 Missing one button for adding local songs to playlists
🟡 API integrations are ready but require deployment/verification

We can address the remaining minor issues in future PRs.

Note: Any performance issues you're seeing are due to my system lagging, not the application itself.

[SrinjoyeeDey]

@gurjeetsinghvirdee well done but

can you update the ui for both dark and light mode and try to match it with the background with a subtle glowing background to elevate the theme

[SrinjoyeeDey]

Also @gurjeetsinghvirdee , for cloudflare I myself tried to use my card but it failed , is there any alternative way to test it or may be any alternative platform like cloudflare which doesn't require card details as many contributor is not comfortable with it.

[SrinjoyeeDey]

Another issue I want to address, previously, one of the buttons were redirecting to the spotify page, now as you said it requires authentication, can you explain how the entire process of authentication is to be done and is there any endpoint required for it? @gurjeetsinghvirdee

[gurjeetsinghvirdee]

Hey @SrinjoyeeDey! No worries about the card issue.
Let's go with GitHub Releases for now only maintainers can upload, but we can automate it with a workflow/button later so contributors can add songs too. Once you get some funding in the future, we can easily migrate to Supabase or similar platforms that support user uploads seamlessly.

For Spotify authentication: You'll need to create a Spotify Developer app at Dashboard, get your Client ID & Secret, and set a Redirect URI. The flow works like: User clicks "Login with Spotify" → Redirects to Spotify → User authorizes → Spotify redirects back with auth code → We exchange it for access tokens. The main blocker is we need the site deployed first since Spotify requires a valid redirect URL.

[SrinjoyeeDey]

okay @gurjeetsinghvirdee , but can you update the ui? Then today itself i will review and merge it

[gurjeetsinghvirdee]

Hey @SrinjoyeeDey,
Can you review it again? I believe this will not merge today 😅!

Light Mode

Dark Mode

[SrinjoyeeDey]

@gurjeetsinghvirdee , well done. But I observed this small error or am confused

clicking on the text bar to add track(or can we add track?) is directing to a page This playlist doesn't have any tracks yet. Add some tracks to get started!

[SrinjoyeeDey]

@gurjeetsinghvirdee , any update?

[gurjeetsinghvirdee]

@SrinjoyeeDey
Hey! Thanks for the reminder. I did look into the issue, but currently, my system is having some serious performance issues (VS Code and Codespaces both are lagging badly), and I also have a heavy workload for my full-time task. I need to complete and clean up data from 130+ forms before Monday.

I genuinely enjoy contributing and wanted to finish this PR, but with everything going on, I might not be able to fix it immediately. If it’s okay, I can pick it up in a few days once my schedule clears up otherwise, feel free to reassign or take over if it’s time-sensitive.

Sorry for the delay, and thanks for understanding!

[SrinjoyeeDey]

It's okay! Any other updates @gurjeetsinghvirdee