project-4a07d639

bykaran walia

Music streaming platform which also works offline plays free royalties music and lets you add your own music in library. Example like Spotify, SoundCloud. PewPee: A feature-rich app with a built-in royalty-free library that lets you download songs for offline playback and import your own music files (MP3, FLAC, WAV) from your device or cloud storage. It's completely ad-free. · Freegal: A unique, completely free and legal service offering access to over 20 million licensed songs, including major label tracks. It requires a library card from a participating library. You can stream unlimited music and download a set number of DRM-free MP3s per week for permanent offline use. ROLE: Act as a senior full-stack mobile architect and senior React Native/Node.js developer. GOAL: Generate a complete, well-structured codebase for a cross-platform music streaming mobile app (iOS & Android) named "MixTape". CORE REQUIREMENTS: 1. Offline Playback: Tracks must be downloadable to the device and playable without an internet connection (using local SQLite/Realm for metadata and file system storage for MP3s). 2. Royalty-Free Catalog: Pre-populate the app with a library of 50+ royalty-free/CC-licensed tracks (sourced from the Free Music Archive or similar public APIs, or embedded as base64 fallbacks). Users must be able to browse, search, and stream these instantly. 3. User Uploads: Allow users to import their own music files from their device's local storage (internal/external folders) into a separate "My Library" tab. These files must be indexed, tagged (ID3 tags read), and playable offline immediately. 4. Unified Player: A single persistent audio player (background-capable) that can play tracks from BOTH the royalty-free catalog and the user's local uploads in a single unified queue. TECH STACK (Use this exact stack): · Frontend: React Native (Expo SDK 51+) with TypeScript. · Audio Engine: react-native-track-player (for background playback, caching, and offline queue management). · Local Storage: react-native-fs + expo-sqlite (for indexing uploaded files and downloaded royalty tracks). · Backend: Node.js (Express) + Prisma ORM + PostgreSQL (for user accounts and global royalty-free track metadata). · File Hosting: AWS S3 or Cloudinary for hosting the royalty-free MP3 files. · Auth: JWT-based authentication. FUNCTIONAL SPECIFICATIONS (Break this down into clear modules): · Auth Screen: Simple email/password sign-up and login. · Home/Discover Tab: Display the royalty-free catalog with a search bar, genre filters, and a "Download" button on each track. · My Music Tab: A file-picker interface that scans the user's phone for .mp3, .flac, and .wav files. Display them in a list with play buttons. Handle permission requests gracefully. · Downloads Manager: A dedicated section showing all downloaded royalty-free tracks. Implement a download queue with progress indicators. Downloaded tracks must survive app restarts. · Now Playing Screen: Full-screen player with album art (generated from metadata), seek bar, shuffle, repeat (single/queue), and a "Add to Playlist" button. · Playlists: Allow users to create custom playlists that mix uploaded files AND downloaded royalty-free tracks together. DATA MODELS (Generate schemas for these): · User: id, email, password_hash. · RoyaltyTrack: id, title, artist, duration, genre, cover_art_url, stream_url, s3_key. · UserUpload: id, user_id, local_uri, title, artist, duration, file_size. · Playlist: id, user_id, name, tracks_order (JSON array of {track_id, track_type: 'royalty'|'upload'}). · DownloadedTrack: id, user_id, royalty_track_id, local_file_path. API ENDPOINTS REQUIRED (Backend): · POST /auth/register, /auth/login · GET /tracks/royalty (paginated, filterable by genre) · GET /tracks/royalty/:id (returns stream URL) · POST /user/uploads (sync local upload metadata to cloud for backup) UI/UX CONSTRAINTS: · Use a dark theme (like Spotify) with accent colors (#1DB954 style green). · Ensure the audio keeps playing when the app is backgrounded or the phone is locked. · Add a mini-player bar at the bottom of every tab (except the player screen). DELIVERABLES: 1. The complete folder structure (/frontend, /backend). 2. All package.json and requirements.txt / prisma.schema files. 3. The full working code for the audio player service (using Track Player's APIs for caching and downloading). 4. A step-by-step README.md on how to run the backend locally, set up the S3 bucket, and run the Expo app on a physical device (since emulators have limited local file access for uploads). CRITICAL NOTE: For offline downloading of royalty-free tracks, use react-native-track-player's built-in downloadTrack method and store the resolved local URI in the SQLite database. For user uploads, do NOT move the file; instead, reference the original content:// or file:// URI returned by the document picker. ## CONSTRAINTS & DELIVERABLES - **License**: All code must be MIT or Apache 2.0 licensed. - **Dependencies**: Minimize external dependencies; use well‑maintained libraries only. - **Performance**: Lazy load tracks; virtualize long lists for scrolling efficiency. - **Deliverable 1**: Provide the complete codebase with clear folder structure. - **Deliverable 2**: Write a `README.md` with installation steps (`npm install`, `npm run dev`, `npm run build`). - **Deliverable 3**: Explain how to extend it to connect to a real backend (Node.js + SQLite) if needed later. ## FIRST STEP Start by generating the `package.json`, the main `App` component with the global player layout, and the `README` instructions. Then proceed component‑by‑component.