# Nuxt Minimal Starter

Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

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

```bash
# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) 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?