218 lines
5.9 KiB
Markdown
218 lines
5.9 KiB
Markdown
# 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?
|