Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Skillshare React Clone WhatsApp (w/ React Router, React Hooks) 2021

Video Introducing this tutorial

1. 1.1 Introduction
2. 1.2 Installation Of Necessary Tools
3. 1.3 Section Summary
4. 2.1 Introduction
5. 2.2 Clone The Boilerplate
6. 2.3 Step #1 - Break Down Login Component
7. 2.4 Routes And Theme In App Component
8. 2.5 Our FormLogin Component
9. 2.6 Our FormLogin Component (part 2)
10. 2.7 Our RightImg Component
11. 2.8 Step #2 - Static Version Of Login Component
12. 2.9 Step #3 And #4 - Add State
13. 2.10 Step #5 - Add Inverse Data Flow
14. 2.11 Few Words About Account & Password
15. 2.12 Create Dummy Users
16. 2.13 Create Dummy Users (part 2)
17. 2.14 User Authentication
18. 2.15 User Authentication (part 2)
19. 2.16 Section Summary
20. 3.1 Introduction
21. 3.2 Step #1 - Breaking Down Components
22. 3.3 Our Left Component
23. 3.4 Our Right Component
24. 3.5 Rendering Left & Right Inside Main Component
25. 3.6 Our Header Component
26. 3.7 Our Header Component (part 2)
27. 3.8 Our Status Component
28. 3.9 Our SearchBar Component
29. 3.10 Our ChatList Component
30. 3.11 Create Dummy Chats
31. 3.12 Create Dummy Chats (part 2)
32. 3.13 Our ChatItem Component
33. 3.14 ChatList & ChatItem Together
34. 3.15 ChatList & ChatItem Together (part 2)
35. 3.16 How To Retreive The List Of Chats
36. 3.17 How To Render The List Of Chats
37. 3.18 How To Use React Moment
38. 3.19 Section Summary
39. 4.1 Introduction
40. 4.2 Breaking Down Components
41. 4.3 Our MessageView Component
42. 4.4 How To Select A Chat
43. 4.5 How To Select A Chat (part 2)
44. 4.6 How To Display The Header
45. 4.7 Our Footer Component
46. 4.8 Add State To Footer Component
47. 4.9 Our MessageBox Component
48. 4.10 Messages Collection
49. 4.11 Rendering Messages
50. 4.12 Rendering Messages (part 2)
51. 4.13 Rendering Messages (part 3)
52. 4.14 Rendering Messages (part 4)
53. 4.15 First Loop To Display Dates
54. 4.16 Nested Loop To Display Messages
55. 4.17 How To Send A Message
56. 4.18 How To Send A Message (part 2)
57. 4.19 How To Use withTracker For Real Time Communication
58. 4.20 How To Scroll Automatically
59. 4.21 How To Use React Flip Move
60. 4.22 Find And Display The Last Message Of A chat
61. 4.23 Sorting Chats
62. 5.1 Introduction
63. 5.2 Step #1 - Breaking Down Components
64. 5.3 Our FABs Component
65. 5.4 Our FABItem Component
66. 5.5 Render FABItem Whithin FABs
67. 5.6 Render FABs With State
68. 5.7 Select A File
69. 5.8 Select A File (part 2)
70. 5.9 Our Modal Component
71. 5.10 Show And Hide Modal Component
72. 5.11 Display Selected File Whithin Modal Component
73. 5.12 Images Collection
74. 5.13 Upload An Image
75. 5.14 Upload An Image (part 2)
76. 5.15 Our MessageImage Component
77. 5.16 Send A Picture Message
78. 5.17 Send A Picture Message (part 2)
79. 5.18 Fix The Content Of The Last Picture Message
80. 5.19 Section Summary
81. 6.1 Introduction
82. 6.2 Step #1 - Breaking Down Components
83. 6.3 Our OtherProfile Component
84. 6.4 Rendering The Header
85. 6.5 Display The Avatar Component
86. 6.6 Our Actu Component
87. 6.7 Our ActuItem Component
88. 6.8 Rendering OtherProfile Whithin Main Component
89. 6.9 Close OtherProfile Component
90. 6.10 Adjust Widths Dynamically
91. 6.11 Having A Large Avatar Dynamically
92. 7.1 Introduction
93. 7.2 Step #1 - Breaking Down Components
94. 7.3 Our LeftSide Component
95. 7.4 Our LSHeader Component
96. 7.5 Display Avatar Component
97. 7.6 Our LSForm Component
98. 7.7 Showing And Hiding LeftSide Component
99. 7.8 Writing In Input Fields
100. 7.9 Controlled Input Fields
101. 7.10 Fix The Issue
102. 7.11 Display Overlay Within Avatar Component
103. 7.12 Updating Profile Picture
104. 7.13 Updating User' Profile In Real Time
105. 8.1 Introduction
106. 8.2 Step #1 - Breaking Down Components
107. 8.3 Building The Static Version
108. 8.4 Our UsersList Component
109. 8.5 Our UserItem Component
110. 8.6 Group Users In Alphabetical Order
111. 8.7 Group Users In Alphabetical Order (part 2)
112. 8.8 Rendering UserItem Whithin UsersList
113. 8.9 Close UsersList Component
114. 8.10 Start A New Chat
115. 8.11 Fixing The Error
116. 9.1 Introduction
117. 9.2 Step #1 - Breaking Down Components
118. 9.3 Our BigOverlay Component
119. 9.4 Build A Static Version Of ImageViewer
120. 9.5 Show And Hide ImageViewer
121. 10.1 Introduction
122. 10.2 Hour Whithin MessageImage Component
123. 10.3 Display The Number Of Unread Messages
124. 10.4 Display The Number Of Unread Messages (part 2)
125. 10.5 Display The Number Of Unread Messages (part 3)
126. 10.6 Display The Favicon
127. 10.7 How To Search For A User
128. 10.8 Challenge #1
129. 10.9 Our Popup Component
130. 10.10 Showing Popup Component
131. 10.11 Hiding Popup Component
132. 10.12 Delete A Text Message
133. 10.13 Delete A Picture Message
134. 10.14 Some Other Challenges
135. 11.1 useState
136. 11.2 useEffect
137. 12.1 How To Create A Styled Component
138. 12.2 How To Use Variables
139. 12.3 How To Create And Use A Theme
140. 13.1 What Is Meteor
141. 13.2 Installation & Creating A Project
142. 13.3 Meteor Project Organisation
143. 13.4 Essentials To Know
144. 13.5 Meteor Templates
145. 13.6 Meteor Packages
146. 13.7 Meteor Sessions
147. 13.8 Meteor Reactive Programming
148. 13.9 Meteor Collections
149. 13.10 Meteor Publication & Subscription
150. 13.11 Meteor Security & Methods
151. 13.12 Render A React Component
152. 13.13 Rendering A List With React & Meteor
153. 13.14 Inserting A Document With Meteor From React
154. 13.15 Deleting A Document With Meteor From React
155. 13.16 Updating A Document With Meteor From React