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

- Pure Django + JavaScript
- Django Rest Framework
- Auth
- & MUCH more

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

[ai.]

Holyshit, can't believe this is free.

Edit : 2 weeks later, I'm here and I've learned so much from this tutorial, qurentine well spent.

[CodingEntrepreneurs]

Chapters & Timestamp:
1 - Welcome - 0:00:00
2 - Walkthrough - 0:01:48
3 - Requirements.txt - 0:08:11
4 - Setup Django Project - 0:11:17
5 - Add Project to VS Code - 0:16:00
6 - Update VS Code Config - 0:21:39
7 - Our Roadmap - 0:28:45
8 - The Tweets Model - 0:32:31
9 - 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

[sto]

Justin goes on a break then comes back and drops a 12 hour tutorial... With timestamps (slow 👏 👏 👏). Such a dude, thank you for all your hard work.

[flomtechsolutions]

One of my best programmer I ever got to find on youtube. Built my first project with your django tutorial, , Now am seeing. Watching right away

[assaadelhalabi]

You're a champ, can't wait for you to make the Dms and notifications part. I am learning and will apply much of the knowledge to my current project. Thank you sensei!

[mohammedafroze]

Huge Thank you! I watched every second of this course. It took we a week to understand core concepts and emulate this from start.

[dmcg]

Love this whole structure. I used to have static pages and redirects, here viewing Django as a collection of API endpoints, even the form view, is very powerful.

[jasdeepshangari]

I am glad that youtube recommends me videos like this.

[njrcqxj]

Wow. I am so excited you have uploaded the 12hrs Django+React tutorial. OMG. It is going to be the best Django tutorial ever!

[theodorecharts]

I just got recommended this while I was working on my own Twitter clone. This an absolute a great resource. I decided to redo my app from the start and feel as though I'll have a much better application at the end. Thank you so much!

[jasonliu]

This tutorial is amazingly well structured! Extremely easy to follow! Thank you for your effort! Really appreciate!

[samsh]

I learned from you Django and now learning React. That is awesome. I just finished a project in Django and see how to make it more dynamic using this tutorial. Thanks man.

[anmolgautam]

man you are awesome, I have been meaning to kick start my career in web development and your way of teaching and guidance is what I needed. We do a project, solve bugs along the way, pick up some neat tricks and here we are. Thank you brother.

[doniyorabduvokhidov]

Cant believe my eyes, Justin you are truly a legend for me.

[sundards]

Boom I have completed quarantine boot camp, summer training, finally I addicted to you voice dude thanks for making this video, love from India🇮🇳.

[christiansaldana]

I am 4 hours into the tutorial and I just had a major moment where so many things clicked with methods, data, and how data is stored when you were using the python shell. Awesome so far!

[alika]

It's a really great video. All the things that I wanted in one place. I've always wanted to learn Django along with react.JS. I've even wanted to build a web app using it. Thanks.

[Heythere]

Nothing can be typed for the efforts that you have put to make this video.
A big appreciation from someone who is new to your channel.

[Bytestreamltd]

From he very first day I picked up python and decided to walk the part of Django-naut, you've been a true source of enlightenment... Thank you Sensei 🙏🏾

[akshattamrakar]

I just saw 10 minutes of it and it's already awesome... I'll take my time to watch this