
Explore the MEVN project to build a Vue and Node CMS with a shopping cart, products, categories, checkout, and login to manage products, add pages, and place orders with validation.
Explore essential tools for the Mevn project, including Chrome, Visual Studio Code, useful VS Code extensions, and MongoDB Compass for managing MongoDB during the course.
Create a new node project, set up folder and VS Code workspace, and install express, express-formidable, and mongoose. Configure a MongoDB connection in config/database.js and define collections like products and categories.
Connect to the database with mongoose and configure the database. Initialize an express app with middleware, set the public folder, and start the server on port 3000 with nodemon.
create a page model with mongoose, exporting the Page model, define a page schema with name, slug, and content, and expose a GET /pages endpoint to fetch all pages.
Create models and get requests for categories, products, and orders in a MEVN project. Define category, order, and product schemas with fields like name, slug, description, image, and price.
Create a new Vue project, name it product view, install core packages like Axios, Vue Router, and Vuex, then run npm run serve and clean up starter components.
Copy the nav from the Bush website into a new header component, import it into App.vue, and adjust containers and bootstrap settings to render a functional header.
Create a Vuex store for main menu pages, enable CORS, fetch pages from the API with axios on app startup, and display them.
Create a pages component and configure routes and a store-based lookup by slug to render page content for home and other pages within a bootstrap layout.
Implement a categories component to fetch and list categories, then render each as a navigation link to /categories/{slug} for browsing products.
Initialize the products array and enable category filtering to fetch all products or those in a specific category via the API.
Build the products component and product list, wire category-based fetching and image paths, display each product with image, name, description, and price, and add an add-to-cart button.
Fix broken product links and implement a price filter by creating a currency filter shared across the app, formatting prices as USD.
initialize state with current page, page count, and page size four, and compute category-based product counts via api routes to support paginated browsing.
Develop a product pagination component by adapting the existing list, wiring page count and current page state, and adding previous and next controls with dynamic highlighting.
This lecture demonstrates implementing product pagination by category in a Vue and Node CMS app, updating API calls for four items per page and syncing the page and category state.
Create a cart module with state and getters for item count and total price, and build a cart summary component that displays the items or 'your cart is empty'.
Enable add to cart functionality by updating the cart module to add products or increment quantities when already in the cart, using mutations and cart item state with product details.
Create a shopping cart component with a cart overview, category navigation, and a cart page link, showing item count, per-item actions, and currency-formatted totals.
Add remember cart functionality with local storage to persist cart data across page refreshes, including load, store, and initialize cart actions and a watcher to update the state.
Finish and troubleshoot the shopping cart in a mevn project by implementing add, subtract, remove, and clear cart actions, and fix quantity display issues tied to product ids.
Learn to convert the shopping cart into a checkout component in a MEVN project, wiring route to checkout and a form collecting name, email, and address with place order button.
Build the orders module for checkout in a MEVN project, including axios post actions and basic state setup. Map the card total and integrate the orders module into main store.
complete the checkout by submitting a form data payload with name, email, address, cart, and total to /orders, store the order, clear the cart, and route to the thank-you page.
Set up the admin area by creating a new Dudman component and router entries for admin pages, including products, pages, and orders, and linking the admin section into the app.
Create an admin pages component in a Vue and Node CMS, featuring a pages table with name, slug, and edit/delete actions, and set up /admin/pages as a nested route.
Add page 1 demonstrates integrating ad page functionality within the pages component, using a single page editor for both adding and editing pages, with fields for name, slug, and content.
Finish the add page functionality in the page editor, define added mode, model page data (name, slug, content), and post new pages via axios to /pages, refreshing the admin list.
demonstrates adding an edit page by loading a page by id in edit mode, then updating its name, slug, and content via an axios put request.
Implement delete page functionality in the pages component, wiring the API request to delete a page by id, updating the store via map actions, and refreshing to confirm removal.
Manage products in the admin area by fetching products and images from state, filtering by category, and rendering a paginated table with name, image, price, and actions.
Create a reusable product editor in a MEVN app for adding and editing products with a form that includes name, description, price, image, and category, pulling categories from state.
Finalize the add product feature by handling change events and image uploads with form data, applying category slug logic for add or edit modes, and updating the products store.
Finish the add product feature by posting to /products and handling name, category, description, price, and optional image upload in the Vue and Node CMS shopping cart.
Master editing a product in a MEVN app by handling image uploads, using a put request, and updating name, category, description, and price.
Implement delete product functionality by wiring a delete request to the product API, updating the product list after removal, and ensuring the user interface reflects the change.
Build an admin orders view in a Vue and Node CMS, displaying orders (id, name, email, address) and cart contents (product, price, quantity, total) loaded on init.
implement a wysiwyg-like page content editor and apply a scoped active class to category links to highlight the current category with a blue background and white text.
Define and display validation rules for the checkout form, using required and email validators, show error messages via a validation error component, and validate before submitting.
Add validation for page and product editors by marking fields as required, enforcing rules for page number, name, slug, content, and product fields (name, description, price, category), image optional.
Introduce authentication in a Vue store by wiring Axios post to /auth for login, managing an authenticated state via mutations with hard-coded credentials.
Finish authentication by implementing a login component with username and password fields, failure messaging, and redirect on success, wiring the auth module and route guard to protect pages.
Discover ten-dollar courses and exclusive deals on my website, where you can find the best prices.
Build custom apps using Vue js and Node js!
In this hands on, practical course you will learn how to develop your own apps using Vue and Node using MongoDB as the database, all from scratch!
Please note that some Vue and Node knowledge is expected and also you should already have MongoDB installed (I have beginner courses on both Vue and Node).