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:
- Clone the project repository.
- Update the base URL in
src/api/config.js
to the appropriate API address. - Run the project locally on port 3000.
- 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.