Learn how to use Vue, Node.js, Express, and MongoDB to create unique web applications and learn the fundamentals of full-stack development with the MEVN stack.

MEVN (MongoDB, Express.js, Vue, and Node.js) is a popular NEW stack for building full-stack web applications. It allows developers to write an entire application—front-end, back-end, and database—using only JavaScript.

This course takes the approach that it’s best to learn by doing. It demonstrates the key technologies and possibilities of full-stack development with the MEVN stack.

The code files associated with this LiveLesson can be accessed https://github.com/shaunwa/full-stack-vue .

About the Instructor

Shaun Wassell’s goal is to create a world where people are empowered to use programming as a way to solve meaningful problems—a world where writing code is just as natural for most people as walking or breathing. To help make this a reality, he has dedicated the past few years to helping people learn and master software-development skills through video courses, live training sessions, and one-on-one tutoring.

Shaun has been programming since he was a kid, when creating video games was his gateway into the world of software. Since then, he’s been fortunate enough to be a contributing member on many amazing software projects and work with some incredible mentors along the way.

Skill Level

• Intermediate

• Build a full-stack meal-planning application using Vue, Node.js, Express, and MongoDB
• Build a front-end with Vue
• Build a server with Node.js and Express
• Implement data storage with MongoDB
• Walk through full-stack integration
• Use REST APIs to load and manage application data

• JavaScript developers/engineers
• Front-end developers/engineers
• Vue developers/engineers
• Back-end developers/engineers
• Full-stack developers

• Learners should have basic knowledge of HTML, CSS, JavaScript, and Vue.

Pearson publishes expert-led video tutorials covering a wide selection of technology topics designed to teach you the skills you need to succeed. These professional and personal technology videos feature world-leading author instructors published by your trusted technology brands: Addison-Wesley, Cisco Press, Pearson IT Certification, Sams, and Que. Topics include IT Certification, Network Security, Cisco Technology, Programming, Web Development, Mobile Development, and more. Learn more about Pearson Video training at http://www.informit.com/video .

Table of Contents

Introduction

Full-Stack Web Development with Vue: Introduction

Lesson 1: Build a Front-End with Vue

Learning objectives

1.1 Learn the basics of Vue

1.2 Learn about the example application

1.3 Create and set up the project

1.4 Create the Home page, part I

1.5 Create the Home page, part II

1.6 Create the Add Ingredient page

1.7 Create the Recipe Search page

1.8 Allow users to select and remove recipes

1.9 Create the Shopping List page

1.10 Add styling to the application

Lesson 2: Build a Server with Node.js and Express

Learning objectives

2.1 Learn the basics of Node.js and Express

2.2 Create and set up the project

2.3 Add a Load Recipes route to the server

2.4 Add a Load Ingredients route to the server

2.5 Add a Load Meals route to the server

2.6 Add Create routes to the server

2.7 Add Update routes to the server

2.8 Add an Update Meal route to the server

2.9 Add Delete routes to the server

2.10 Create the Recipe Search route

2.11 Generate user shopping lists

2.12 Create the Generate Shopping List route

Lesson 3: Add Data Storage with MongoDB

Learning objectives

3.1 Learn the basics of MongoDB

3.2 Walk through the basic data-storage strategy

3.3 Add MongoDB to read routes

3.4 Add MongoDB to create routes

3.5 Add MongoDB to update routes

3.6 Add MongoDB to delete routes

Lesson 4: Learn Full-Stack Integration

Learning objectives

4.1 Learn the basics of full stack

4.2 Load data from the server

4.3 Create data on the server

4.4 Delete data on the server

Summary

Full-Stack Web Development with Vue: Summary