Netflix Clone w/ REACT REDUX! Tutorials On Learning REACT/REDUX From Scratch

Netflix Clone w/ REACT REDUX! Tutorials On Learning REACT/REDUX From Scratch
0

#1

Demo and github

My Netflix Clone Project Demo : demo

Project Github Repository: link

Feel free to check them out, comment, review. Any suggestions on how to improve React coding skill are very very appreciated.

Here’s my codepen for all the front end projects, check them out if you like :slight_smile: codepen link


The Story: (skip to tutorial part if you like)

I was a react newbie and still is, however, a month ago I would not even imagine that I am able to build quite a cool looking Netflix like website on my own. For anyone of you who’s just like me, wants to learn react but at the same time scratching my head on all those confusing tools like webpack, babel, redux, react router…etc. My suggestion based on my experience is just find a cool project that motivates you the most and dive right into it. Again, the key here is dive right into it and DO NOT GIVE UP! All those packages that come with React Eco system will come to you eventually.

Here’s how it started. As I began learning and finishing my first react project “markdown previewer”, I was searching for project that I personally enjoy working on and at the same time challenging to build. Then I stomped upon fellow camper Kuanhsuh’s post(listed down below) on his react netflix clone while browsing on FCC forum. It caught my attention on how he built his awesome project, so I decided to build one my own.

Took me about 15 days, 4-10 hours per day including watching tutorials, searching for relevant resources to complete this project from scratch(also starring at the screen like I was brain dead to find what I’ve done wrong). I have included all the tutorials I watched on my github repository readme, feel free to check them out if you like. However, there are quite a few tutorials that I think is exceptionally great and worth mentioning for beginner who just started out to learn React and its whole dev environment. I will also list them down below.

inpired by fellow camper @kuanhsuh , his post.


Tutorials that I extremely recommend:

Webpack: (2 hours)

Webpack Config Basics, by Matthew Hsiung, tutorial
Webpack & CSS, by Matthew Hsiung, tutorial

  • Explained how to set up webpack config in an extremely clear, beginner friendly fashion, better yet, he also introduced many advance concept such as common chunks and post CSS processor which will comes in handy as the project gets more complex. This is certainly the best beginner webpack tutorial out there on youtube.(trust me, I watched them all)

react: (1 hour)

Making AJAX Requests with Axios in React, by TylerMcGinnis, tutorial
React Router V4, by TylerMcGinnis, tutorial

  • They are exactly what their title said, using Axios to make AJAX call and basic React Routing. It is a short tutorial, gets the job done, nothing more nothing less.

react/redux: (6 hours)

React+Redux+Webpack, by Kurt Weiberth, tutorial

  • First of all, I did not watch the webpack part of the tutorial, since I already watched Hsiung’s tutorial by the time I start. This is a todo app tutorial and it’s relative long. It also gets a bit repetitive at the end when he started implementing redux. However, he does everything from scratch which might be what beginners need and appreciate(at least I do). He breakdown the entire redux state management structure that is tedious for beginner step by step, explains every decision he made during the tutorials. He also introduces more advance redux usage later in the toturials. Since it’s really a big chunk of unfamiliar knowledge that needed to be absord for my limited brain power. After completing this tutorial I still re-do the entrie todo app for around 3-4 times from scratch to be able to completely set it up by my own and fully understood what every block of codes means.

Here’s all my thoughts on the tutorials. Hope it helps for anyone who was in the same shoes as me.

Thanks again for @QuincyLarson and this amazing FCC community!


#2

Pretty cool, but I have a couple suggestions. First, do not use the Netflix name. Make your own name, even if it is an homage. Next, when you click a movie, there is no way to get back to the first screen. Also, the “add to my list” button does not change when clicked. It also would be super handy if you could scroll the movies using the trackpad instead of having to click the edge of the screen.


#3

Awesome! Thanks for building this and sharing your code!

Would you be interested in recording a screencast of yourself building this project?

This is precisely the sort of video tutorial we hope to share with campers.

@beaucarnes recently wrote this guide to our YouTube channel, with some tips for recording this: https://medium.freecodecamp.org/how-to-contribute-to-the-freecodecamp-community-youtube-channel-b86bce4c865

Then we can include these notes you’ve made here in the description in the YouTube description.


#4

Thank you for your suggestion,
you could hit back on browser or click the Netflix logo to return to the homepage.
It is a great idea to just hold and scroll through the list, gonna figure out a way to implement that feature in the future.


#5

Thanks for your feedback! I am definitely interested and will plan to do that in the near future.


#6

Thought I was pretty decent with React, I tried to copy this project and…no. It totally kicked my butt. This was a LOT harder than I thought :frowning:


#7

This is awesome! this inspired me to try and create something similar. I just started learning react and have been looking for projects. So thanks! However, I cant for the life of me figure out the proper image transform thing when hovering over a flick. Here’s my project