Learn Full-Stack Vue, .NET Core, PostgreSQL Web Development
4.6 (77 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
354 students enrolled

Learn Full-Stack Vue, .NET Core, PostgreSQL Web Development

Code-along to build a full-featured management dashboard from scratch
4.6 (77 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
354 students enrolled
Created by Wes Doyle
Last updated 7/2020
English [Auto]
Current price: $23.99 Original price: $34.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 12 hours on-demand video
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Full-stack web application development skills
  • .NET Core 3.0
  • Vue JS
  • PostgreSQL
  • Cypress Automated Testing
  • Unit Testing Vue with Jest
  • Unit Testing C# with xUnit
  • Refactoring
Course content
Expand all 34 lectures 12:02:52
+ Introduction
4 lectures 26:48

Let's lay out a quick overview of what we'll be working on in this course!

Preview 01:17

Let's take a look at what we'll be building together throughout this series!

Preview 09:28

Let's look briefly at setting up our application architecture.

Using the Vue CLI to Generate the Vue Project

The Vue CLI is a powerful tool for beginning a new Vue.js project.

Setting up the .NET Core Web API Project
+ Back End: .NET Core Web API + PostgreSQL
10 lectures 04:22:21

In this lecture, we begin the Data Layer of our Web API, and set up Git!

Topics covered:

  • Web API Data Layer

  • Git

Building the Data Layer

Let's hook our API up to PostgreSQL!

Connecting to PostgreSQL

Using a Makefile can make development a bit easier.  We'll also begin adding Data Models to our API.

Setting up Makefile and Adding Data Models
  • MVC Controllers

  • Services

  • Interfaces

Starting Controllers and Services
  • SQL SELECT and INSERT Statements

  • Wiring up our API to our data

Continuing API Development and Basic SQL

Let's talk about our View Models, and continue general back-end service development.

View Models and Service Development

Let's continue work on our service layer!

Continuing Service Layer Development

Let's expand our serializer behavior and controllers.

Expanding Serialization and Controllers

Postman is one of the most powerful tools for developing APIs.  Let's hook it up!

Making Test Requests with Postman and Bug Fixes

Let's wrap up our initial (first-pass) API development!

Completing our API
+ Front End: Vue.js SPA Web Client
6 lectures 02:12:36
  • Vue Application Structure

  • Data binding and reactivity

  • Functions

  • Lifecycle Hooks

Starting Front End Development with Vue.js

Let's use flex in our SCSS to create the basic layout of our web application.

Creating the App Layout

Let's look at creating and displaying data in a table

Creating the Inventory Dashboard

In this video, we'll build a modal to receive inventory.  We'll also talk about named slots.

Creating Modals: Receiving Inventory

Modals are a part of many web applications - let's build a New Product modal for ours.

Creating Modals: New Product Modal
  • Making HTTP Requests with axios

  • Thinking about the Service Layer of the Front End

Starting the Front End Service Layer
+ Full Stack Integration - Back and Front End
11 lectures 04:04:34

Configuring CORS properly can be a bit tricky, but we'll fix a bug on our back end, and work on our Inventory data.

Bug Fix: CORS and Sending Inventory Data

Robust JSON serialization to and from our API is required, so we'll implement Newtonsoft.  We'll also make great use of Typescript types.

Implementing Typescript Types, Newtonsoft Json.NET Library

Let's break for some stylistic updates and save new products.

Upgrading Styles, Saving New Products

As we expand our API, we will be adding new endpoints in our controllers.

Adding new API Endpoints

We need a way to manage our customer base, so let's integrate that into our app.

New Feature: Manage Customers Screen

Let's keep the development on these features rolling.

New Feature: Manage Customers and Invoice Generator

We need to build an invoice wizard, so we'll do that in Vue.

Invoice Wizard Feature Development

Our customers want PDF invoices! Let's add this as a feature.

New Feature: PDF Export

We need to track Sales Orders. Let's add the feature!

New Feature: Tracking Sales Orders

Let's add charts, and talk about Vuex.

New Feature: Charting and Vuex Pathify

A much-needed upgrade to our charts.

Bugfix: Updating Chart Without Refreshing
+ Unit Testing and Automation Testing
3 lectures 56:33

On to testing! But first, a bug fix.  In this video, we'll start unit testing our back-end code.

Bugfix: Snapshots, Back-End Unit Testing

Let's test our Vue components using Jest.

Testing Vue Components with Jest

Let's set up automation tests with Cypress.

Automation Testing with Cypress
  • Beginner to intermediate familiarity with web development
  • An interest in hands-on learning by building software

In this course, we'll build a feature-complete web application for a coffee roaster called Solar Coffee. We'll build a management dashboard consisting of a PDF invoice generator, dynamic graphs, and an order fulfillment feature.

As part of this course, you'll learn fundamental full-stack development skills, including:

  • REST API development with .NET Core

  • Front-End development with Vue.js with TypeScript

  • Using SQL with a PostgreSQL database

  • Testing API endpoints with Postman

  • Unit testing with Jest, xUnit

  • End-to-end testing with Cypress

  • Finding and fixing bugs

  • Web application architecture

Who this course is for:
  • Beginner to intermediate level web developers curious about improving full-stack skills
  • Hands-on learners who enjoy learning by building applications