/Tweetme-2

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

Primary LanguagePython

Tweetme2

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

Initial Commit

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] (../../f59a1b3184bf304f5179c7fa5bc2316e9408e302/)

[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