Table of Contents

Preface

Part 1: Technical Background

1

Creating a Django Project

An overview of software development

Understanding backend development

Responsibilities of backend developers

What is an API?

Understanding REST APIs

What is Django?

Setting up the work environment

Creating a virtual environment

Installing Django

Creating a sample project

Configuring the database

Postgres configuration

Connecting the database

Installing an HTTP request client

Summary

Questions

2

Authentication and Authorization using JWTs

Technical requirements

Understanding JWTs

Understanding how JWTs are used in authentication

Organizing a project

Creating a user model

What are Django models?

Writing the User model

Writing UserSerializer

Writing UserViewset

Adding a router

Writing the user registration feature

Adding the login feature

Refresh logic

Summary

Questions

3

Social Media Post Management

Technical requirements

Creating the Post model

Designing the Post model

Abstraction

Writing the AbstractSerializer

Writing the AbstractViewSet

Writing the Post model

Writing the Post serializer

Writing Post viewsets

Adding the Post route

Rewriting the Post serialized object

Adding permissions

Deleting and updating posts

Adding the Like feature

Adding the posts_liked field to the User model

Adding the like, remove_like, and has_liked methods

Adding the likes_count and has_liked fields to PostSerializer

Adding like and dislike actions to PostViewSet

Summary

Questions

4

Adding Comments to Social Media Posts

Technical requirements

Writing the Comment model

Adding the Comment model

Creating a comment in the Django shell

Writing the comment serializer

Nesting routes for the comment resource

Creating nested routes

Writing the CommentViewSet class

Testing the comments feature with Insomnia

Updating a comment

Deleting a comment

Summary

Questions

5

Testing the REST API

Technical requirements

What is testing?

What is software testing?

Why is software testing important?

What are the various types of testing?

Understanding manual testing

Understanding automated testing

Testing in Django

The testing pyramid

Configuring the testing environment

Writing your first test

Writing tests for Django models

Writing tests for the User model

Writing tests for the Post model

Writing tests for the Comment model

Writing tests for your Django viewsets

Writing tests for authentication

Writing tests for PostViewSet

Writing tests for CommentViewSet

Writing tests for the UserViewSet class

Summary

Questions

Part 2: Building a Reactive UI with React

6

Creating a Project with React

Technical requirements

Understanding frontend development

What is React?

Creating the React project

Installing Node.js

Installing VS Code

Adding VS Code extensions

Creating and running a React app

Installing a debugging plugin in the browser

Configuring the project

Adding React Router

Adding React Bootstrap

Creating the Home page

Configuring CORS

Useful ES6 and React features

const and let

Template literals

JSX styling

Props versus states

The Context API

useMemo

Handling forms – controlled components and uncontrolled components

Summary

Questions

7

Building Login and Registration Forms

Technical requirements

Understanding the authentication flow

Writing the requests service

Protected routes

Creating a protected route wrapper

Creating the registration page

Adding a registration page

Registering the registration page route

Creating the login page

Adding the login page

Registering the login page

Refactoring the authentication flow code

What is a Hook?

Writing code for a custom Hook

Using the functions in code

Summary

Questions

8

Social Media Posts

Technical requirements

Creating the UI

Adding the NavBar component

Adding the Layout component

Using the Layout component on the home page

Creating a post

Adding the Toast component

Adding toaster to post creation

Adding the CreatePost component to the home page

Listing posts on the home page

Writing the Post component

Adding the Post component to the home page

Updating a post

Minor refactoring

Summary

Questions

9

Post Comments

Technical requirements

Creating a UI

Tweaking the Post component

Adding a back button to the Layout component

Creating the SinglePost component

Creating a comment

Listing the comments

Deleting a comment

Updating a comment

Adding the UpdateComment modal

Liking a comment

Summary

Questions

10

User Profiles

Technical requirements

Listing profiles on the home page

Displaying user information on their profile page

Configuring the default avatar

Writing the ProfileDetails component

Editing user information

Adding the edit method to useUserActions

The UpdateProfileForm component

Creating the EditProfile page

Summary

Questions

11

Effective UI Testing for React Components

Technical requirements

Component testing in React

The necessity of testing your frontend

What to test in your React application

Jest, the RTL, and fixtures

Writing testing fixtures

Running the first test

Extending the RTL render method

Testing authentication components

Testing Post components

Mocking the localStorage object

Writing post fixtures

Writing tests for the Post component

Testing the CreatePost component

Testing the UpdatePost component

Snapshot testing

Summary

Questions

Part 3: Deploying Django and React on AWS

12

Deployment Basics – Git, GitHub, and AWS

Technical requirements

Basics of software deployment

Tools and methods of web application deployment

Using Git and GitHub

Platforms for web application deployment

Creating an EC2 instance

Configuring the server for the Django project

Postgres configuration and deployment

Errors made when deploying on EC2

Summary

Questions

13

Dockerizing the Django Project

Technical requirements

What is Docker?

Dockerizing the Django application

Adding a Docker image

Using Docker Compose for multiple containers

Writing the docker-compose.yaml file

Configuring environment variables in Django

Writing NGINX configuration

Launching the Docker containers

Summary

Questions

14

Automating Deployment on AWS

Technical requirements

Explaining CI/CD

CI

CD

Defining the CI/CD workflow

What is GitHub Actions?

How to write a GitHub Actions workflow file

Configuring the backend for automated deployment

Adding the GitHub Actions file

Configuring the EC2 instance

Summary

Questions

15

Deploying Our React App on AWS

Technical requirements

Deployment of React applications

What is a production build?

Deploying on AWS S3

Creating a build of Postagram

Adding environment variables and building the application

Deploying the React application on S3

Automating deployment with GitHub Actions

Writing the workflow file

Summary

Questions

16

Performance, Optimization, and Security

Technical requirements

Revoking JWT tokens

Adding a logout endpoint

Handling the logout with React

Adding caching

The cons of caching

Adding caching to the Django API

Using caching on the endpoints

Optimizing the React application build

Integrating webpack

Using pnpm

Securing deployed applications with HTTPS with AWS CloudFront

Configuring the React project with CloudFront

Summary

Questions

Appendix

Logging

Database queries optimization

Security

Answers

Index

Other Books You May Enjoy