Back To Course Home

Full Stack Django and React

0% completed

Getting Started

About the Course

Creating a Django Project

Overview: Creating a Django Project An Overview of Software Development Understanding Backend Development What is an API?The Django Architecture Creating a Sample Project Configuring the Database Digest and Test

Authentication and Authorization Using JWTs

Overview: Authentication and Authorization Using JWTs Understanding JWTs Organizing a Project Creating a User Model Creating the User and Superuser Writing UserSerializer and UserViewset Adding a Router Writing the User Registration Feature Adding the Login Feature Refresh Logic Digest and Test

Social Media Post Management

Overview: Social Media Post Management Creating the Post Model Writing the Post Model Writing Post Viewsets Adding Permissions Deleting and Updating Posts Adding the Like Feature Digest and Test

Adding Comments to Social Media Posts

Overview: Adding Comments to Social Media Posts Writing the Comment Model and Serializer Nesting Routes for the Comment Resource Updating and Deleting a Comment Digest and Test

Testing the REST API

Overview: Testing the REST API What is Testing?Testing in Django Configuring the Testing Environment Writing Tests for Django Models Writing Tests for Django Viewsets Digest and Test

Creating a Project with React

Overview: Creating a Project with React Understanding Frontend Development Creating the React Project Configuring the Project Useful ES6 and React Features Digest and Test

Building Login and Registration Forms

Overview: Building Login and Registration Forms Understanding the Authentication Flow Writing the Requests Service Protected Routes Creating the Registration Page Creating the Login Page Refactoring the Authentication Flow Code Digest and Test

Social Media Posts

Overview: Social Media Posts Creating the UI Listing Posts on the Home Page Updating a Post Digest and Test

Post Comments

Overview: Post Comments

Creating a Comment

Listing the Comments

Deleting a Comment

Updating a Comment

Liking a Comment

Digest and Test

User Profiles

Overview: User Profiles Listing Profiles on the Home Page Displaying User Information on the Profile Page Editing User Information Digest and Test

Effective UI Testing for React Components

Overview: Effective UI Testing for React Components Component Testing in React Jest, the RTL, and Fixtures Testing Authentication Components Testing Post Components Testing the CreatePost component Testing the UpdatePost component Snapshot Testing Digest and Test

Deployment Basics—Git, GitHub, and AWS

Overview: Deployment Basics—Git, GitHub, and AWS Basics of Software Deployment Tools and Methods of Web Application Deployment Platforms for Web Application Deployment Digest and Test

Dockerizing the Django Project

Overview: Dockerizing the Django Project What is Docker?Dockerizing the Django Application Using Docker Compose for Multiple Containers Configuring Environment Variables in Django Writing NGINX Configuration Digest and Test

Automating Deployment on AWS

Overview: Automating Deployment on AWS Explaining CI/CD What is GitHub Actions?Configuring the Backend for Automated Deployment Digest and Test

Deploying Our React App on AWS

Overview: Deploying Or React App on AWS Deployment of React Applications Deploying on AWS S3 Automating Deployment with GitHub Actions Digest and Test

Performance, Optimization, and Security

Overview: Performance, Optimization, and Security Revoking JWT Tokens Adding Caching Digest and Test

Conclusion

Appendix

Setting Up the Work Environment Installations Configuring CORS

Creating a Comment

Follow step-by-step instructions to implement the UI for creating comments.

We'll cover the following

The handleSubmit function

Inside the src/components directory, create a new directory called comments. This directory will contain the code for the comments feature components. Inside the newly created directory, create a new file called CreateComment.jsx. This component represents the form that the user will use to add comments to a post.

Once the file is created, add the required imports:

Get hands-on with 1200+ tech skills courses.