Getting Started
  • Preview our Completed App
  • Tools Used/Required
  • Formatting Vue Templates (And More) with VS Code
What is GraphQL / Apollo? (Optional)
  • What is GraphQL? Using the SWAPI GraphQL API
  • What is Apollo?
Intro to Apollo Server 2, Queries, Mutations and GraphQL Playground
  • Git Clone and Install Dependencies (Required)
  • Initializing Apollo Server 2 (Optional)
  • Adding Resolvers and Executing Queries in GraphQL Playground (Optional)
  • Writing and Running First Mutation in GraphQL Playground (Optional)
  • Exploring GraphQL Playground
Connect to MLab Database, Create Mongoose Models and GraphQL TypeDefs
  • Create MongoDB Atlas Database, Connect to GraphQL Server
  • Creating Mongoose Schemas
  • Creating typeDefs for Project
  • Write and Run signupUser Mutation
  • Write and Run addPost Mutation
  • Write and Run getPosts Query, Intro to populate
Create Vue Frontend with Vue CLI 3
  • Create Vue Client with Vue CLI 3
  • Adding Plugins with Vue GUI and Concurrently Dev Script
  • Structuring our Vue App
  • Installing Vuetify Plugin and Generating a Theme
  • Coolors.co for Creating Great Color Schemes (Optional)
  • Horizontal Navbar and Mobile First Design
  • Add Side Navbar
  • Add Routing and Page Transitions
Using Vue Apollo
  • Setting up Apollo Client / Vue Apollo, Firing getPosts Query from Client
  • Dive into Smart Queries in Vue Components
  • Executing Queries with the ApolloQuery Component
  • Add Carousel Component to Home Page
Integrate Vuex with ApolloClient
  • Firing getPosts Action with Vuex
  • Using Mutations and Getters
  • Add Loading Property, Loading Spinner and mapGetters
  • Create queries.js for Clientside Query / Mutation Definitions
JWT Authentication for Signin / Signup
  • Create Gravatar Avatar and Hash User Passwords on Signup
  • Write and Run signinUser Mutation
  • Sign Token and Return it Upon Signin/Signup
  • Using Variables in GraphQL, Signin / Signup Mutation Defs
  • Add Signin Form, Write and Run signinUser Action, Return JWT
  • Additional Config for ApolloClient, Send Token from LocalStorage
  • Verify JWT Token in server.js, Pass Result to currentUser in Context
  • Create getCurrentUser Query, Execute it from main.js
  • Redirect Home upon Signin with Watcher
  • Change Navbar for Signed-in User
  • Create Signout Action
  • Protected Routes and Clearing Malformed Tokens
Error Handling and Form Validation
  • Adding Global Form Alert Component
  • Add Loading Spinner to Signin Button
  • Form Validation with Vuetify in Signin Component
  • Show AuthSnackbar on Signin / Signup
  • Handle Authentication Errors, Show Auth Error Snackbar
  • Create Signup Form and Signup User Action
Add Post / Infinite Scroll Components
  • Make Add Post Form
  • Create and Execute addPost Action / Mutation
  • Update and Optimistic Response for addPost Mutation
  • Infinite Scroll on Posts Page; Add typeDef, Resolver, and Query
  • Add Infinite Scroll Functionality on Client
  • Add Grid Layout / Cards for Each Post in Posts Component
Post Component
  • Create Post Component and Route
  • Create and Execute getPost Query
  • Build out Post Card in Post Component
  • Add Messages Section to Post Component
  • Create addPostMessage Mutation
  • Perform addPostMessage in Post Component
  • Add Validation for Message Input, Clear on Submit
Like / Unlike Post
  • Create typeDefs / resolvers / queries for Like / Unlike
  • Firing Like / Unlike Post Mutations from Client
  • Add Logic for Toggling Like / Unlike Post
  • Add Like Notification in Profile Tab
Search Posts
  • Add typeDef / resolver / query for searchPosts
  • Fire searchPosts Action, Log Search Results
  • Add searchResults to State, Build Search Result Card
  • Finishing Search Results, Making them Functional
Profile Page, Update / Delete Posts
  • Add User Details Card / Favorites Cards
  • Write getUserPosts Query
  • Execute getUserPosts Query, Create and Populate User Cards
  • Add Edit Post Dialog for Updating User Posts
  • Create updateUserPost Mutation
  • Executing updateUserPost Mutation with Vuex Action
  • deleteUserRecipe Mutation - Backend Creation to Frontend Execution
Preparing for Deployment
  • RefetchQueries for Fresh Data upon Executing Mutations
  • Formatting Dates with moment
  • Minor Improvements/Fixes
Deployment with Heroku / Now v2
  • Deploying App with Heroku / Now v2