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 
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!
