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
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
  • CSS (SCSS) + HTML
  • 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
07:15

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

Setting up the .NET Core Web API Project
08:48
+ 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
23:02

Let's hook our API up to PostgreSQL!

Connecting to PostgreSQL
15:24

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
20:13
  • MVC Controllers

  • Services

  • Interfaces

Starting Controllers and Services
38:14
  • SQL SELECT and INSERT Statements

  • Wiring up our API to our data


Continuing API Development and Basic SQL
17:09

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

View Models and Service Development
43:07

Let's continue work on our service layer!

Continuing Service Layer Development
33:16

Let's expand our serializer behavior and controllers.

Expanding Serialization and Controllers
28:40

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

Making Test Requests with Postman and Bug Fixes
24:59

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

Completing our API
18:17
+ 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
22:32

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

Creating the App Layout
27:28

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

Creating the Inventory Dashboard
24:22

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

Creating Modals: Receiving Inventory
23:45

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

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

  • Thinking about the Service Layer of the Front End

Starting the Front End Service Layer
15:11
+ 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
13:48

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
11:30

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

Upgrading Styles, Saving New Products
16:10

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

Adding new API Endpoints
11:01

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

New Feature: Manage Customers Screen
37:20

Let's keep the development on these features rolling.

New Feature: Manage Customers and Invoice Generator
22:39

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

Invoice Wizard Feature Development
35:38

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

New Feature: PDF Export
15:34

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

New Feature: Tracking Sales Orders
27:42

Let's add charts, and talk about Vuex.

New Feature: Charting and Vuex Pathify
37:04

A much-needed upgrade to our charts.

Bugfix: Updating Chart Without Refreshing
16:08
+ 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
28:59

Let's test our Vue components using Jest.

Testing Vue Components with Jest
11:37

Let's set up automation tests with Cypress.

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

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