music-website: A Full-Stack Vue 3 and Spring Boot Music Site for Learning

What the Project Covers and Who It Is For

The music-website repository is a full-stack application built by Yin Hongwei as a technical learning project and community resource. It is not a commercial product. The README states clearly that the work is shared for learning and technical exchange, that copyright belongs to the author, and that commercial use is refused.

The target audience is developers who want to see how a complete music streaming interface is assembled using a modern Vue 3 frontend and a Spring Boot backend. The project covers user authentication, playlist recommendation, song and playlist search, a synchronized lyrics player, a download function, and a full admin panel for managing banners, users, songs, artists, playlists, and comments. This scope makes it a more complete reference than a minimal tutorial project.

Architecture and Technology Stack

The project is split into three main applications. The music-client/ directory holds the public-facing web interface. The music-manage/ directory holds the admin panel. Both use Vue 3 with TypeScript, Vue Router, Pinia for state management, and Axios for API calls. The client uses Element Plus for its component library; the admin panel uses Naive UI.

The music-server/ directory holds the Spring Boot backend with MyBatis for database access and MySQL as the primary database. Redis provides caching. Media files (images and songs) are stored on the local filesystem under music-server/data/, which the README notes must contain the downloaded media assets for the application to function.

The deploy/ directory holds Docker Compose configuration. Each of the three applications has its own Dockerfile. The Docker Compose file in deploy/ orchestrates all services together for server deployment. The project targets JDK 8 or later, MySQL 8.0 or later, Redis 5.0.8 or later, and Node.js 16 or later.

Starting the Project Locally

Getting the project running requires starting four processes in order: the Spring Boot backend, a Redis instance, the frontend client, and the admin panel. Start by cloning the repository:

git clone [email protected]:Yin-Hongwei/music-website.git
cd music-website

Before starting the backend, download the media assets from the Quark network drive linked in the README (extraction code: 21p9) and place the data/ folder under music-server/. Then configure your MySQL credentials in music-server/src/main/resources/application-dev.properties by editing the spring.datasource.username and spring.datasource.password values and importing sql/yin_music.sql into your database.

Start the backend from the music-server/ directory:

./mvnw clean spring-boot:run

Start Redis separately with redis-server, then start each frontend from its directory:

npm install && npm run serve

Run the same npm command in both music-client/ and music-manage/. Once all four are running, the public site is at http://localhost:8080, the admin panel at http://localhost:8081, and the API at http://localhost:8888.

Docker Compose Deployment

For server deployment, the deploy/ directory provides a Docker Compose file that builds and orchestrates all three applications. From the deploy/ directory:

cd deploy
docker compose up --build

This builds Docker images from each application's Dockerfile and starts them together. After startup, the port assignments are the same as the local development setup: the public site on 8080, the admin panel on 8081, and the API on 8888.

Two optional environment variables are available for this mode. MYSQL_ROOT_PASSWORD sets the database root password. API_PUBLIC_URL sets the backend address written into the frontend at build time, with http://localhost:8888 as the default. If the application is deployed to a server with a public hostname, API_PUBLIC_URL must be set to the server's address or the frontend will attempt to reach the API on localhost from the user's browser.

The README notes that Docker Compose deployment is for Linux servers and that local development can skip this section.

Media Storage Limitation and Common Issues

The most significant constraint in this project's design is that all media files are stored on the local filesystem under music-server/data/img/ and music-server/data/song/. This means the application depends on a manually downloaded archive of demo content from a Quark network drive link. If that link expires or the files are removed, the project cannot serve music or images without the user sourcing their own content.

The README's FAQ table captures the two most common failure modes. If images or music fail to load, the asset paths under music-server/data/ need to be verified and the backend must be started from within music-server/. If music will not play, the asset files may be corrupted and need to be re-downloaded from the network drive.

This filesystem-based storage model would not scale to a multi-server deployment without modification. A production music service would replace local storage with an object store. The project documents this limitation implicitly through its architecture rather than calling it out explicitly: the music-server/data/ path is hardcoded into the Spring Boot configuration.

Comparison to Other Learning-Focused Music Projects and License

A common alternative in the Chinese developer community for similar full-stack learning projects is the NeteaseCloudMusicApi project, which provides an API for accessing the NetEase Cloud Music service. The qualitative difference is that NeteaseCloudMusicApi is purely a backend API layer, while music-website is a complete full-stack application with its own frontend, admin interface, and local data management. Someone who wants to understand how a music player frontend integrates with a backend is better served by music-website; someone who only needs a data access layer for an existing music service would find NeteaseCloudMusicApi more direct.

The repository uses a license that is listed as NOASSERTION in the GitHub metadata. The README states that copyright belongs to the author and that the project is for learning and technical exchange only, with commercial use explicitly rejected. There are no GitHub release tags. The repository is not archived and the last push was on 2026-09-27.

Editorial conclusion

Developers who want a complete, runnable full-stack project to study the integration of Vue 3, Spring Boot, MyBatis, Redis, and MySQL will find this repository covers the full lifecycle from local development to Docker Compose deployment. The author explicitly limits use to personal learning and technical sharing; commercial use is refused. Anyone who needs production-grade audio licensing, scalable storage, or a maintained open-source music platform should look at purpose-built alternatives rather than this learning-focused codebase.

Frequently asked questions

Official sources

1. Issues
2. README
3. Yin-Hongwei/music-website on GitHub