Vue.js: Creating and Hosting a Full-Stack Site

Course details

Do you have Vue.js front-end capabilities, but lack familiarity with the server side? Would you like to develop the skills needed to build full-stack applications? In this course, instructor Shaun Wassell helps you enhance your development tool kit by showing how to leverage your existing Vue.js skills to build a full-stack ecommerce site. Shaun guides you through the process, showing how to use Vue.js to build a simple front end; Node.js and MongoDB to construct the back end; Axios to communicate between the front and back ends; add authentication with Firebase Authentication; and finally, how to take it live. Along the way, learn how to work with different tools and frameworks to correctly configure your site, including Postman and Express.

Concepts

0. Introduction

01 - Vue.js
02 - Codespaces
03 - What you should know
04 - Installing Node.js and NPM
05 - What to expect from this course

1. Creating a Vue.js Front End

06 - Why Vue
07 - Setting up and running a Vue project
08 - Vue project structure
09 - Creating application pages
10 - Routing in Vue
11 - Adding data, styles, and images
12 - Creating a products page
13 - Creating a product detail page
14 - Creating a shopping cart page
15 - Creating a navigation bar
16 - Linking to the product detail page
17 - Creating a 404 page in Vue
18 - Using modular components
19 - Challenge - Modular components
20 - Solution - Modular components

2. Creating a Node Back End

21 - Why Node.js
22 - Setting up an express server
23 - Testing servers with Postman
24 - Creating routes in Express
25 - Using nodemon to restart a server
26 - Creating server data
27 - Deleting server data
28 - Rewriting the shopping cart

3. Adding MongoDB to Your Back-end

29 - Why MongoDB
30 - Setting up MongoDB
31 - Connecting and adding data to MongoDB
32 - Adding MongoDB to a Node.js server
33 - Adding MongoDB to GET endpoints
34 - Loading individual products from MongoDB
35 - Creating data in MongoDB
36 - Deleting data in MongoDB

4. Connecting the Front- and Back-end

37 - Introduction to the Axios library
38 - Loading data from the server - Part 1
39 - Loading data from the server - Part 2
40 - Adding items to the shopping cart
41 - Removing items from the shopping cart
42 - Challenge - Item already in cart
43 - Solution - Item already in cart

5. Adding Authentication with Firebase Authentication

44 - Why Firebase Authentication
45 - Creating a Firebase project
46 - Sending Firebase Auth email links
47 - Logging in with an email link
48 - Listening for auth state changes
49 - Signing the user out
50 - Managing cart items with authentication

6. Hosting Your Site

51 - The release process
52 - Preparing the front-end for release
53 - Releasing the app

Conclusion

54 - Recommended next steps