Create and host a full-stack site from scratch. Learn how to set up a front end using Vue.js, set up a back end using Node.js and MongoDB, and host your site on Heroku.
Overview
Syllabus
Introduction
- Create and host a full-stack site with Vue.js
- What you should know
- Install Node.js and npm
- What to expect from this course
- Why Vue?
- Set up and run a Vue project
- Vue project structure
- Routing in Vue
- Add data, styles, and images
- Create a product page
- Create a product detail page
- Create a shopping cart page
- Create a navigation bar
- Create a 404 page in Vue
- Use modular components
- Challenge: Modular components
- Solution: Modular components
- Why Node.js?
- Set up an Express server
- Test servers with Postman
- Route parameters in Express
- Get data from a server
- Use Nodemon to restart a server
- Create and delete server data
- Why MongoDB?
- Download and install MongoDB
- Add MongoDB to a Node.js server
- Add MongoDB to GET endpoints
- Create data in MongoDB
- Delete data in MongoDB
- Introduction to the axios library
- Load data from the server, part 1
- Load data from the server, part 2
- Add items to the shopping cart
- Improve the add-to-cart interface
- Remove items from the cart
- Challenge: Item already in cart
- Solution: Item already in cart
- The release process
- Build and serve a Vue front end
- Set up Heroku and MongoDB
- Use environment variables in Heroku
- Push code to Heroku
- Next steps
Taught by
Shaun Wassell
