// the find
rwieruch/favesound-redux
🎶 A SoundCloud Client in React + Redux running in production. Live Demo and Source Code to explore React + Redux as a beginner.
A SoundCloud web client built with React 16, Redux, redux-thunk and normalizr, covering login, the stream, favorites, follows, a player with a duration bar, and track filtering and sorting. It is a teaching project from Robin Wieruch, aimed at developers who have finished the basic React tutorials and want to see how Redux state, async fetching and a feature-sized app fit together.
Entities go through normalizr schemas in src/schemas and land in one entities reducer, so a track that shows up in the stream, a playlist and the player is stored once and referenced by id. That is the right shape once the same record appears in several lists. Pagination state lives apart from entities in src/reducers/paginate, and infinite scroll is a reusable withFetchOnScroll higher-order component rather than logic copied into each list. Several reducers and action creators have colocated spec.js files, so the pure parts can be read and tested without mounting components.
The stack is frozen at React 16, react-router v4 and enzyme 3, and the last push was June 2020. Hooks, React Router v6 and Redux Toolkit all replace parts of this code, so lifting patterns into a current app means translating them, not copying them. The SoundCloud API is the bigger problem: as far as I know, SoundCloud stopped issuing keys to new apps, so the demo and the run-it-yourself steps may not work without credentials you can't get. Check that before spending time here. The Travis badge points at travis-ci.org, which no longer runs free builds, so there is no working CI gate. Test coverage is also thin where the logic lives: some actions and reducers have specs, but almost none of the components that hold most of the behavior are tested.