More Premium Hugo Themes Premium React Themes

React Cloud Music

React 16.8打造精美音乐WebApp

React Cloud Music

React 16.8打造精美音乐WebApp

Author Avatar Theme by sanyuan0704
Github Stars Github Stars: 1957
Last Commit Last Commit: Jan 22, 2022 -
First Commit Created: Aug 27, 2024 -
default image

Overview:

The project is a web application inspired by the NetEase Cloud Music Android app interface. It was built using React Hooks, Redux, and Immutable.js. The UI components were mostly self-constructed, providing a challenging experience for the developer and an opportunity to gain design expertise.

Features:

  • Recommendation Section: Includes recommended playlists with smooth transition effects and pagination for large song collections.
  • Artist Section: Features asynchronous loading of artist lists with data fetching on scroll and pull-down refresh.
  • Ranking Section: Displays a list of rankings and detailed information for each ranking.
  • Player Section: Includes a player core with a playlist that mimics the bouncing effect seen in mobile apps.
  • Search Section: Implements modules for better-scroll for smooth scrolling, dynamic loading components, and lazy loading with code splitting using React’s lazy and Suspense.

Installation:

To install the theme, follow these steps:

  1. Clone the project repository.
  2. Update the base URL in src/api/config.js to the appropriate API address.
  3. Run the project locally on port 3000.
  4. To deploy the project online, execute npm run build.

Summary:

The web application project, based on the NetEase Cloud Music Android app UI, showcases various sections like recommendations, artists, rankings, a player, and search functionality. The developer plans to add features such as favorites, play history, login, comments, and MV modules in the future. The project encourages community involvement through feedback, pull requests, and aims to assist more React developers in their projects.