Overview
A modern Next.js frontend for managing music tracks via a clean and interactive UI. This project supports full CRUD operations, audio upload, and inline playback, designed as a submission for the Front-End School 3.0 challenge. It emphasizes modular architecture, clean code, and testability with data-testid attributes.
|
|
Music HiveA modern frontend application for managing music tracks, originally developed for the Front-End School 3.0 challenge. It has since been refined through extensive code reviews. Core Features:
|
| ✨ Feature | ✅ Core Feature | 🌟 Extra Feature | 💬 Description |
|---|---|---|---|
| 🎼 Create Track (Without Audio) | ✅ | Modal for metadata input, optional cover image (with validation), metadata saved independently of audio | |
| ✏️ Edit Track Metadata | ✅ | Pre-filled edit modal, automatically updates the track list | |
| 🎧 Upload Track Audio | ✅ | Supports .mp3 and .wav, validates type and size, replace/remove audio | |
| ❌ Delete Track | ✅ | Removes from frontend/backend with confirmation dialog | |
| 📜 Track List View | ✅ | Paginated, sortable, debounced filtering, inline single-audio playback | |
| 🔥 Bulk Delete | ✅ | Select and delete multiple tracks at once | |
| ⚡ Optimistic UI Updates |
This gallery showcases the core functionality, interactive modals, and overall UX/UI of the Music Track Management App. It includes examples of creating and editing tracks, uploading audio, using the audio player, applying filters, and managing the deletion process.
| Create/Edit Track Details | Manage Audio File |
| Bulk Delete with Search and Sort Options | |
Performance and accessibility were key priorities. The following optimizations were implemented to improve user experience:
bfcache for instant back/forward navigations.The app uses a hybrid rendering strategy to optimize performance and flexibility. The homepage and error page are statically generated for fast load times. The /tracks route is server-side rendered to handle dynamic logic or authentication. Individual track pages (/tracks/[id]) are statically generated at build time, providing excellent performance and SEO benefits.
npm run dev
# or
yarn dev
# or
pnpm dev
The app should now be running at http://localhost:3000
| Task | Command |
|---|---|
| ✅ Unit Tests | npm run test |
| 🧪 End-to-End Tests | npm run test:e2e |
| 🧹 Lint Code | npm run lint |
| 🛠️ Auto-fix Lint | npm run lint:fix |
| 📚 Storybook | npm run storybook |
| 📦 Build Storybook | npm run build-storybook |
Music Manager API is a RESTful backend application built for managing music tracks. It provides endpoints for creating, reading, updating, and deleting tracks, along with validation, testing, and API documentation support.
You can also find the backend for this project here:
This project was improved through detailed mentor and peer code reviews. The final feedback below highlights strengths and key areas of growth.
Mentor's Comment: "A good, clean, and well-structured project!"
TracksPageContent for better readability and maintenance.nav > ul > li) for better SEO and accessibility.This feedback was invaluable for refining the codebase and strengthening my development practices.
✅ |
| Instant UI feedback before backend confirmation |
| 📈 Waveform Visualization | ✅ | Shows waveform for currently playing track |
| 📡 SRR and SSG | ✅ | SSR implemented for the /tracks page and SSG added for individual track pages /tracks/[id] |