Getting Started
  • Project App Demo
  • GraphQL Introduction
  • Apollo / Apollo Boost Introduction
  • Install Packages our for Project
Project Setup and Building a GraphQL Backend
  • Git Clone and npm Install Dependencies
  • Initialize Express Server
  • Create MongoDB Atlas Database and Connect To It
  • Create Mongoose Schemas
  • Add Apollo-Express Middleware
  • Create GraphQL Schema
  • Add bodyParser Middleware and Root Query Type
Queries and Mutations in GraphQL / GraphiQL
  • Create First Mutation
  • Create First Query
Creating our React App / Connecting React to GraphQL
  • Create React Application with create-react-app
  • Clean Up App.js and Add Components Folder
  • Add Client Dependencies and Set Up ApolloClient/ApolloProvider
  • Create Queries Folder, Write First Apollo Query
  • Add cors Middleware to Prevent Cross-Origin Errors
  • Add Skeleton CSS and Base Styles
Creating User Signup Functionality / Password Hashing
  • Create Signup Mutation
  • Hash User Password with bcrypt
  • Add Routing with react-router-dom
  • Add Form to Signup Component
  • Manage Input State in Signup Form
  • Add Mutation Component to Signup Component, Write SIGNUP_USER Apollo Mutation
  • Add onSubmit to Signup Form, Run Signup Mutation on Client
  • Create Error Component, Clear State Upon Submit, Add Form Validation
Adding Signin Functionality
  • Create Signin Mutation on Backend
  • Implement Signin Mutation on Client
  • Add Token to Local Storage, Put Token on Authorization Header
User Authorization in GraphQL
  • Verify JWT on Backend to Get Current User
  • Add getCurrentUser Query, Create withSession Component
  • Redirect Upon Signin/Signup, Refetch getCurrentUser Query Upon Redirect
Adding User-Based Navigation to React
  • Add Navbar Component, Add Search Component
  • Add Navbar Links For Auth User
  • Make Navbar Dynamic, Add Custom Heading
Building Basic UI from Query Data / Adding User Signout
  • Implement Signout Button
  • Map Over Recipes, Create Recipe Item Component
  • Create Recipe Page, Get Recipe Id From Path
  • Add getRecipe Query in Backend, Run Query on Recipe Page
  • Output getRecipe Data to Recipe Page, Scaffold Add Recipe Form
Adding Ability to Create Recipes / Optimistic UI
  • Make AddRecipe a Stateful Component
  • Implement addRecipe Mutation on Client
  • Clear State and Redirect Upon addRecipe Mutation
  • Learning and Implementing Optimistic UI
Building Search Functionality
  • Create searchRecipes Query on Backend, add Apollo Query to Search Component
  • Index Recipe Fields, Perform Search Query on Input Change Event
  • Add SearchItem Component
Adding User Profile
  • Add UserInfo Component to Profile Page
  • Add UserRecipes Component to Profile Page, Implement getUserRecipes Query
  • Add Route Protection with withAuth Component
Deleting User Recipes and Refetching Queries
  • Add and Implement deleteUserRecipe Mutation
  • Add Optimistic UI to deleteUserRecipe Mutation
  • Add refetchQueries to deleteUserRecipe Mutation
  • Add refetchQueries to addRecipe Mutation
  • Provide Default Text for User Without Recipes
Adding Like / Unlike Functionality
  • Create LikeRecipe Component and Hide If Not Auth
  • Add and Implement likeRecipe Mutation
  • Develop Client-side Logic to Properly Toggle Like
  • Create and Implement unlikeRecipe Mutation with Optimistic UI
Deploying our Application
  • Prepare for Deployment
  • Use Fragments to Clean Up Queries
  • Deploy to Heroku
BONUS #1: Adding Component Libraries to Style and Animate our App
  • Add Additional CSS to Project
  • Adds imageUrl field on Recipe model and imageUrl input in addRecipe
  • Display Recipe Image on Home Page, Build Card
  • Style Recipe Page
  • Add CKEditor Component to AddRecipe Page for Formatted Instructions
  • Intro to React Pose Animation Library
  • Add React Pose Animation to Home Page
  • Add Spinners When Loading
  • Style Searchbar and Redeploy
BONUS #2: Update Recipes for Full CRUD Functionality
  • Add Update Button, Make UserRecipes Stateful Component
  • Create Edit Recipe Modal
  • Populate Edit Recipe Modal
  • Create updateUserRecipe Mutation, Execute on Client