Full-Stack Vue + Node
Learn to build a full-stack Vue.js CRUD app and authenticated Node.js API with MongoDB.
I. Introduction
| 1. Introduction | |
| 2. Demo of the case study app | |
| 3. Environment setup | |
| 4. Using the starter code | |
| 5. Keeping code and software in sync |
II. Full-stack scaffolding with Vue CLI
| 6. Module introduction (00:35) | |
| 7. Renaming the client source file directory (06:17) | |
| 8. Serving the the full-stack app in development (07:30) | |
| 9. Dev server proxy (02:33) | |
| 10. Environment variables (08:24) |
III. Building an API with Node, Express, and MongoDB
| 11. Linting a full-stack Vue app (03:54) | |
| 12. Module introduction (02:35) | |
| 13. Creating a route (02:28) | |
| 14. API development with Postman (04:14) | |
| 15. Using MVC directory structure (06:22) | |
| 16. Mongoose models (04:31) | |
| 17. Creating and viewing a document (04:49) | |
| 18. Adding model validation (09:06) | |
| 19. Refactoring using schema (03:02) | |
| 20. Creating the POST /items route (03:47) | |
| 21. Body parser middleware (02:18) |
IV. API Unit Testing with Mocha
| 22. Writing to the database (04:23) | |
| 23. Module 3 introduction (01:04) | |
| 24. Setting up Mocha (06:37) | |
| 25. Assertions and Asynchronous Test Cases (04:33) | |
| 26. Unit testing an API (02:43) | |
| 27. API test setup (06:45) | |
| 28. Testing server response (04:20) | |
| 29. Checking database (06:15) | |
| 30. GET /items route and database seed (08:13) | |
| 31. GET /items/:id route (05:57) | |
| 32. Testing endpoints with dynamic segments (08:52) |
V. API authentication with JSON web tokens
| 33. Sad path tests (02:58) | |
| 34. Introduction (01:10) | |
| 35. Creating users (05:37) | |
| 36. JSON web tokens (11:07) | |
| 37. Generating a JWT (05:54) | |
| 38. Attaching the token to a request (03:56) | |
| 39. Securing requests and responses (06:40) | |
| 40. Protecting endpoints (14:06) | |
| 41. Auth middleware (05:38) | |
| 42. Seeding test database with users (06:10) | |
| 43. Testing secured endpoints (13:24) | |
| 44. Hashing passwords (09:17) | |
| 45. Logging in (11:47) | |
| 46. User roles (05:55) | |
| 47. Protecting item routes (08:17) |
VI. Frontend CRUD with Vuex ORM
| 48. Testing protected routes (05:57) | |
| 49. Module introduction (01:50) | |
| 50. API changes (02:55) | |
| 51. Tour of the client app (04:07) | |
| 52. Introduction to Vuex ORM (09:53) | |
| 53. Creating them item model (04:26) | |
| 54. Querying the API (06:35) | |
| 55. Creating the item page (04:44) | |
| 56. Setting up the shopping cart (06:18) | |
| 57. Binding cart item controls to Vuex (08:15) | |
| 58. Implementing cart count (06:29) | |
| 59. Cart total and persisting state (06:29) |
VII. Frontend authentication with Vue Auth
| 60. API error handling (05:40) | |
| 61. Module introduction (01:42) | |
| 62. Intro to Vue Auth (06:56) | |
| 63. Creating the user model (03:26) | |
| 64. Binding form inputs (10:18) | |
| 65. Setting up the login form (10:34) | |
| 66. Setting up the registration form (06:21) | |
| 67. Role-based UI features (07:20) | |
| 68. Logging out via the UI (07:19) | |
| 69. Creating items (11:50) | |
| 70. Editing items (10:04) |