Full Stack Django and React: Get hands-on experience in full-stack web development with Python, React, and AWS

Preface....16

Cover....1

Part 1: Technical Background....22

Chapter 1: Creating a Django Project....24

An overview of software development....24

Understanding backend development....25

Responsibilities of backend developers....26

What is an API?....27

Understanding REST APIs....28

What is Django?....29

Setting up the work environment....31

Creating a virtual environment....31

Installing Django....32

Creating a sample project....32

Configuring the database....35

Postgres configuration....36

Connecting the database....37

Installing an HTTP request client....39

Summary....39

Questions....39

Chapter 2: Authentication and Authorization using JWTs....40

Technical requirements....40

Understanding JWTs....41

Understanding how JWTs are used in authentication....42

Organizing a project....42

Creating a user model....44

What are Django models?....44

Writing the User model....46

Writing UserSerializer....53

Writing UserViewset....54

Adding a router....56

Writing the user registration feature....60

Adding the login feature....66

Refresh logic....69

Summary....71

Questions....71

Chapter 3: Social Media Post Management....72

Technical requirements....72

Creating the Post model....73

Designing the Post model....73

Abstraction....74

Writing the AbstractSerializer....76

Writing the AbstractViewSet....77

Writing the Post model....78

Writing the Post serializer....81

Writing Post viewsets....82

Adding the Post route....84

Rewriting the Post serialized object....87

Adding permissions....88

Deleting and updating posts....90

Adding the Like feature....92

Adding the posts_liked field to the User model....93

Adding the like, remove_like, and has_liked methods....94

Adding the likes_count and has_liked fields to PostSerializer....94

Adding like and dislike actions to PostViewSet....96

Summary....97

Questions....97

Chapter 4: Adding Comments to Social Media Posts....98

Technical requirements....98

Writing the Comment model....99

Adding the Comment model....100

Creating a comment in the Django shell....101

Writing the comment serializer....101

Nesting routes for the comment resource....103

Creating nested routes....105

Writing the CommentViewSet class....106

Testing the comments feature with Insomnia....108

Updating a comment....110

Deleting a comment....112

Summary....113

Questions....113

Chapter 5: Testing the REST API....114

Technical requirements....114

What is testing?....114

What is software testing?....115

Why is software testing important?....116

What are the various types of testing?....116

Understanding manual testing....116

Understanding automated testing....117

Testing in Django....118

The testing pyramid....118

Configuring the testing environment....120

Writing your first test....121

Writing tests for Django models....122

Writing tests for the User model....123

Writing tests for the Post model....124

Writing tests for the Comment model....126

Writing tests for your Django viewsets....127

Writing tests for authentication....128

Writing tests for PostViewSet....130

Writing tests for CommentViewSet....133

Writing tests for the UserViewSet class....138

Summary....139

Questions....139

Part 2: Building a Reactive UI with React....140

Chapter 6: Creating a Project with React....142

Technical requirements....142

Understanding frontend development....142

What is React?....143

Creating the React project....144

Installing Node.js....144

Installing VS Code....146

Adding VS Code extensions....147

Creating and running a React app....149

Installing a debugging plugin in the browser....152

Configuring the project....153

Adding React Router....153

Adding React Bootstrap....154

Creating the Home page....155

Configuring CORS....157

Useful ES6 and React features....159

const and let....159

Template literals....160

JSX styling....161

Props versus states....162

The Context API....164

useMemo....165

Handling forms – controlled components and uncontrolled components....166

Summary....168

Questions....168

Chapter 7: Building Login and Registration Forms....170

Technical requirements....170

Understanding the authentication flow....170

Writing the requests service....171

Protected routes....175

Creating a protected route wrapper....175

Creating the registration page....177

Adding a registration page....177

Registering the registration page route....184

Creating the login page....186

Adding the login page....186

Registering the login page....190

Refactoring the authentication flow code....192

What is a hook?....192

Writing code for a custom hook....193

Using the functions in code....196

Summary....198

Questions....198

Chapter 8: Social Media Posts....200

Technical requirements....200

Creating the UI....200

Adding the NavBar component....202

Adding the Layout component....205

Using the Layout component on the home page....207

Creating a post....207

Adding the Toast component....211

Adding toaster to post creation....213

Adding the CreatePost component to the home page....214

Listing posts on the home page....217

Writing the Post component....217

Adding the Post component to the home page....222

Updating a post....227

Minor refactoring....229

Summary....233

Questions....233

Chapter 9: Post Comments....234

Technical requirements....234

Creating a UI....234

Tweaking the Post component....235

Adding a back button to the Layout component....237

Creating the SinglePost component....238

Creating a comment....242

Listing the comments....247

Deleting a comment....251

Updating a comment....252

Adding the UpdateComment modal....252

Liking a comment....258

Summary....260

Questions....260

Chapter 10: User Profiles....262

Technical requirements....262

Listing profiles on the home page....263

Displaying user information on their profile page....268

Configuring the default avatar....270

Writing the ProfileDetails component....272

Editing user information....278

Adding the edit method to useUserActions....278

The UpdateProfileForm component....279

Creating the EditProfile page....285

Summary....287

Questions....287

Chapter 11: Effective UI Testing for React Components....288

Technical requirements....288

Component testing in React....288

The necessity of testing your frontend....289

What to test in your React application....289

Jest, the RTL, and fixtures....289

Writing testing fixtures....290

Running the first test....291

Extending the RTL render method....294

Testing authentication components....295

Testing Post components....299

Mocking the localStorage object....299

Writing post fixtures....300

Writing tests for the Post component....301

Testing the CreatePost component....303

Testing the UpdatePost component....307

Snapshot testing....310

Summary....312

Questions....312

Part 3: Deploying Django and React on AWS....314

Chapter 12: Deployment Basics – Git, GitHub, and AWS....316

Technical requirements....316

Basics of software deployment....317

Tools and methods of web application deployment....317

Using Git and GitHub....318

Platforms for web application deployment....322

Creating an EC2 instance....322

Configuring the server for the Django project....328

Postgres configuration and deployment....329

Errors made when deploying on EC2....331

Summary....333

Questions....334

Chapter 13: Dockerizing the Django Project....336

Technical requirements....336

What is Docker?....336

Dockerizing the Django application....337

Adding a Docker image....337

Using Docker Compose for multiple containers....341

Writing the docker-compose.yaml file....342

Configuring environment variables in Django....345

Writing NGINX configuration....348

Launching the Docker containers....349

Summary....350

Questions....351

Chapter 14: Automating Deployment on AWS....352

Technical requirements....352

Explaining CI/CD....352

CI....353

CD....353

Defining the CI/CD workflow....354

What is GitHub Actions?....354

How to write a GitHub Actions workflow file....355

Configuring the backend for automated deployment....356

Adding the GitHub actions file....356

Configuring the EC2 instance....358

Summary....364

Questions....365

Chapter 15: Deploying Our React App on AWS....366

Technical requirements....366

Deployment of React applications....366

What is a production build?....367

Deploying on AWS S3....367

Creating a build of Postagram....367

Adding environment variables and building the application....368

Deploying the React application on S3....370

Automating deployment with GitHub Actions....375

Writing the workflow file....376

Summary....378

Questions....378

Chapter 16: Performance, Optimization, and Security....380

Technical requirements....380

Revoking JWT tokens....380

Adding a logout endpoint....381

Handling the logout with React....384

Adding caching....386

The cons of caching....386

Adding caching to the Django API....387

Using caching on the endpoints....390

Optimizing the React application build....393

Integrating webpack....394

Using pnpm....397

Securing deployed applications with HTTPS with AWS CloudFront....399

Configuring the React project with CloudFront....399

Summary....402

Questions....402

Appendix....404

Logging....404

Database queries optimization....404

Security....404

Answers....406

Index....416

Other Books You May Enjoy....427

Django developers often need to rely on frontend developers to build a client-side solution for their web apps. By combining the capabilities of React with Django, this book creates a complete learning path to go from being a backend developer to a full stack developer in no time. This book will help you use React to build state-of-the-art UI layouts and Django to create an immaculate backend. This web development book will help you discover the full potential of combining the dual power of the two most popular frameworks – React and Django. You’ll build full stack applications, including a RESTful API in the backend and an intuitive frontend, while exploring the advanced features of both frameworks. You’ll also explore how the dynamic functionality of the React framework can be used to build your frontend systems and how the ORM layer of Django helps in simplifying database interactions. This will in turn boost the development process for building the backend and facilitate the building of full stack applications. By the end of the book, you will be able to create a dynamic full stack app starting from scratch on your own.

Creating a Django Project

Django is one of the most famous backend frameworks written in Python and is often used to build simple or complex web applications. As for React, it’s one of the most widely used JavaScript libraries to create reactive and powerful user interfaces. In this chapter, we’ll focus on Django first.

In this chapter, we’ll briefly explain software development and, in particular, backend development in the context of what we’ll be building: a social network web application with Django and React. We’ll also talk about the most common tools used for backend development in Python – here in Django. Then, we will create a Django project and explain the most important parts of a Django project. After that, we’ll connect PostgreSQL to the Django project.

By the end of this chapter, you’ll understand concepts such as software development, frontend development, and backend development. You’ll also learn how to create a project in Django and start a server.

In this chapter, we’ll be covering the following topics:

• An overview of software development
• Understanding backend development
• What is an API?
• What is Django?
• Setting up the work environment
• Configuring the database