(MEVN Stack) build a PWA & Machine Learning E-Commerce APP

Learn to install Git, set up version control, and push your project to GitHub while using it as a command-line tool for managing code.

install and verify node.js from nodejs.org, ensure the runtime environment is set up, then install Vue CLI to create Vue projects, and prepare the database.

Set up a local MongoDB server and MongoDB Compass, verify the installation, and use Compass to view databases like users and posts.

Create a Vue app with the Vue CLI, scaffold the view component, run npm run serve, and experience live reloading as changes to props and templates update in real time.

Implement a pagination main with next and prev buttons and manage page state. Update the selected page, call change page, and synchronize the UI and query parameters.

Add a dynamic categories component to the main view, emitting changes and updating the displayed items to reflect the selected category.

Explore how to implement filters in the main component of a mevn stack pwa e-commerce app. Learn to apply conditional logic to filter data ranges and update the ui accordingly.

Create a specific item component in a MEVN stack ecommerce app, load dynamic item data, and configure routes and links for item detail views.

Create and configure a Vuex store to share data across components using modules for products and categories. Define state, getters, actions, and mutations and import the store into the app.

Install and use the Vue Devtools extension in your browser to inspect views and debug your MEVN stack PWA e-commerce app, aiding efficient development.

Learn how to set up a Vuex products module in a MEVN stack app, wiring state, getters, actions, and mutations to manage the products list.

Implement a Vuex action inside the specific item component to fetch an item by id via http request, await the result, and return it without committing, enabling dynamic item data.

Learn to use vuex inside the main component to fetch and manage products via getters, actions, and computed properties, updating the list as the page number changes.

Create a vuex categories module for the mevn stack pwa e-commerce app. Define state with categories (id, name) and add actions to fetch the categories list.

Integrate the categories Vuex module into a specific item component to manage category data in the MEVN stack e-commerce app, using the get categories action with the category id.

Create a header component, add a header folder and view, fix naming issues, and implement a dynamic active state with responsive collapse for admin, profile, login, and logout.

Create a cart component added to the header, wiring a cart structure with items, quantity, price, and total, and enable removing items from the cart.

Create and manage the cart list in the store module using local storage to getItem, setItem, and removeItem cart data, initialize an empty cart, and track item quantities.

Complete the cart store module by adding actions to set, update, and remove items in local storage, with a default quantity and id handling for cart management.

Manage the cart inside the main view using the Coldstone module: check if an item is in the cart, remove it, and add it to the cart with local storage.

Integrate the cart store module into a specific item component of the mevn stack pwa e-commerce app, enabling check, add, and remove item actions and dynamic state updates.

Design and implement a cart store inside the cart component, manage product data and quantities, and enable actions to update and remove items for the MEVN stack PWA e-commerce app.

Create a dynamic cart experience by wiring the cart store inside the cart component, displaying dynamic item images, names, and descriptions, and implementing quantity and price handling with filters.

Move to core product details by clicking in the cart, remove items, and calculate the total price while watching item changes and quantity changes to recalculate.

Create an authentication store module to manage isLogin and isAdmin flags, with getters, actions to login/logout, and mutations to update state, including local storage handling.

Create a user movement store module that records search activity, item selections, and navigation events, using actions, mutations, and commits to update state.

Create a sugprod component by selecting five random items from a big data set of objects with id, name, description, price, and image, and route to details.

Apply declarative animations to product items using an animated class, adjusting opacity and transition durations to achieve smooth, responsive transitions across the mevn stack e-commerce app.

Create a user profile component, add it to routes, and implement show and edit modes with dynamic fields for first name, last name, email, gender, image upload, and save actions.

Create a search feature in a MEVN stack app by building a search component, binding input with v-model, and dispatching a surge event to render results.

Build the admin section of the Mevn stack pwa e-commerce app by creating admin, categories, products, and users views, with login-based route protection.

Learn how to build an admin component that toggles between categories, products, and users by updating the active class and data-driven visibility with a change class method.

Create a new users store module in the MEVN stack app, define state, actions, and mutations to manage a list of users and admin edits.

Develop and wire the admin users component to render a paginated list of users, enable role changes between admin and user, and manage data with actions and the store.

Learn to implement a pagination store and integrate it into the admin users component in a mevn stack project, enabling page navigation, dynamic page selection, and next/previous controls.

Explore how to implement a categories admin component in a MEVN stack app, including fetching and managing category data, adding, editing, deleting categories, and adding pagination.

Add and manage products in the MEVN stack pwa e-commerce app, creating a new product object with id, name, description, price, and image, and updating the product list via mutations.

Develop the products admin component by setting up a script, defining a products list and categories, and wiring store actions, getters, and data structures for managing products.

Build and refine the products admin component in show and edit modes, loading and editing product data (name, description, price, categories) and toggling the form visibility to manage product details.

Develop a products admin edit mode in a MEVN stack app, wiring onchange handlers, category selection, data binding, and save and delete actions for live product updates.

Fix a bug in the site template by removing a slide, correcting misspellings in the options, saving changes, and validating the updated ui when clicking through to the next picture.

Learn to implement a products admin component with pagination in a MEVN stack PWA for a machine learning e-commerce app, handling page numbers, dispatching actions, and updating product data.

Set up a pie chart component and dynamic data in the MEVN stack PWA, importing the chart libraries and configuring data, colors, and a legend.

Add a manifest file to your PWA to provide browser information, configure name, short name, start URL, display mode, orientation, background color, theme color, and icons for home screen install.

Register and activate a service worker to enable offline support for a MEVN stack PWA. Cache static assets, handle fetch events, and serve content offline when connectivity fails.

Set up a deploy folder, install Express and CORS, write an Express server to serve static assets, configure routes, and launch the app for deployment to Oracle.

Tested a mevn stack PWA on a real Android device by installing to the home screen, then explored offline and online flows, admin, login, profile, and category management features.

Set up a categories model in the MEVN stack by creating drafts, defining a categories schema with name constraints, validating with Joi, and wiring the API route /api/categories.

Build and validate a categories API with express in a MEVN stack, covering create, read, update, and delete operations against a MongoDB categories collection.

Learn categories API routes with pagination by page number and page size, including get by page, get by id, update, and delete operations.

Create a products api model by defining a MongoDB schema with name (unique, required), description, price, image, and a categories reference to the categories collection; export the model and validation.

Implement an edit one product API route in a MEVN stack app, updating name, description, price, image, and categories by product id and returning the updated data.

Explore building and querying the MEVN stack products API: fetch all products, retrieve a single product by id, and populate category data for each product.

Configure the user API model by setting up environment variables and JWT secrets, build a user schema and model in MongoDB, and implement token generation for authentication.

Develop the /users endpoint to add a new user by validating input, checking for existing emails, saving user details, and generating a jwt token.

Create authentication and admin middlewares with JWT to verify user authentication and admin status, protect routes, and return unauthorized or forbidden responses for invalid or restricted access.

Use an access token with middleware to fetch user data. Decode JWT to verify the user and return their id, first name, last name, and email.

Implement a robust MEVN stack user API to update data and profile images, enforce authentication middleware, and manage admin vs user roles with update and delete operations.

Define and implement search routes for products and users in a MEVN stack PWA, using async requests, name and description filters, and machine learning integration.

Explore neural networks with brain.js in JavaScript, train a simple model using inputs and outputs, and understand how probabilities guide machine learning predictions.

Explore a counter example using a neural network and machine learning in a node environment, train with training data from one to five, and predict next number with a probability.

Create and train a simple color classifier using RGB values to distinguish black from white, showcasing prototype data input, network training, and probability outputs.

Create a new example file named Simbel, import strings, and train a simple model with training data like 'I am happy' and 'I am unhappy', then test predictions.

Demonstrate a name-based example to filter products using training data and a neural network. Select five nearest items by price and description to produce the final result.

Set up the machine learning route in the MEVN stack app by importing modules and models, wiring the machine learning API path, and integrating product search logic for e-commerce.

Fix bugs in the MEVN stack pwa and machine learning e-commerce app by correcting schema names, exporting modules, and installing brain npm to run and deploy the first ml model.

Develop a machine learning module that uses authenticated user search data to fetch their recent queries and related products for machine learning powered search results.

Create training data from products sharing the same category as the selected item, extracting name and description to train the machine learning model for the mevn e-commerce app.

Train a neural network on user searches to power an app search, return the three nearest results by price, and implement text search with MongoDB in MEVN PWA e-commerce app.

Explore saving machine learning search results by comparing prices with nearest data, associating results with a user id, and persisting decisions through an asynchronous API write.

Create and manage machine learning driven products for a MEVN stack PWA by defining product data, user IDs, and collections to feed ML updates.

Explore building the MEVN stack PWA with machine learning to process product data, apply reduce operations, call a machine learning API, and predict prices for devices like iPhone models.

Implement the mevn stack pwa for a machine learning e-commerce app by validating the cart, removing items from the cart list, selecting products, training the model, and finalizing the code.

Build a user-based recommendation flow in a MEVN stack, PWA, and machine learning ecommerce app, by using a user id to fetch likes and deduplicate results.

Refactor the index by creating a startup/config module, moving code into separate files, and require the startup config to initialize MongoDB and logging with new packages.

Clean up the index by organizing routes and modularizing code in the MEVN stack to support a PWA and machine learning e-commerce app, test, and handle errors.

Learn to catch startup failures and handle promise rejections by implementing uncaught exception and unhandled rejection handlers, log errors to a dedicated log file, and ensure robust error reporting.

Integrate front-end and back-end by refactoring the authentication store module, add a token state, and update mutations to reflect login status.

Learn to build a 3 products store module in a MEVN stack PWA, including setting up products, categories, and state updates using API calls and mutations.

Develop and manage user models for the store, purge test data, apply patches, handle tokens and responses, and update the user list and page numbers within admin components.

Debug and run a Mevn stack pwa e-commerce app, fixing frontend and backend errors, enabling cors, and preparing the main pages—products, admin, profile, cart, login, and register.

Demonstrates loading the home main component in a MEVN app by fetching product data from the server, handling empty results, and updating the list and storage accordingly.

Develop and test a login and register component within the MEVN stack app, handling user data, form validation, API requests, and token-based authentication.

Fix the misbranding bug that hid the machine learning link within the MEVN stack PWA e-commerce app, refresh to confirm, and proceed to the next lecture.

Learn to build a specific item component in a MEVN stack PWA e-commerce app, modeling item data, wiring API calls, and debugging to render category items.

Fixes a bug by properly handling local storage and rating data, ensuring machine learning completes before data returns. Identifies backend timing issues and outlines planned fixes.

Learn how to implement a user profile component in a MEVN stack PWA, including posting and editing user data, handling image uploads, content-type headers, and backend responses.

Explore admin user management in the MEVN stack course, including creating accounts, assigning admin roles, updating user lists, and syncing front-end and back-end changes.

Explore admin categories in a MEVN stack app by creating, saving, listing, editing, and deleting categories, handling IDs, and debugging with console logs to ensure the category data updates correctly.

Create an admin products section in the MEVN app by adding a main product component that coordinates add, edit, and list views in a products folder with a /products route.

Build the admin products view in a MEVN stack app by wiring a paginated product list with edit mode, editing fields like id, name, description, price, and category.

Enhance the admin edit product workflow by wiring the edit mode, images, file upload, and category data through props and endpoints, aligning data arrays and school id constraints for saving.

Master admin product editing in a mevn stack pwa e-commerce app, validating name, description, price, and image, and implementing token-based update requests with alert handling and error messages.

Learn to set up automated testing for a mevn stack by installing a testing package, creating a test spec, and running unit and integration tests to validate code behavior.

Learn to implement a numbers module with an absolute value function that returns a nonnegative result, and validate it through grouped unit tests covering positive, negative, and zero inputs.

Learn to implement a string function that builds a full name from a given input and validate it with tests, focusing on string handling in a MEVN stack PWA project.

Learn to test exceptions in a MEVN stack app by building unit tests for user name validation, throwing errors, and asserting responses across inputs.

Learn to test arrays with balanced unit tests, using a getCities function to return city names, and avoid tests that are too specific or too general.

Explore mock functions to simulate database and mail interactions, test discounts and customer notifications, and practice unit and integration tests with async promises in a mevn stack project.

Set up the app backend for the mevn stack by configuring the server, writing unit and integration tests, updating the test script and coverage options, and preparing the test environment.

Explore building and testing a backend authentication middleware for JWT validation in a MEVN app, including unit tests, token checks, admin role handling, and test coverage reporting.

Develop backend unit tests for the user model, including JWT generation, admin payload, and Mongo integration, with consent handling and plans for integration tests in the next lecture.

Develop app-backend integration tests for the categories route, using before/after hooks, validating a 200 response and category data from the slush categories API.

execute end-to-end tests for the app-backend categories route, validating admin access, category name length, and proper status codes, and verify category creation persists as expected.

Learn how to add unit tests to a Vue front-end, configure test scripts, mount components with Vue Test Utils, and run tests to validate the app.

We start the first unit test for the LoganRegister component in the front end, importing the component, mounting it with Vue Test Utils, and asserting it renders correctly.

Learn to mock API calls and test front-end route paths, using mocks to simulate functions and verify component behavior, preparing for testing the login function in the next lecture.

Learn how to unit test the register function in the front end, validate email, password, and confirm password fields, and verify login data flows through view components.