A Vue 3 frontend application for managing music tracks with advanced features including audio playback, waveform visualization, and real-time updates. Built with Vue 3 + TypeScript and integrated with a provided Node.js backend.
- Node.js
v20.13.1or higher - NPM
v10+or higher
npm install
npm run dev-
Frontend will run at: http://localhost:3000
-
Backend will run at: http://localhost:8000
-
GraphQL Playground: http://localhost:8000/graphql
cd backend
npm install
npm run devBackend will be available at: http://localhost:8000
GraphQL Playground: http://localhost:8000/graphql
cd frontend
npm install
npm run devFrontend will be available at: http://localhost:3000
- Vue 3 + Composition API
- TypeScript for type safety
- Pinia for state management
- Vite for fast development and building
- WaveSurfer.js for audio waveform visualization
- Playwright for E2E & Component testing
- Vitest for unit testing
- Apollo Client for GraphQL integration
- Node.js with Express
- GraphQL with Apollo Server (migrated from REST API)
- TypeScript for type safety
- File upload handling
- REST API endpoints
- Vitest for testing
- 📋 Track Management - Create, edit, delete tracks
- 🎧 Audio Playback - Play tracks with waveform visualization
- 📁 File Upload - Upload audio files with validation
- 🔍 Advanced Filtering - Filter by genre, artist, title
- 📄 Pagination - Efficient track list navigation
- 🏷️ Genre Management - Add/remove genre tags
- ✅ Bulk Operations - Select and delete multiple tracks
- ✅ Real-time Updates - GraphQL subscriptions for live sync
- ✅ Responsive Design - Works on desktop and mobile
- ✅ Accessibility - Keyboard navigation and ARIA support
cd frontend
npm run test # Unit tests (Vitest)
npm run test:e2e # E2E tests (Playwright)
npm run test:ct # Component tests (Playwright CT)cd backend
npm run test # Unit tests (Vitest)├── frontend/ # Vue 3 + TypeScript application
│ ├── src/
│ │ ├── features/ # Feature-based modules
│ │ │ ├── tracks/ # Track management
│ │ │ ├── filters/ # Search and filtering
│ │ │ └── audio/ # Audio playback
│ │ ├── shared/ # Reusable components & utilities
│ │ └── tests/ # Test files
│ ├── docs/ # Documentation & ADRs
│ └── public/ # Static assets
├── backend/ # Provided Node.js + GraphQL API
│ ├── src/
│ │ ├── controllers/ # Route handlers
│ │ ├── graphql/ # GraphQL schema & resolvers
│ │ ├── types/ # TypeScript types
│ │ └── utils/ # Utilities
│ ├── data/ # Database files
│ └── uploads/ # Uploaded audio files
└── .github/workflows/ # CI/CD pipeline
cd frontend
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
npm run analyze # Analyze bundle sizecd backend
npm run dev # Start development server
npm run build # Build TypeScript
npm run start # Start production server
npm run test # Run tests- ✅ Bundle Analysis - Track bundle size with rollup-plugin-visualizer
- ✅ Lighthouse Reports - Performance, accessibility, SEO scores
- ✅ Security Audit - Regular security assessments
- ✅ Code Coverage - Comprehensive test coverage
- ✅ CI/CD Pipeline - Automated quality checks
- Frontend README - Detailed frontend documentation
- Backend README - Backend API documentation
- Architecture Decision Records - ADR documentation
- Security Audit Reports - Security assessments
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project demonstrates:
- Modern Frontend Architecture with Vue 3 + TypeScript
- API Integration with GraphQL (migrated from REST) and REST endpoints
- Testing Strategies (Unit, Component, E2E)
- CI/CD Best Practices with GitHub Actions
- Documentation Standards with ADRs and comprehensive READMEs
- Performance Optimization with bundle analysis and Lighthouse
- Security Awareness with regular audits
- Engineering Culture with proper project structure and conventions