A premium, open-source music super-app
YouTube Music · Spotify Sync · Offline Downloads · Synced Lyrics · Per-Song Atmosphere

Resona is a music super-app that unifies YouTube Music, Spotify, and local audio into one beautiful, premium shell. Inspired by Gemini-style ambient aesthetics, Material You colour extraction, and Apple Music-quality lyric sync.

Every song gives the entire app a unique color DNA — background, glows, controls, mini-player — all shift to match the album's dominant Pantone palette.

• Vinyl Spin Animation — rotating disc with spring-back on pause, inner groove rings
• Per-Song Pantone Atmosphere — 10 curated palettes assigned per album art, entire app recolors
• Gapless Playback — pre-buffers next track at 80% progress via InnerTube
• Skia Audio Visualizer — FFT-driven GPU-accelerated EQ bars (React Native Skia)
• Background Audio — lock screen controls, notification player (react-native-track-player)

• Synced Lyrics — LRC-format line-by-line karaoke scroll (LRCLib → Kugou fallback)
• Word-Level Highlight — Apple Music-style per-word gradient glow on active line
• Tap-to-Seek — tap any lyric line to jump to that timestamp
• Offline Lyrics Cache — SQLite FTS4 indexed for fast local search
• Lyric Recall Search — "find song by lyric fragment" using FTS4 full-text search

• YouTube Music — streaming via InnerTube API, search, playlists, history
• Spotify Sync — OAuth2 PKCE, pull liked songs + playlists + audio features (BPM/energy/valence)
• ISRC Cross-Reference — maps Spotify tracks → YouTube equivalents via ISRC + Sørensen-Dice fuzzy matching
• Google OAuth2 — YouTube Music library access

• Downloads Screen — animated progress bars, quality picker, storage stats
• Quality Options — 128k AAC / 320k MP3 / FLAC lossless
• BullMQ + FFmpeg — background download queue with audio transcoding
• Storage Dashboard — used/available space, per-file management

• Sleep Timer — elegant volume fade (30s ramp → 4s final fade), checks real playback state
• Mood Auto-DJ (Phase 5) — Spotify audio features → contextual auto-queue

resona/
├── src/
│   ├── screens/           # NowPlaying, Lyrics, Home, Search, Library, Downloads, Settings
│   ├── components/
│   │   ├── player/        # AudioVisualizer (Skia)
│   │   └── lyrics/        # SyncedLyricsList (word-level highlight)
│   ├── services/
│   │   ├── youtube/       # InnerTubeClient, ResolvingDataSource
│   │   ├── spotify/       # SpotifyClient (Web API)
│   │   ├── auth/          # GoogleAuth, SpotifyAuth (PKCE)
│   │   ├── lyrics/        # LyricsClient, LrcParser, LyricSearch (FTS4)
│   │   ├── sync/          # ISRCResolver
│   │   └── theme/         # PaletteExtractor, ColorExtractor
│   ├── stores/            # Zustand: usePlaybackStore, useDownloadStore, useThemeStore, useSleepTimerStore
│   ├── db/                # SQLite client with FTS4, downloads, spotify_sync schema
│   ├── navigation/        # AppNavigator (bottom tabs + slide-up player)
│   ├── theme/             # colors.ts (Pantone palette), typography.ts
│   └── config.ts          # Central constants (keys, endpoints, quality presets)
│
└── backend/               # Node.js + Fastify
    ├── server.ts          # API: /stream, /search, /download, /search-isrc
    └── workers/
        └── downloadWorker.ts  # BullMQ + FFmpeg transcoding pipeline

• Node.js 20+
• Expo CLI
• Redis (for download queue)
• FFmpeg (for audio transcoding)

git clone https://github.com/nikhil/resona.git
cd resona

npm install
npx expo install expo-file-system expo-web-browser expo-auth-session expo-crypto

npx expo start

cd backend
npm install
cp .env.example .env   # Fill in your keys
npm run dev

Create backend/.env:

SPOTIFY_CLIENT_ID=your_spotify_client_id
SPOTIFY_REDIRECT_URI=your_redirect_uri
REDIS_URL=redis://localhost:6379
BACKEND_PORT=3000

Typography: DM Serif Display (song titles) + DM Sans (UI) + JetBrains Mono (timestamps)

Animations: React Native Reanimated 3 (120fps UI thread), Skia Canvas (GPU visualizer)

MIT — see LICENSE

Built with ❤️ using Expo · React Native · Skia · Reanimated 3 · Fastify · BullMQ