// the find
rwieruch/favesound-mobx
🎶 A SoundCloud Client in React + MobX running in production. Live Demo and Source Code to explore React + MobX. Refactored from favesound-redux
A SoundCloud web client built with React 16, MobX and react-router v4, with the same feature set as its Redux sibling: login, stream, favourites, infinite scroll, a player and playlists. It is most useful as a reading exercise for seeing MobX stores wired into a non-trivial app. It is a weak base to build on today.
- State is split by concern (browseStore, filterStore, paginateStore, playerStore, requestStore, sessionStore, sortStore) instead of one large store, and each store has a spec.js beside it, so the state layout is easy to follow.
- The normalizr schemas for tracks, users and comments, plus a shared entityStore, are meant to keep each track in one place by id, so a track in the stream and in a playlist isn't stored twice.
- FetchOnScroll with paginateStore is a real example of infinite scroll against a live API, not a static list with a fake load more button.
- Specs sit next to the components and stores they cover (Artwork, List, Permalink, the stores), so the test layout is easy to find and copy from.
- The stack is several major versions behind: React 16, react-router v4 and enzyme 3 predate hooks-era React, and enzyme has had little maintenance since, so running the tests on current React means fighting the adapter setup.
- The last push was 2018-10-25. The SoundCloud API has changed, and access for new developer apps has been restricted at times, so don't count on the live demo or a fresh client ID working without checking first.
- The build badge points at travis-ci.org, which stopped running public builds in 2021, so the badge and the CI setup are both dead. src/actions/ still sits next to the MobX stores, which looks like leftover Redux structure from the refactor.
- Setup means editing CLIENT_ID in src/constants/authentification.js, a tracked source file, instead of reading it from configuration. That's fine for a public client ID, but every fork ends up changing committed code.