Tweetme 2

Build a twitter-like app in Django, Bootstrap, Javascript, & React.js. Step-by-Step.

Lesson Code

Lessons 1-5: no significant code added

6 - Updated VS Code Config

7 - Our Roadmap

8 - The Tweets Model

9 - Store Data from Django Model

10 - Intro to URL Routing and Dynamic Routing

11 - Handling Dynamic Routing

12 - Dynamic View into REST API Endpoint

13 - Our First Template

14 - Bootstrap & Django Templates

15 - Tweet List View

16 - Dynamic Load Tweets via JavaScript

17 - Replace HTML Content with JavaScript

18 - Tweets to HTML via JavaScript

19 - Format Tweet Method

20 - Like Button Rendering

21 - Rapid Implement of Bootstrap Theme

22 - Tweet Create Form

23 - Tweet Form by Hand

24 - Successful Form Redirect

25 - Safe URL Redirect

26 - Prevent Form Submit via JavaScript

27 - Sending Form Data via pure JavaScript

28 - Handling Ajax Requests

29 - Serialize Django Model Object

30 - Append New Tweet & Reorder

31 - Handling Form Errors

32 - Rendering the Error Message via Vanilla JavaScript

33 - Users & Tweets

34 - Django Admin

35 - Associate Authenticated User to Object

36 - Permissions & Roadmap

37 - Install Django Rest Framework

38 - Django Forms to Django Rest Framework Serializer

39 - Django Views to Django Rest Framework Views

40 - Permissions and Authentication Classes Decorators for DRF APIs

41 - Delete Tweet API View

42 - Adding a Like Field

43 - Understanding Setting ManyToMayFields

44 - Tweet Action View

45 - JavaScript Tweet Action Handler

46 - CSRF & Client Side Action Buttons

47 - Retweeting Logic

48 - Two Types of Serializers

49 - Internal App Urls

50 - Setting up Tests in Django

51 - Verify or Install Nodejs- no code

52 - Create React App

54 - Ajax lookup via XHR in Reactjs

55 - Handling CORS and Invalid HOST_HEADER in Django

56 - Functional Components in React

57 - Reactjs Action Btn

58 - Using JavaScript Modules

59 - Improved Action Btn

60 - Understanding setState Hook

61 - Handling a Form in React

62 - Pass from Parent Component to Child with useEffect

63 - Adjust the React Render Process

64 - React Rendered by Django

65 - Render React App via Any Django Template

66 - A Better XHR Lookup

67 - Create Tweet in React

68 - Dev Authentication

69 - Handling New Tweet

70 - API Methods in React

71 - Tweet Action Btn

72 - Rendering the ReTweet

73 - Improving the Tweet Action Button

74 - Prepending Dynamic Retweets

75 - Set Data Props on ReactDOM Render

76 - Limit List View by Username

77 - Rendering Limited Tweet List by Username

78 - Tweets Module Clean Up

79 - Lookup & Render & Embed Individual Tweets

80 - Linking Individual Tweets

81 - Build and Use On Django

82 - Clean Up API Urls and Views

83 - Login Required Redirect

84 - Authentication & Registration

85 - User Profiles

86 - Handling Profile Does Not Exist

87 - Signals to Create Profile Objects

88 - Save 2 Models in 1 Form and 1 View

89 - ManyToManyField and Reverse Relations

90 - Followers and Following

91 - Follow Button Logic and Endpoint

92 - Profile Following Unit Tests

93 - User Feed including Following

94 - More Effecient Backend Lookups and Custom Model Managers

95 - More Efficient List Views with Pagination

96 - User Profile Serializer

97 - Handling our New List View Response

98 - Handling Pagination in React

99 - Display User Within Tweet

100 - Display Tweet User Details

101 - Feed View Component

102 - Build for the Feed

103 - User Profile API Detail

104 - Passing the Request to Serializers

105 - Render Profile Badge Component

106 - The Follow Button

107 - Removing Redundant Profile View

108 - Display Follower Count with Numeraljs

109 - FInal Build

110 - Thank you and next steps no code

Next steps:

• Large File Uploads for Images ~ Dive into AWS
• Notifications
• Direct Messages / Private Inboxes ~ Chat x Channels
• Explore -> parse & filter for hashtags