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

favesound-mobx

The SoundCloud Client in React + MobX made with passion. Demo, Sibling Project: favesound-redux

Includes

• react v. 16
• react-router v. 4
• mobx
• mobx-react
• normalizr
• lodash-fp
• airbnb-extended eslint
• enzyme v. 3
• Soundcloud API.

Features

• login to SoundCloud
• show your personal stream
• show favorite tracks, followers and followings
• inifite scroll + paginated fetching
• follow people
• like tracks
• player play/stop/forward/backward track
• playlist
• sort tracks by plays, likes, comments, reposts, downloads
• filter tracks by duration
• search tracks by name and artist

Getting Started

Refactored from original version in Redux:

• Demo
• Repository

Create your own SoundCloud application:

• Tutorial 1: The SoundCloud Client in React + Redux
• Tutorial 2: Refactoring to MobX.
• Boilerplate: React + MobX + SoundCloud

Feedback is more than appreciated via GitHub, Twitter or my Blog.

Run

1. Clone Repository: git clone [email protected]:rwieruch/favesound-mobx.git
2. Exchange CLIENT_ID in ../src/constants/authentification.js with your own from SoundCloud for Developers and use http://localhost:8080/callback as Redirect_URI for your Soundcloud App
3. npm install
4. npm start
5. visit http://localhost:8080
6. npm test

Contribute

I am looking for contributors to make this project awesome! It doesn't matter if you are new to open source, I would welcome it!

favesound-mobx's Issues

Enhancement: Upgrade React Router to its Latest Version

React Router has a lot of breaking changes when using the latest version. Maybe it would be a great PR to upgrade react-router to its latest version.

Errors when updated MobX & MobX-React

I updated the MobX version to 4.2.0 and the MobX-React to 5.0.0 and I get the following error due to activity being undefined. Any hints?

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Upgrade to React 16

React 16 got released and there are practically no changes to the external API of React. Perhaps it would be an easy win to upgrade the project to React 16. Someone keen to do it?

Update to MobX 4 and Mobx-React 5

There were recent releases regarding mobx and the bridging library mobx-react. I guess it would be great to update those libraries for this learning project to keep it up to date for students. As I know, there were no breaking changes for the things in this source code. So upgrading both libraries should be sufficient :)

Support downloading of all tracks

I would be interested in contributing to this project if download of any/all tracks is a feature in the pipeline.

Clearly streaming a SoundCloud track is essentially downloading an 128kbps mp3 file, I would like the ability to save this file for offline use.

Not sure how the owner of this repo feels about this kind of usage (might be against SoundCloud TOC). Let me know.

Explanation in ReadME

As someone new to the Mobx paradigm,

I would greatly benefit of a quick rundown of the structure of the application when regarding the Mobx framework specifically (so the src folder).
Many of the Mobx 'example' applications I have found online use different variations so it can be a little difficult to deduce the goal of parts of the structure.

I am thinking a blurb about any specific variations you chose and why you prefer this structure for your Mobx projects

This looks great!

[Errors] when running "npm run test"

The following error will occur when running npm run test:
react-addons-test-utils is an implicit dependency in order to support [email protected]. Please add the appropriate version to your devDependencies. See https://github.com/airbnb/enzyme#installation

if login rejected

I was checking live demo. after login button press it was trying to navigate to the dashboard but login was not successful. so it was stuck in the dashboard with a loading indicator.

I think if login rejects/cancel then it will show only home page.

Enhancement: Migrate React.PropTypes to use prop-types package for React 15.4

The newest version of React extracts PropTypes to its own library. It would be cool to use the new library. In a sibling project the refactoring was already done: rwieruch/favesound-redux#42

mobx.map deprecated

MobX got an upgrade where mobx.map was announced as deprecated. It should be replaced in the repository with the new way to go.

[Bug]: Song title overflow in player queue