English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 10 Hours | 4.97 GB
Build a complete Pinterest-inspired full-stack app from scratch with Vue, GraphQL, Apollo 2, Vuex, and Vuetify
Includes Apollo Server 2, Apollo Boost and the very new Vue CLI 3!
Interested in building next-level apps with Vue and GraphQL? Look no further!
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
- Role-based user authentication with JSON Web Tokens
- State management with Vuex, in concert with ApolloClient
- Stunning UIs using mobile-first design with the 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
- And more…
What will we be building? What is the course based on?
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.
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 with MLab), 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!
Table of Contents
Introduction
1 Preview our Completed App
2 Tools Used/Required
3 Formatting Vue Templates (And More) with VS Code
What is GraphQL / Apollo? (Optional)
4 What is GraphQL? Using the SWAPI GraphQL API
5 What is Apollo?
Intro to Apollo Server 2, Queries, Mutations and GraphQL Playground
6 Git Clone and Install Dependencies (Required)
7 Initializing Apollo Server 2 (Optional)
8 Adding Resolvers and Executing Queries in GraphQL Playground (Optional)
9 Writing and Running First Mutation in GraphQL Playground (Optional)
10 Exploring GraphQL Playground
Connect to MLab Database, Create Mongoose Models and GraphQL TypeDefs
11 Create MLab Database, Connect to GraphQL Server
12 Creating Mongoose Schemas
13 Creating typeDefs for Project
14 Write and Run signupUser Mutation
15 Write and Run addPost Mutation
16 Write and Run getPosts Query, Intro to populate
Create Vue Frontend with Vue CLI 3
17 Create Vue Client with Vue-CLI 3
18 Adding Plugins with Vue GUI and Concurrently Dev Script
19 Structuring our Vue App
20 Installing Vuetify Plugin and Generating a Theme
21 Coolors.co for Creating Great Color Schemes (Optional)
22 Horizontal Navbar and Mobile First Design
23 Add Side Navbar
24 Add Routing and Page Transitions
Using Vue Apollo
25 Setting up Apollo Client / Vue Apollo, Firing getPosts Query from Client
26 Dive into Smart Queries in Vue Components
27 Executing Queries with the ApolloQuery Component
28 Add Carousel Component to Home Page
Integrate Vuex with ApolloClient
29 Firing getPosts Action with Vuex
30 Using Mutations and Getters
31 Add Loading Property, Loading Spinner and mapGetters
32 Create queries.js for Clientside Query / Mutation Definitions
JWT Authentication for Signin / Signup
33 Create Gravatar Avatar and Hash User Passwords on Signup
34 Write and Run signinUser Mutation
35 Sign Token and Return it Upon Signin/Signup
36 Using Variables in GraphQL, Signin / Signup Mutation Defs
37 Add Signin Form, Write and Run signinUser Action, Return JWT
38 Additional Config for ApolloClient, Send Token from LocalStorage
39 Verify JWT Token in server.js, Pass Result to currentUser in Context
40 Create getCurrentUser Query, Execute it from main.js
41 Redirect Home upon Signin with Watcher
42 Change Navbar for Signed-in User
43 Create Signout Action
44 Protected Routes and Clearing Malformed Tokens
Error Handling and Form Validation
45 Adding Global Form Alert Component
46 Add Loading Spinner to Signin Button
47 Form Validation with Vuetify in Signin Component
48 Show AuthSnackbar on Signin / Signup
49 Handle Authentication Errors, Show Auth Error Snackbar
50 Create Signup Form and Signup User Action
Add Post / Infinite Scroll Components
51 Make Add Post Form
52 Create and Execute addPost Action / Mutation
53 Update and Optimistic Response for addPost Mutation
54 Infinite Scroll on Posts Page; Add typeDef, Resolver, and Query
55 Add Infinite Scroll Functionality on Client
56 Add Grid Layout / Cards for Each Post in Posts Component
Post Component
57 Create Post Component and Route
58 Create and Execute getPost Query
59 Build out Post Card in Post Component
60 Add Messages Section to Post Component
61 Create addPostMessage Mutation
62 Perform addPostMessage in Post Component
63 Add Validation for Message Input, Clear on Submit
Like / Unlike Post
64 Create typeDefs / resolvers / queries for Like / Unlike
65 Firing Like / Unlike Post Mutations from Client
66 Add Logic for Toggling Like / Unlike Post
67 Add Like Notification in Profile Tab
Search Posts
68 Add typeDef / resolver / query for searchPosts
69 Fire searchPosts Action, Log Search Results
70 Add searchResults to State, Build Search Result Card
71 Finishing Search Results, Making them Functional
Profile Page, Update / Delete Posts
72 Add User Details Card / Favorites Cards
73 Write getUserPosts Query
74 Execute getUserPosts Query, Create and Populate User Cards
75 Add Edit Post Dialog for Updating User Posts
76 Create updateUserPost Mutation
77 Executing updateUserPost Mutation with Vuex Action
78 deleteUserRecipe Mutation – Backend Creation to Frontend Execution
Preparing for Deployment
79 RefetchQueries for Fresh Data upon Executing Mutations
80 Formatting Dates with moment
81 Minor Improvements/Fixes
Deployment with Now
82 Deploying Backend / Frontend with Now
Resolve the captcha to access the links!