React Cloud Music

screenshot of React Cloud Music
react
vite
styled-components

React 16.8打造精美音乐WebApp

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.

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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.