Netflix Clone

React, Router, Style-Component, Firestore, Auth

About

This project is part of youtube tutorial video which I'm following and also github repo . As going through the project I am learning and code my own touch on the way.

Preview

TODOs

Task Need To Be Done

1. Overview/demo
2. Architecture
3. Project dependencies
4. Installing create react app
5. Project cleanup
6. Yarn/npm port tip
7. Creating files/folders
8. Creating the Jumbotron component
9. Styled components GlobalStyles
10. Implementing Normalize.css
11. Installing ESLint, Prettier
12. Item component
13. Item component direction prop
14. Container derivative component
15. Modules, errors
16. Footer component
17. Accordion component
18. useContext for Compound Components
19. VSCode tip for importing
20. Accordion component body
21. Accordion component review
22. Opt-form component creation
23. Opt-form component review
24. Constants - routes
25. Pages: Home, Browse, SignIn, SignUp
26. Creating React Router Routes
27. Header component
28. Template review
29. Firebase connection
30. React Context for Firebase
31. SignIn Page
32. Firebase top level authentication
33. Firebase console authentication
34. Debugging error auth (if user is in the db or not)
35. SignUp Page
36. Registration page, routes debugging
37. Navigation
38. Helpers: routes (React router auth)
39. Protect routes
40. Creating an auth listener (custom hook)
41. Tip around authentication state changing
42. Helpers routes review
43. Browse page (categories films & series) component
44. Custom hook:browse page
45. Utils directory and setup
46. Browse container
47. Profiles container
48. Profiles component
49. Loading profile component
50. Spinner review
51. Header profile
52. Header profile: dropdown, chevron
53. Header search styling
54. Header play button style
55. Card list (categories, slides) - films & series logic
56. Entities logic start
57. Player component and Card component styling
58. Movie recommendations
59. Feature component (showing)
60. Passing props into our Feature (item obj)
61. More styling on the card style
62. Debugging the slides
63. Debugging play button and card
64. Player component
65. Review player video
66. Live search using Fuse.js
67. Review our project!
68. Testing setup
69. Player test
70. Footer test
71. Accordion test
72. Card test
73. Feature test
74. Form test
75. Opt form test
76. Player test
77. Loading test
78. Profile test
79. Jumbotron test
80. Header test
81. Home page test
82. Profiles test
83. Adding test-ids to Profiles
84. Selection filter test
85. SignIn Test
86. SignUp Test
87. We are done! Review and sign off!