Full-Stack Vue + Node

Unlike simple "to-do" apps, full-stack apps have numerous features with complex requirements but must also balance high performance, stability in production, and ease of maintenance.

In this course, you'll learn to build an authenticated, full-stack CRUD app with an API and database using cutting edge software like Vue, Node, Express, MongoDB, and the Postman development environment.

Module 1 - Full-stack scaffolding with Vue CLI

Setting up a Vue project with best practices is pretty easy with Vue CLI. However, it becomes a little trickier if you're going to set up a full-stack app where the codebase is split between client and server.

In the first module, we'll look at how to modify a Vue CLI project scaffold to accomodate a full-stack app configuration.

This will involve modification of the Webpack config and package scripts that are provided out-of-the-box with Vue CLI.

We'll also be configuring our full-stack development tools, for example we'll be installing a package to help us seamlessly run our API server and the Webpack dev server simultaneously.

Module 2 - Building an API with Node, Express & MongoDB

In the second module, we'll take the first steps in building our backend API.

The main tools we'll be using are the Express framework which we'll scaffold with the MVC structure.

We'll be using MongoDB for the database, as well as the Mongoose ORM which will makes setting up CRUD operations a breeze.

Finally, to help us develop the API before we've got a working client app, we'll be using the Postman API development environment.

Module 3 - API unit testing with Mocha

In the third module, we'll be unit testing our Express app, helping us to ensure the API is robust and stable.

We'll begin with an introduction to unit testing with Mocha and also to Supertest which we use to mock our server.

We'll then write tests for the API endpoints we created in the previous module, learning how to assert the API response and status, and also the database state.

Module 4 - API authentication with JSON web tokens

In module 4, we'll be creating a token-based authentication system for our API.

We'll first learn about JSON web tokens and how to generate and store them using Node.js.

We'll then see how to authenticate an API request by attaching a valid JSON web token.

We'll also create some additional API endpoints for registering, logging in, and logging out a user.

Finally we'll protect our resources based on user roles, for example only allowing admin users to edit items.

Module 5 - Frontend CRUD with Vuex ORM

In module 5, we'll be integrating a frontend Vue app into the stack. I'll provide the basic app structure so we can focus on learning how to implement CRUD operations in a Vue app.

The main tool we'll be using for this is Vuex ORM, which is a Vuex plugin that gives us a simple, object-oriented way of managing data in the frontend.

We'll then integrate Vuex ORM with Axios to allow us to query data from our API while keeping data in sync between the back and frontend parts of the app.

Module 6 - Frontend authentication with Vue Auth

In module 6, we'll implement authentication in the client app by using the Vue Auth plugin.

We'll firstly need to ensure our HTTP requests are set up to work with the token-based authentication system we've set up.

We'll also need to create the UI side of the user management system, by setting up forms for registering, logging in and out and so on.

Finally, we'll use Vue Auth to help us adapt the UI based on a user's role and authentication status. For example, we can stop users from accessing certain routes, or seeing certain data.