Build a twitter-like app in Django, Bootstrap, Javascript, & React.js. Step-by-Step.
Lessons 1-5: no significant code added
[7 - Our Roadmap]
[9 - Store Data from Django Model]
10 - Intro to URL Routing and Dynamic Routing
12 - Dynamic View into REST API Endpoint
14 - Bootstrap & Django Templates
[16 - Dynamic Load Tweets via JavaScript]
17 - Replace HTML Content with JavaScript
18 - Tweets to HTML via JavaScript
21 - Rapid Implement of Bootstrap Theme
[24 - Successful Form Redirect] (../../f59a1b3184bf304f5179c7fa5bc2316e9408e302/)
[25 - Safe URL Redirect]
[26 - Prevent Form Submit via JavaScript]
27 - Sending Form Data via pure JavaScript
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