Initial codebase commit
This commit is contained in:
217
README.md
Normal file
217
README.md
Normal file
@ -0,0 +1,217 @@
|
||||
# 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?
|
||||
Reference in New Issue
Block a user