Awesome Open Source
Awesome Open Source

Tweetme 2

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

Tweetme 2 Logo

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
Alternatives To Tweetme 2
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,156,149
Python (889,294
Reactjs (175,153
Django (36,072
Bootstrap (28,711
Tutorials (23,808
Twitter (21,515
Form (20,133
Rest Api (17,967
Tweets (8,330
Django Rest Framework (2,882
Cfe (20