Full-Stack Vue with GraphQL - The Ultimate Guide
This entire course within the context of a practical application that we will build literally from the first line of code to live deployment on the web. We'll be building an image-sharing social application called VueShare, similar to that of Pinterest or Instagram. Authenticated users of our app will be able to like and unlike, share, comment on, search for, edit, and delete image-related posts.
More
Includes Apollo Server 2, Apollo Boost and the Vue CLI 3!
Interested in building next-level apps with Vue and GraphQL? Look no further than this course!
This course is your one-stop guide to learning...
Complete CRUD functionality (create, read, update, and delete) with Vue and GraphQL / Apollo 2
The latest and greatest Apollo tools: Apollo Server 2, Apollo Boost and Vue Apollo
Using the new Vue CLI 3 to create/scaffold Vue apps, add plugins and deploy to the web
GraphQL Syntax, including types (scalar/object), and creating schemas with typeDefs
Writing and executing GraphQL queries and mutations on both the client and server
Essential Apollo features such as the update function, optimistic responses, and refetching queries
Error handling with Apollo Server 2 with the new AuthorizationError and formatErrors features
User authentication with JSON Web Tokens
State management with Vuex, in concert with ApolloClient
Stunning UIs with Vuetify, a Material Design Component Library for Vue
Form Validation with the help of Vuetify
Vue Router (including protected routes, page transitions, router props, and dynamic segments)
Building resolvers using many MongoDB methods and operators
Search Functionality with MongoDB
Advanced GraphQL features such as infinite scrolling
GraphQL shorthands to make our schemas and queries concise, such as inputs and fragments
Lots of work with the Chrome/Firefox Vue Dev Tools Extension to Debug Vue / Vuex / Apollo
Using the service Now to deploy Vue / GraphQL Apps
Advanced UI tricks, including notifications and loading skeletons
App Deployment with Heroku and Now v2
And more...
How does the course develop as we go along?
In the beginning of the course, we'll cover the basic GraphQL / Apollo concepts that we need to get started, then dive into building our app. We'll build out our backend, cover creating a GraphQL server and database (hosted by MongoDB Atlas), and how to write resolver functions with MongoDB. Then we'll move over to the frontend, create our Vue app and connect it with our backend, develop an interface and build client-side functionality with Vue, Vuetify, and Vue Apollo / Vuex. We'll learn how to write and execute queries and mutations using Apollo to our backend to get and modify what we need. Once we cover and integrate all the essential features of our application (listed above), we'll move on to deploying our app to the web. After deployment, for those who want to stick around and make their app truly production-ready, we'll cover a number of cool features to make our app more functional, attractive and reliable.
I wanted to make this course as comprehensive as I could, but also give you the fast track to learning new technologies in an engaging way. GraphQL is an exciting new technology in the web development community and new Apollo releases such as Apollo Server 2 and Apollo Boost have made working with GraphQL easier than ever.
There's never been a better time to start working with GraphQL, especially as a JavaScript developer. Join me and let's get started!
Requirements:
A basic familiarity with Vue
A basic understanding of ES6 JavaScript will help, but it's not required
- Anyone who wants to learn how to build full-stack applications with Vue and GraphQL!
What you'll learn:
- Learn in-depth how to use Apollo Server 2 and Apollo Boost to create powerful full-stack apps
- Learn how to handle errors on the client and server with Apollo / GraphQL
- Be able to implement session-based JWT authentication to GraphQL applications
- Integrate Apollo with Vuex for more reliable and scalable state management
- Implement infinite scrolling functionality using Vue-Apollo
- Deploy full-stack JavaScript / GraphQL applications using Heroku and Netlify
- Learn how to write queries and mutations in the GraphQL language on both the client and server
- Utilize many useful MongoDB methods and features
- Create attractive, sophisticated UIs using the Vuetify component framework
- Use the best in ES6 - ESNext features like async / await, destructuring, spread operators, arrow functions, etc
Watch Online Full-Stack Vue with GraphQL - The Ultimate Guide
| # | Title | Duration |
|---|---|---|
| 1 | Preview our Completed App | 18:29 |
| 2 | Tools Used/Required | 04:20 |
| 3 | Formatting Vue Templates (And More) with VS Code | 05:48 |
| 4 | What is GraphQL? Using the SWAPI GraphQL API | 19:52 |
| 5 | What is Apollo? | 02:57 |
| 6 | Git Clone and Install Dependencies (Required) | 02:29 |
| 7 | Initializing Apollo Server 2 (Optional) | 06:45 |
| 8 | Adding Resolvers and Executing Queries in GraphQL Playground (Optional) | 06:20 |
| 9 | Writing and Running First Mutation in GraphQL Playground (Optional) | 07:51 |
| 10 | Exploring GraphQL Playground | 03:40 |
| 11 | Create MLab Database, Connect to GraphQL Server | 05:33 |
| 12 | Creating Mongoose Schemas | 11:19 |
| 13 | Creating typeDefs for Project | 07:33 |
| 14 | Write and Run signupUser Mutation | 09:25 |
| 15 | Write and Run addPost Mutation | 07:26 |
| 16 | Write and Run getPosts Query, Intro to populate | 07:19 |
| 17 | Create Vue Client with Vue-CLI 3 | 07:38 |
| 18 | Adding Plugins with Vue GUI and Concurrently Dev Script | 03:36 |
| 19 | Structuring our Vue App | 03:35 |
| 20 | Installing Vuetify Plugin and Generating a Theme | 10:14 |
| 21 | Coolors.co for Creating Great Color Schemes (Optional) | 04:03 |
| 22 | Horizontal Navbar and Mobile First Design | 11:48 |
| 23 | Add Side Navbar | 07:23 |
| 24 | Add Routing and Page Transitions | 08:36 |
| 25 | Setting up Apollo Client / Vue Apollo, Firing getPosts Query from Client | 08:14 |
| 26 | Dive into Smart Queries in Vue Components | 06:43 |
| 27 | Executing Queries with the ApolloQuery Component | 05:35 |
| 28 | Add Carousel Component to Home Page | 03:27 |
| 29 | Firing getPosts Action with Vuex | 06:32 |
| 30 | Using Mutations and Getters | 07:41 |
| 31 | Add Loading Property, Loading Spinner and mapGetters | 05:39 |
| 32 | Create queries.js for Clientside Query / Mutation Definitions | 03:07 |
| 33 | Create Gravatar Avatar and Hash User Passwords on Signup | 07:12 |
| 34 | Write and Run signinUser Mutation | 05:26 |
| 35 | Sign Token and Return it Upon Signin/Signup | 08:00 |
| 36 | Using Variables in GraphQL, Signin / Signup Mutation Defs | 05:31 |
| 37 | Add Signin Form, Write and Run signinUser Action, Return JWT | 08:46 |
| 38 | Additional Config for ApolloClient, Send Token from LocalStorage | 08:09 |
| 39 | Verify JWT Token in server.js, Pass Result to currentUser in Context | 06:46 |
| 40 | Create getCurrentUser Query, Execute it from main.js | 09:04 |
| 41 | Redirect Home upon Signin with Watcher | 07:40 |
| 42 | Change Navbar for Signed-in User | 08:57 |
| 43 | Create Signout Action | 06:06 |
| 44 | Protected Routes and Clearing Malformed Tokens | 05:08 |
| 45 | Adding Global Form Alert Component | 08:44 |
| 46 | Add Loading Spinner to Signin Button | 03:16 |
| 47 | Form Validation with Vuetify in Signin Component | 07:10 |
| 48 | Show AuthSnackbar on Signin / Signup | 04:49 |
| 49 | Handle Authentication Errors, Show Auth Error Snackbar | 08:41 |
| 50 | Create Signup Form and Signup User Action | 10:48 |
| 51 | Make Add Post Form | 08:30 |
| 52 | Create and Execute addPost Action / Mutation | 10:15 |
| 53 | Update and Optimistic Response for addPost Mutation | 11:11 |
| 54 | Infinite Scroll on Posts Page; Add typeDef, Resolver, and Query | 07:46 |
| 55 | Add Infinite Scroll Functionality on Client | 10:17 |
| 56 | Add Grid Layout / Cards for Each Post in Posts Component | 09:43 |
| 57 | Create Post Component and Route | 04:34 |
| 58 | Create and Execute getPost Query | 06:31 |
| 59 | Build out Post Card in Post Component | 07:50 |
| 60 | Add Messages Section to Post Component | 05:47 |
| 61 | Create addPostMessage Mutation | 06:31 |
| 62 | Perform addPostMessage in Post Component | 08:08 |
| 63 | Add Validation for Message Input, Clear on Submit | 04:52 |
| 64 | Create typeDefs / resolvers / queries for Like / Unlike | 07:31 |
| 65 | Firing Like / Unlike Post Mutations from Client | 08:55 |
| 66 | Add Logic for Toggling Like / Unlike Post | 05:17 |
| 67 | Add Like Notification in Profile Tab | 04:52 |
| 68 | Add typeDef / resolver / query for searchPosts | 07:21 |
| 69 | Fire searchPosts Action, Log Search Results | 03:49 |
| 70 | Add searchResults to State, Build Search Result Card | 04:46 |
| 71 | Finishing Search Results, Making them Functional | 06:21 |
| 72 | Add User Details Card / Favorites Cards | 06:24 |
| 73 | Write getUserPosts Query | 03:41 |
| 74 | Execute getUserPosts Query, Create and Populate User Cards | 09:10 |
| 75 | Add Edit Post Dialog for Updating User Posts | 05:38 |
| 76 | Create updateUserPost Mutation | 07:32 |
| 77 | Executing updateUserPost Mutation with Vuex Action | 13:28 |
| 78 | deleteUserRecipe Mutation - Backend Creation to Frontend Execution | 07:26 |
| 79 | RefetchQueries for Fresh Data upon Executing Mutations | 04:19 |
| 80 | Formatting Dates with moment | 05:31 |
| 81 | Minor Improvements/Fixes | 07:06 |
| 82 | Deploying Backend / Frontend with Now | 09:51 |
Similar courses to Full-Stack Vue with GraphQL - The Ultimate Guide
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
Web Development with Google’s Go (golang) Programming Language
PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)
Just Express (with a bunch of node and http). In detail.
Node.js for Beginners - Become a NodeJs Developer + Project
Node.js, Express & MongoDB Dev to Deployment
