[Udemy, Reed Barger] Full-Stack React with GraphQL and Apollo Boost [2018, ENG]
Final App:
http://react-apollo-recipes.herokuapp.com/
08. Create Mongoose Schemas
09. Add Apollo-Express Middleware
10. Create GraphQL Schema
11. Add bodyParser Middleware and Root Query Type
http://localhost:3000/graphiql
12. Create First Mutation
mutation {
addRecipe(
name: "Grilled Cheese Sandwich",
description: "A tasty sandwich",
category: "Sandwiches",
instructions: "Grill it!"
) {
name
category
description
instructions
}
}
query {
getAllRecipes {
_id
name
category
likes
createdDate
}
}
14. Create React Application with create-react-app
$ cd ../client/
$ npx create-react-app .
15. Clean Up App.js and Add Components Folder
$ cd ../server/
$ npm run dev
16. Add Client Dependencies and Set Up ApolloClientApolloProvider
$ cd client
$ npm install --save graphql
$ npm install --save react-apollo apollo-boost
$ npm install --save jwt-decode
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
mutation {
signupUser(username: "John", email: "john@gmail.com", password: "John"){
token
}
}
21. Hash User Password with bcrypt
22. Add Routing with react-router-dom
$ npm install --save 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
mutation($username: String!, $password: String!) {
signinUser(username: $username, password: $password){
token
}
}
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
query($_id:ID!) {
getRecipe(_id: $_id) {
_id
name
category
description
instructions
createdDate
likes
}
}
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
-- skipped
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
68. Add CKEditor Component to AddRecipe Page for Formatted Instructions
$ cd ../client/
$ npm install --save react-ckeditor-component
69. Intro to React Pose Animation Library
https://popmotion.io/pose/
70. Add React Pose Animation to Home Page
$ cd ../client/
$ npm install --save react-pose
71. Add Spinners When Loading
http://www.davidhu.io/react-spinners/
$ cd ../client/
$ npm install --save react-spinners
72. Style Searchbar and Redeploy
Marley
jsdev.org