Create a Twitter-like App with Python Django JavaScript and React. Full TUTORIAL

Django x React has never been so easy. Build a twitter-like app in Django, Javascript, & React.js. Step-by-Step. Topics:
– Pure Django + JavaScript
– Django Rest Framework
– React.js
– Auth
– & MUCH more

Welcome – 0:00:00
Walkthrough – 0:01:48
Requirements.txt – 0:08:11
Setup Django Project – 0:11:17
Add Project to VS Code – 0:16:00
Update VS Code Config – 0:21:39
Our Roadmap – 0:28:45
The Tweets Model – 0:32:31
Store Data from Django Model – 0:39:35
10 – Intro to URL Routing and Dynamic Routing – 0:43:10
11 – Handling Dynamic Routing – 0:47:57
12 – Dynamic View into REST API Endpoint – – 0:51:32
13 – Our First Template – 0:55:50
14 – Bootstrap & Django Templates – 1:00:07
15 – Tweet List View – 1:04:17
16 – Dynamic Load Tweets via JavaScript – 1:08:01
17 – Replace HTML Content with JavaScript – 1:13:48
18 – Tweets to HTML via JavaScript – 1:18:19
19 – Format Tweet Method – 1:25:56
20 – Like Button Rendering – 1:29:30
21 – Rapid Implement of Bootstrap Theme – 1:36:48
22 – Tweet Create Form – 1:48:00
23 – Tweet Form by Hand – 1:56:55
24 – Successful Form Redirect – 2:02:25
25 – Safe URL Redirect – 2:05:00
26 – Prevent Form Submit via JavaScript – 2:08:30
27 – Sending Form Data via pure JavaScript – 2:13:36
28 – Handling Ajax Requests – 2:22:06
29 – Serialize Django Model Object – 2:26:47
30 – Append New Tweet & Reorder – 2:33:33
31 – Handling Form Errors – 2:37:09
32 – Rendering the Error Message via Vanilla JavaScript – 2:42:18
33 – Users & Tweets – 2:49:28
34 – Django Admin – 2:57:09
35 – Associate Authenticated User to Object – 3:07:23
36 – Permissions & Roadmap – 3:13:00
37 – Install Django Rest Framework – 3:16:16
38 – Django Forms to Django Rest Framework Serializer – 3:18:20
39 – Django Views to Django Rest Framework Views – 3:27:42
40 – Permissions and Authentication Classes Decorators for DRF APIs – 3:35:50
41 – Delete Tweet API View – 3:43:08
42 – Adding a Like Field – 3:49:43
43 – Understanding Setting ManyToMayFields – 3:56:00
44 – Tweet Action View – 4:03:32
45 – JavaScript Tweet Action Handler – 04:11:02
46 – CSRF & Client Side Action Buttons – 04:15:56
47 – Retweeting Logic – 04:24:18
48 – Two Types of Serializers – 04:32:30
49 – Internal App Urls – 04:41:29
50 – Setting up Tests in Django – 04:45:15
51 – Verify or Install Node.js – 05:12:14
52 – Create React App – 05:15:57
53 – Understanding Functional Components – 05:20:29
54 – Ajax lookup via XHR in React.js – 05:26:27
55 – Handling CORS and Invalid HOST_HEADER in Django – 05:32:18
56 – Functional Components in React – 05:35:35
57 – React.js Action Btn – 05:42:52
58 – Using JavaScript Modules – 05:47:07
59 – Improved Action Btn – 05:53:00
60 – Understanding setState Hook – 05:57:31
61 – Handling a Form in React – 06:03:02
62 – Pass from Parent Component to Child with useEffect – 6:08:55
63 – Adjust the React Render Process – 06:19:10
64 – React Rendered by Django – 06:23:07
65 – Render React App via Any Django Template – 06:30:22
66 – A Better XHR Lookup – 06:38:36
67 – Create Tweet in React – 06:43:54
68 – Dev Authentication – 06:52:56
69 – Handling New Tweet – 06:58:34
70 – API Methods in React – 07:06:06
71 – Tweet Action Btn – 07:09:55
72 – Rendering the ReTweet – 07:16:52
73 – Improving the Tweet Action Button – 07:23:28
74 – Prepending Dynamic Retweets – 07:30:03
75 – Set Data Props on ReactDOM Render – 07:37:24
76 – Limit List View by Username – 07:42:19
77 – Rendering Limited Tweet List by Username – 07:45:29
78 – Tweets Module Clean Up – 07:53:03
79 – Lookup & Render & Embed Individual Tweets – 08:03:06
80 – Linking Individual Tweets – 08:11:26
81 – Build and Use On Django – 08:23:09
82 – Clean Up API Urls and Views – 08:36:00
83 – Login Required Redirect – 08:40:12
84 – Authentication & Registration – 08:46:42
85 – User Profiles – 09:05:46
86 – Handling Profile Does Not Exist – 09:13:21
87 – Signals to Create Profile Objects – 09:15:33
88 – Save 2 Models in 1 Form and 1 View – 09:21:43
89 – ManyToManyField and Reverse Relations – 09:35:32
90 – Followers and Following – 09:46:47
91 – Follow Button Logic and Endpoint – 09:56:50
92 – Profile Following Unit Test Cases – 10:09:29
93 – User Feed Including Following – 10:16:00
94 – More Efficient Backend Lookups and Custom Model Managers – 10:21:50
95 – More Efficient List Views with Pagination – 10:32:30
96 – User Profile Serializer – 10:38:26
97 – Handling our New List View Response – 10:47:07
98 – Handling Pagination in React – 10:50:29
99 – Display User Within Tweet – 10:58:20
100 – Display Tweet User Details – 11:08:17
101 – Feed View Component – 11:19:50
102 – Build for the Feed – 11:29:20
103 – User Profile API Detail – 11:37:07
104 – Passing the Request to Serializers – 11:37:07
105 – Render Profile Badge Component – 11:41:11
106 – The Follow Button – 11:57:21
107 – Removing Redundant Profile View – 12:14:05
108 – Display Follower Count with Numeral.js – 12:17:49
109 – Final Build – 12:27:52
110 – Thank you and next steps – 12:36:52

source