Full-Stack React, Python, and GraphQL

Video Description

Develop impressive, rich full-stack apps with the latest and greatest features of Python, React, and GraphQL

About This Video

  • Build robust GraphQL backends with Python
  • Authenticate requests made to your Python backend with JSON web tokens
  • Master the latest and greatest tools to React: React Hooks and React Context

In Detail

This course is for developers keen to build complete, full-stack applications with cutting-edge React user interfaces, powered by a robust Python backend and using GraphQL on the server and client.

This course was designed for developers keen to get ahead of the curve in the latest web technologies, and focuses on how to use GraphQL from front to back, the most current techniques and tools in React (including React Hooks, Apollo Boost, and Material UI), and how to combine it all with Python, Django, and Graphene for an amazing stack.

You'll be building a full-stack app from scratch with a GraphQL API made with Python (Django and Graphene); a React client app with React Hooks and Apollo Boost; state management React Context (with useContext) and Apollo Client State, media file uploads with Cloudinary; and tons more.

This app will be a social music-sharing app called ReactTracks where users can upload and share any music they like, interact with various tracks by liking them and adding them to their profile, searching for tracks, adding information about their music, and editing/deleting their tracks.

Publisher Resources

Download Example Code

Table of Contents

  1. Chapter 1 : Getting Started
    1. What You Need for This Course 00:02:16
  2. Chapter 2 : Intro / Refresher on GraphQL
    1. Queries, Using GraphiQL, GraphQL compared to REST 00:04:52
    2. GraphQL Type System / Schema, Object vs. Scalar Types, Arguments 00:06:50
    3. Mutations for Creating, Updating, Deleting Data in GraphQL 00:05:04
    4. Dynamic Values in Queries / Mutations with GraphQL Variables 00:03:53
  3. Chapter 3 : Intro to Graphene / GraphQL in Python
    1. Hello World in Graphene 00:05:35
    2. Syntax in Graphene / Snakecase vs Camelcase 00:02:26
    3. Object Types, Arguments in Queries 00:04:35
    4. Mutations / Default Values 00:05:22
    5. Variables in Queries / Mutations 00:03:56
    6. Self and Info Values 00:07:30
  4. Chapter 4 : Building a GraphQL Backend with Django / Graphene
    1. Creating Base Django Project 00:05:10
    2. Making Tracks App / Modeling Track Data 00:08:01
    3. Adding Track Data / Creating Schema with Graphene-Django 00:07:20
    4. Integrating GraphiQL for Interact with App Data 00:03:18
    5. Adding Mutations / Creating New Tracks 00:05:17
    6. Creating New Users 00:08:04
    7. Querying Users by ID 00:02:18
    8. User Authentication with Django-GraphQL-JWT 00:05:45
    9. Authorization Headers to Get Current Auth User 00:03:35
    10. Connecting Users with Tracks 00:07:20
    11. Updating Tracks 00:07:29
    12. Deleting Tracks 00:04:13
    13. Adding Likes Model / Creating Likes 00:08:34
    14. Querying Likes / Querying Tracks with Associated Likes 00:03:12
    15. Error Handling with GraphQLError 00:03:17
    16. Adding Full Text Search to our Tracks 00:07:10
  5. Chapter 5 : Developing a React Client App for the Backend
    1. Adding our React Client App 00:03:05
    2. Exploring the React Source Code 00:06:25
    3. Setting up Apollo Client / Executing Queries with React Apollo 00:05:12
    4. Enabling django-cors-headers for Connecting to our Backend 00:03:54
    5. Creating our Register Form 00:08:24
    6. Executing GraphQL Operations Client-Side with Apollo Dev Tools 00:03:46
    7. Storing Form State with useState 00:05:13
    8. Executing Mutations with Mutation Component / Register User Mutation 00:06:15
    9. Finishing Register (Success Dialog, Toggling Auth Components, Transitions) 00:12:32
    10. Custom Error Component / Improved Error Handling 00:05:32
    11. Build out Login Form / Execute Login Mutation for JWT 00:06:41
    12. Using Apollo Client State to Manage Auth State 00:09:10
    13. Adding JWT to our Authorization Header with Apollo Client 00:04:07
    14. Adding Routing with React Router 4 00:05:00
    15. Styling our Header 00:06:24
    16. Signing Out Users with Signout Button 00:04:35
    17. Creating Loading Component 00:02:33
    18. Displaying Tracks with Track List 00:14:53
    19. Building CreateTrack Button / Dialog 00:05:57
    20. Improving CreateTrack Dialog 00:09:28
    21. Audio Uploads / Creating New Tracks 00:15:27
    22. RefetchQueries to Update UI After Mutation 00:02:53
    23. Uncontrolled vs Controlled Components / Setting File Upload Limit 00:07:33
    24. Add Ability to Play / Download Uploaded Audio Files 00:02:49
    25. Add Search Tracks Component / Functionality 00:08:45
    26. Updating Track List According to Search Results 00:06:39
    27. Updating Tracks 00:09:22
    28. Using React Context / useContext to Avoid Props Drilling 00:09:51
    29. Deleting Tracks 00:07:08
    30. Creating Likes / Liking Tracks 00:06:16
    31. Disabling Multiple Likes Per Track 00:08:20
    32. Understanding the Apollo Cache / Update vs. RefetchQueries 00:03:52
    33. Updating our Cache upon Creating Tracks 00:06:03
    34. Updating Cache upon Deleting Tracks 00:07:13
    35. Modifying Fetching Behavior of Queries with Fetch-Policy 00:05:08
    36. Building Users' Profile Page 00:12:41
    37. Finishing our App 00:03:34

Product Information

  • Title: Full-Stack React, Python, and GraphQL
  • Author(s): Reed Barger
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839215698