mp3-composer/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7b39d483169654474715d5546bc49f3365c61f42
frontend/README.md
bivashy 73a3be7539 Initial codebase commit
2025-10-31 04:44:30 +05:00

5.9 KiB
Raw Blame History

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)

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?