Twitch TV project using React/Redux

Finally finished (sort of) my Twitch TV project using react/redux :triumph:

There is some styling unfinished and the code needs some refactoring, but the main goal of this project was to practice react/redux.

https://jenovs.github.io/fcc-twitchtv-react/


Slightly longer story:

After going through a ton of react/redux tutorials, I decided to test my knowledge by remaking the Twitch TV project.

It was challenging, but it quickly revealed weak spots in my knowledge - when you follow a tutorial, you sort of understand everything, but it is very deceptive feeling.

During this project I learned:

  • that connecting redux to finished react app leads to a complete rewrite of your app :unamused:

  • how to connect all the pieces together with webpack.

  • what is thunk and what is middleware.

  • how to use redux developer tools to observe the status of the store and dispatched actions.

  • how to make asynchronous calls in react using Promise based HTTP client axios.

  • how to use Promises (sort of :wink:)

  • how to use scss with webpack

  • how to use animations in react (decided on react-flip-move).

If someone has any comments and/or critique you are welcome to share them :slight_smile:

2 Likes

Works great. One minor annoyance: there’s no scroll bar for me (Chrome on Windows), so I need to use the arrow keys to scroll. Did you disable scroll, or is this some weird CSS stuff?

Yeah, I disabled the scroll, looked cleaner :slight_smile:

Put it back.

Irony is I’m usually first to complain about developers messing with standart controls (back button, scroll, tabulation etc.) :grin:

I know that feeling. I try to make something really cool, but end up breaking the UX so I need to remove it. UX is king after all :pray:

You can actually style scroll bars in Webkit browsers if you want it to look cleaner on Chrome, Safari, etc. without breaking functionality. Not that it looks bad with a scroll bar.

I like how you dealt with the bizarre Twitch API by chaining Promises to obtain both the stream and channel information.

Awesome work @jenovs!

I’m currently doing the same project using React-Redux too and have worked out most of the plugins, except the search suggestions part. I would love to implement this feature in my project too - where can I learn how to do so?

You can read about controlled components here: https://facebook.github.io/react/docs/forms.html and just make API requests when input field changes.
(btw, that’s not what I used here).