Coding for Entrepreneurs

Ready to Start Learning?

Sign in to check if you already have access, or get started with a purchase or membership.

Tweetme 2

Build a twitter-like app in Django, Bootstrap, Javascript, & React.js. Step-by-Step.
We start with pure Django and pure JavaScript to build the initial API and client functionality. Then we integrate the Django Rest Framework and React.js. The entire project uses Django's built-in authentication and security without the need for external libraries.
The goal is to build a fully functioning project that's nearly ready for production. Let's get started now.
Code
Tweetme 2

Lifetime access to this course

or get access to 500+ courses with a membership

Lessons

1

Introduction

1:59

2

Walkthrough

6:44

3

Requirements

3:02

4

Setup Django Project

4:37

5

Add Project to VS Code

5:36

6

Update VS Code Config

7:01

7

Our Roadmap

3:42

8

The Tweets Model

7:00

9

Store Data from Django Model

3:38

10

Intro to URL Routing and Dynamic Routing

4:43

11

Handling Dynamic Routing

3:30

12

Dynamic View into REST API Endpoint

4:15

13

Our First Template

4:11

14

Bootstrap & Django Templates

4:01

15

Tweet List View

3:46

16

Dynamic Load Tweets via JavaScript

5:42

17

Replace HTML Content with JavaScript

4:28

18

Tweets to HTML via JavaScript

7:32

19

Format Tweet Method

3:29

20

Like Button Rendering

7:14

21

Rapid Implement of Bootstrap Theme

11:06

22

Tweet Create Form

8:52

23

Tweet Form by Hand

5:27

24

Successful Form Redirect

2:28

25

Safe URL Redirect

3:28

26

Prevent Form Submit via JavaScript

5:02

27

Sending Form Data via pure JavaScript

8:25

28

Handling Ajax Requests

4:38

29

Serialize Django Model Object

6:41

30

Append New Tweet & Reorder

3:31

31

Handling Form Errors

5:05

32

Rendering the Error Message via Vanilla JavaScript

7:06

33

Users & Tweets

7:37

34

Django Admin

10:09

35

Associate Authenticated User to Object

5:33

36

Permissions & Roadmap

3:12

37

Install Django Rest Framework

2:00

38

Django Forms to Django Rest Framework Serializer

9:17

39

Django Views to Django Rest Framework Views

8:03

40

Permissions and Authentication Classes Decorators for DRF APIs

7:13

41

Delete Tweet API View

6:33

42

Adding a Like Field

6:12

43

Understanding Setting ManyToMayFields

7:28

44

Tweet Action View

7:26

45

JavaScript Tweet Action Handler

4:50

46

CSRF & Client Side Action Buttons

8:16

47

Retweeting Logic

9:08

48

Two Types of Serializers

7:56

49

Internal App Urls

3:42

50

Setting up Tests in Django

26:53

51

Verify or Install Nodejs

3:39

52

Create React App

4:27

53

Understanding Functional Components

5:53

54

Ajax lookup via XHR in Reactjs

5:47

55

Handling CORS and Invalid HOST_HEADER in Django

3:13

56

Functional Components in React

7:13

57

Reactjs Action Btn

4:10

58

Using JavaScript Modules

5:49

59

Improved Action Btn

4:26

60

Understanding setState Hook

5:27

61

Handling a Form in React

5:50

62

Pass from Parent Component to Child with useEffect

10:11

63

Adjust the React Render Process

3:52

64

React Rendered by Django

7:08

65

Render React App via Any Django Template

8:12

66

A Better XHR Lookup

5:14

67

Create Tweet in React

8:58

68

Dev Authentication in Django Rest Framework

5:34

69

Handling New Tweet

7:28

70

API Methods in React

3:43

71

Tweet Action Btn

6:53

72

Rendering the ReTweet

6:32

73

Improving the Tweet Action Button

6:29

74

Prepending Dynamic Retweets

7:17

75

Set Data Props on ReactDOM Render

4:52

76

Limit List View by Username

3:05

77

Rendering Limited Tweet List by Username

7:31

78

Tweets Module Clean Up

9:59

79

Lookup & Render & Embed Individual Tweets

8:13

80

Linking Individual Tweets

11:41

81

Build and Use React Project On Django

12:45

82

Clean Up API Urls and Views

4:08

83

Login Required Redirect

6:26

84

Authentication & Registration

18:59

85

User Profiles

7:30

86

Handling Profile Does Not Exist

2:09

87

Signals to Create Profile Objects

6:05

88

Save 2 Models in 1 Form and 1 View

13:46

89

ManyToManyField and Reverse Relations

11:10

90

Followers and Following

9:57

91

Follow Button Logic and Endpoint

12:36

92

Profile Following Unit Tests

6:27

93

User Feed including Following

5:44

94

More Effecient Backend Lookups and Custom Model Managers

10:34

95

More Efficient List Views with Pagination

5:54

96

User Profile Serializer

8:37

97

Handling our New List View Response

3:17

98

Handling Pagination in React

7:46

99

Display User Within Tweet

9:53

100

Display Tweet User Details

11:29

101

Feed View Component

9:25

102

Build for the Feed

7:43

103

User Profile API Detail

3:59

104

Passing the Request to Serializers

7:59

105

Render Profile Badge Component

8:02

106

The Follow Button

16:41

107

Removing Redundant Profile View

3:37

108

Display Follower Count with Numeral.js

10:00

109

Final Build

8:55

110

Thank you & next steps

2:49