aolufisayo / Full-Stack-React-with-GraphQL-and-Apollo-Boost

[Udemy] Full-Stack React with GraphQL and Apollo Boost [2018, ENG]

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[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


Application


12. Create First Mutation

mutation {
  addRecipe(
    name: "Grilled Cheese Sandwich",
    description: "A tasty sandwich",
    category: "Sandwiches",
    instructions: "Grill it!"
  ) {
    name
    category
    description
    instructions
  }
  
}

Application


13. Create First Query

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
  }
}

Application


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


Application


28. Create Signin Mutation on Backend

mutation($username: String!, $password: String!) {
  signinUser(username: $username, password: $password){
    token
  }
}

Application


29. Implement Signin Mutation on Client


Application


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


Application


33. Redirect Upon SigninSignup, Refetch getCurrentUser Query Upon Redirect


34. Add Navbar Component, Add Search Component


Application


35. Add Navbar Links For Auth User


36. Make Navbar Dynamic, Add Custom Heading


Application


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
  }
}

Application


Application


41. Output getRecipe Data to Recipe Page, Scaffold Add Recipe Form


42. Make AddRecipe a Stateful Component


Application


43. Implement addRecipe Mutation on Client


Application


Application


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


Application


47. Index Recipe Fields, Perform Search Query on Input Change Event


Application


48. Add SearchItem Component


49. Add UserInfo Component to Profile Page


Application


50. Add UserRecipes Component to Profile Page, Implement getUserRecipes Query


Application


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

-- 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


67. Style Recipe Page


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

About

[Udemy] Full-Stack React with GraphQL and Apollo Boost [2018, ENG]


Languages

Language:JavaScript 85.3%Language:CSS 10.5%Language:HTML 4.2%