Nuxt Minimal Starter

Look at the Nuxt documentation to learn more.

Setup

Make sure to install dependencies:

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install

Development Server

Start the development server on http://localhost:3000:

# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev

Production

Build the application for production:

# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build

Locally preview production build:

# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview

Check out the deployment documentation for more information.

I need to make mp3-playlist-composer which gives you mp3 folder + m3u (mp3 playlist) so i can use my mp3 player in daily basis without an hassle

so i need:

• auth (oauth2 with youtube to access playlists (ik how to setup it, so do not tell me bout it), and custom oidc (SSO) as zitadel)

• user creates an playlist compose which is multiple source mp3 files (with thumbnails, title, artist and etc.), available sources:

• youtube playlist link

• local files

• external mp3 link for 1 song or smth

• after user created an playlist compose he can:

• play music

• change order of individual pieces

• split one song into multiple ones

• combine multiple music pieces into subplaylist, for example if we have too much items

• draft playlist, which is same as playlist compose but draft playlist contains bunch of music which can be different, and user can "move" music from one playlist compose into another

• m3u file generation on the fly

• music can contain some characters which could break some mp3 players, so we need download modal with options such as: title -> ascii, but our system is not very smart so user will be prompted ONCE to do that

Here's a realistic development plan for your MP3 playlist composer, assuming 3 hours per day:

📋 Complete Development Plan

Phase 1: Foundation & Basic Playlist (Days 1-7 | ~21 hours)

Day 1-2: Design & Frontend Foundation (6 hours)

• 3 hours: Find and customize a Figma UI kit (music player template)
• 3 hours: Set up Vue 3 project with basic layout components (player, playlist view, sidebar)

Day 3-4: Backend Foundation (6 hours)

• 3 hours: Database schema (Users, Playlists, Tracks, Drafts) + S3 bucket setup
• 3 hours: Quarkus basic setup with authentication skeleton (no OAuth yet)

Day 5-7: Core Playlist Features (9 hours)

• 3 hours: Basic playlist CRUD (create, read, update, delete)
• 3 hours: Local file upload & processing
• 3 hours: M3U file generation

Phase 2: YouTube Integration & Basic Player (Days 8-14 | ~21 hours)

Day 8-10: YouTube Integration (9 hours)

• 3 hours: YouTube API integration (fetch playlist metadata)
• 3 hours: Audio downloading from YouTube
• 3 hours: Metadata extraction (title, artist, thumbnail)

Day 11-12: Authentication (6 hours)

• 3 hours: OAuth2 with YouTube setup
• 3 hours: Session management & protected routes

Day 13-14: Basic Music Player (6 hours)

• 3 hours: Audio player component with play/pause/seek
• 3 hours: Playlist navigation and track switching

Phase 3: Advanced Features (Days 15-25 | ~33 hours)

Day 15-17: Draft System (9 hours)

• 3 hours: Draft playlist model and API
• 3 hours: Move tracks between playlists/drafts
• 3 hours: Draft management UI

Day 18-20: Music Manipulation (12 hours)

• 3 hours: https://www.sortbytune.com/ordering-the-perfect-playlist, sort by tune, and etc.
• 3 hours: Track splitting backend logic
• 3 hours: Track splitting frontend interface
• 3 hours: Combine tracks into subplaylists

Day 21-22: External MP3 Support (6 hours)

• 3 hours: Single MP3 URL processing
• 3 hours: URL validation and metadata fetching

Day 23-25: Polish & Export (9 hours)

• 3 hours: Download modal with ASCII conversion
• 3 hours: Character sanitization for MP3 players
• 3 hours: Export optimization and error handling

Phase 4: Future Features (Beyond MVP)

• Audio editing (volume, waveforms): ~15 hours
• Advanced formatting options: ~9 hours
• Real-time collaboration: ~12 hours
• Mobile app: ~30 hours

🎯 MVP Definition (What's achievable in ~75 hours)

Core MVP Features:

• ✅ User authentication (OAuth2 + local)
• ✅ Create playlists from YouTube links
• ✅ Local file upload
• ✅ Basic music player
• ✅ Track reordering
• ✅ M3U export with sanitization
• ✅ Draft system
• ✅ Single MP3 URL support

Post-MVP:

• Track splitting/combining
• Advanced audio manipulation
• Soundwave visualization

⏱️ Daily Time Allocation (3-hour sessions)

Typical Session Structure:

• 0:00-0:30: Review previous work & plan today's tasks
• 0:30-2:00: Core development (backend OR frontend focus)
• 2:00-2:30: Integration & testing
• 2:30-3:00: Documentation & next session planning

Weekly Focus:

• Monday: Backend heavy (APIs, database)
• Tuesday: Frontend (components, UI)
• Wednesday: Integration (connect frontend to backend)
• Thursday: Feature development
• Friday: Polish & bug fixes
• Weekend: Larger features or catch-up

🚀 Getting Started Tomorrow

Day 1 Plan (3 hours):

1. 0-1h: Browse Figma Community for "music player" templates, pick one
2. 1-2h: Set up Vue 3 + Vite project with basic routing
3. 2-3h: Create basic layout components (replicate from chosen Figma design)

This plan respects the complexity of audio processing while giving you visible progress. You'll have a working music player within 2 weeks and full MVP in about a month at this pace.

Would you like me to elaborate on any specific phase or provide more detailed technical specifications for any part?