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