Full-Stack React with GraphQL and Apollo Boost

August 11, 2018 Courses
Full-Stack React with GraphQL and Apollo Boost

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6.5 Hours | 3.92 GB

Build and deploy a full-stack React and GraphQL app from scratch with Apollo Boost, Express, and MongoDB

This course is designed for anyone who wants to start building applications with React and GraphQL! In this course, we will build a recipe application from scratch with full authentication (signup, signin, signout), as well as the ability to create, browse, search for, save, and delete recipes.

Building this project will give you the skills to to create full-stack React and GraphQL applications from scratch for any theme you like!

This course presumes some experience with React, but if you are familiar with basic JavaScript concepts and have some knowledge of ES6 features, you will be able to follow along just fine.

  1. We will begin by building a backend with Node.js using the Express framework, then learn how to integrate our backend with GraphQL. We’ll learn about essential topics within GraphQL such as queries, mutations, schemas and resolvers, we’ll learn the GraphQL syntax and work extensively with GraphiQL to test our queries and mutations, after which we will move onto working with React.
  2. Then we will build a React application and then connect it to our GraphQL-Express backend using Apollo Boost. We’ll cover all of the latest features of Apollo Boost and React Apollo, including ApolloClient, ApolloProvider/ApolloConsumer, as well as Query and Mutation components. On top of that, we’ll learn how to refetch queries, use optimistic UI, nest query and mutation components, use fragments and much more!
  3. On top of learning all about Apollo Boost, we will use essential React libraries such as React Router (version 4) to provide routing for our application, learn how to make protected routes, use essential lifecycle methods, reinforce proper state management practices, use helpful ES6 features such as the object and array spread operators and object and array destructuring, as well as cleaner React practices such as the property initializer syntax.
  4. Once we are done creating our application, we will go through the process of deploying to Heroku. We will create a postbuild script that will allow us to deploy our full-stack app using the Heroku CLI.
  5. As a bonus section, we’re going to dive into some additional React component libraries (i.e. react-pose, react-spinners) that will give us the ability to further style and animate our application to make it production-ready, give users the ability to customize their recipes, and make our application responsive with CSS grid.

What Will I Learn?

  • Make practical, production-ready full-stack applications with React and GraphQL
  • Learn the GraphQL language, how to write queries and mutations both on the client and the server
  • Learn React-Apollo in-depth, including Query and Mutation Components, Nested Components, Optimistic UI and Refetching Queries
  • Understand how to use and set up Apollo Boost within React applications
  • Implement essential web app features such as user authentication, searching, and route protection
  • Authenticate your GraphQL application using JSON Web Tokens
  • Learn advanced React patterns such as higher-order components and render props
  • Discover many useful features of React Router 4
  • Learn and reinforce effective state management patterns
  • Animate your React app with popular component libraries such as React Pose
  • Deploy and redeploy full-stack React applications to the web
Table of Contents

01. Project App Demo
02. GraphQL Introduction
03. Apollo Apollo Boost Introduction
04. Install Packages our for Project
05. Git Clone and npm Install Dependencies
06. Initialize Express Server
07. Create MLab Database and Connect To It
08. Create Mongoose Schemas
09. Add Apollo-Express Middleware
10. Create GraphQL Schema
11. Add bodyParser Middleware and Root Query Type
12. Create First Mutation
13. Create First Query
14. Create React Application with create-react-app
15. Clean Up App.js and Add Components Folder
16. Add Client Dependencies and Set Up ApolloClientApolloProvider
17. Create Queries Folder, Write First Apollo Query
18. Add cors Middleware to Prevent Cross-Origin Errors
19. Add Skeleton CSS and Base Styles
20. Create Signup Mutation
21. Hash User Password with bcrypt
22. Add Routing with react-router-dom
23. Add Form to Signup Component
24. Manage Input State in Signup Form
25. Add Mutation Component to Signup Component, Write SIGNUP_USER Apollo Mutation
26. Add onSubmit to Signup Form, Run Signup Mutation on Client
27. Create Error Component, Clear State Upon Submit, Add Form Validation
28. Create Signin Mutation on Backend
29. Implement Signin Mutation on Client
30. Add Token to Local Storage, Put Token on Authorization Header
31. Verify JWT on Backend to Get Current User
32. Add getCurrentUser Query, Create withSession Component
33. Redirect Upon SigninSignup, Refetch getCurrentUser Query Upon Redirect
34. Add Navbar Component, Add Search Component
35. Add Navbar Links For Auth User
36. Make Navbar Dynamic, Add Custom Heading
37. Implement Signout Button
38. Map Over Recipes, Create Recipe Item Component
39. Create Recipe Page, Get Recipe Id From Path
40. Add getRecipe Query in Backend, Run Query on Recipe Page
41. Output getRecipe Data to Recipe Page, Scaffold Add Recipe Form
42. Make AddRecipe a Stateful Component
43. Implement addRecipe Mutation on Client
44. Clear State and Redirect Upon addRecipe Mutation
45. Learning and Implementing Optimistic UI
46. Create searchRecipes Query on Backend, add Apollo Query to Search Component
47. Index Recipe Fields, Perform Search Query on Input Change Event
48. Add SearchItem Component
49. Add UserInfo Component to Profile Page
50. Add UserRecipes Component to Profile Page, Implement getUserRecipes Query
51. Add Route Protection with withAuth Component
52. Add and Implement deleteUserRecipe Mutation
53. Add Optimistic UI to deleteUserRecipe Mutation
54. Add refetchQueries to deleteUserRecipe Mutation
55. Add refetchQueries to addRecipe Mutation
56. Provide Default Text for User Without Recipes
57. Create LikeRecipe Component and Hide If Not Auth
58. Add and Implement likeRecipe Mutation
59. Develop Client-side Logic to Properly Toggle Like
60. Create and Implement unlikeRecipe Mutation with Optimistic UI
61. Prepare for Deployment
62. Use Fragments to Clean Up Queries
63. Deploy to Heroku
64. Add Additional CSS to Project
65. Adds imageUrl field on Recipe model and imageUrl input in addRecipe
66. Display Recipe Image on Home Page, Build Card
67. Style Recipe Page
68. Add CKEditor Component to AddRecipe Page for Formatted Instructions
69. Intro to React Pose Animation Library
70. Add React Pose Animation to Home Page
71. Add Spinners When Loading
72. Style Searchbar and Redeploy

Resolve the captcha to access the links!