(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.

Learn to add essential packages to the MEVN stack pwa and machine learning e-commerce app, including a request handler package and a redux-like state management setup for unified data.

Start using router in the mevn stack app by creating a home component under components/home and wiring it into routes. Enable history mode for clean URLs and proper view rendering.

Add html and css to the main view, integrate bootstrap 4.5.3 and font awesome, and build a product card with image, price, title, and a button for MEVN PWA app.

Loop and render a dynamic list of items in the view by defining an array of objects with id, name, description, price, and image, using mounted lifecycle and unique keys.

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.

Implement pagination in the main page by reading a page query parameter, defaulting to 1, and updating the route with the chosen page while highlighting the active page.

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.

Learn to implement the Vuex products module in a progressive web app, including actions, mutations, and state to fetch a product by id and paginate product lists by page.

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.

Wire a categories Vuex module into the categories component to fetch and display the categories list via actions, mutations, and state, then render items like phones, computers, shirts, and shoes.

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.

Fix bugs in the record store module by defining the local storage constant, resolving undefined data on storage, and updating code across lines to enable the app's components.

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.

In main component of a mevn stack pwa app, add and remove items from the cart by wiring on click to addToCart and removeFromCart, passing index and updating 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.

Learn to update item quantities in the cart store and sync changes to local storage in a MEVN stack PWA, including quantity validation, id matching, and data type handling.

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 in the MEVN stack to show items you may like for a PWA and machine learning e-commerce app, importing products and rendering prices within the component.

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 login and registration component for the mevn stack e-commerce pwa, wiring routes, and building a login/register form with user data fields, and updating authentication state on submit.

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.

Implement route guards to protect user profile, login, and admin routes in the mevn stack app, using local storage checks and next-based redirects.

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 and apply a slide animation in the admin component, defining keyframes and transitions to slide the view in and out with a shadowed layout.

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.

Develop and connect actions in the categories store module to add, edit, and delete categories, including async actions and mutations that update the categories list with new category objects.

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.

Develop a new product admin feature in the MEVN stack, implementing a create new product flow with image upload, form validation, category selection, and updates to the product list.

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.

Demonstrates user movement driven search in a MEVN stack app by wiring actions, creating search data, updating results with a fade transition, and connecting to a machine learning hook.

Learn how to convert HTML and JavaScript templates into progressive web apps, enabling installable, offline-capable experiences that feel like native apps on mobile devices.

Start building our app with the MEVN stack, create a PWA, set up http-server, run on localhost:3000, and test the admin login.

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.

Begin a mevn stack project by installing express and mongoose, creating a server, and connecting to a MongoDB database on port 3000 for a pwa e-commerce app.

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.

Create a products API route in the MEVN stack project by adding a products file, importing the product model and validation, and implementing a new add product endpoint.

Add a new product via the products api routes, validate requests, handle image uploads, assign categories, and set description and price before testing the post endpoint.

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.

Implement a get by page number route for listing products and a delete route to remove a product, using the MEVN stack in a PWA e-commerce app.

Guides building an image upload feature by creating an image upload module, validating file type and size, and saving the file to an images folder.

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.

Explore building auth API routes for a MEVN stack PWA e-commerce app, including login and user data endpoints, plus authentication and admin authorization middleware for protected routes.

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.

Apply admin and authentication middlewares across categories and products in a mevn stack app to control access, protect updates, and require a valid token.

Define the search endpoint, models, and a Mongo schema for recording each user search, validate searches, and apply machine learning to suggest products.

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.

Explore strings and arrays by building a simple neural network that learns to map days of the week to cafe names using training data, input, and output.

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.

Create machine learning models inside the app by defining Mongo's schemas and models for selected items, users, products, and results, with references and validation to support user-specific recommendations.

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 selecting and filtering products from a database by categories, prepare training data for a machine learning brain, and handle routing logic to fetch, compare, and resolve products.

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.

Review the refactored sidebar app, validate endpoints with postman, and verify tokens and API responses while ensuring MongoDB connectivity.

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.

Builds two categories store modules in a MEVN stack, wiring get, post, and delete category requests with token authentication, pagination, and state management to fetch and update categories.

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.

Explore the 4 user movement store modules in a mevn stack pwa, focusing on backend integration, token handling, search data flow, patch requests, and mutations to manage item data.

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.

Refine the home main component by updating product cards, fetching data from the server, handling responses, and integrating local storage and pagination for the product list and categories.

Build and connect a home categories view in the mevn stack pwa, fetching the categories list from the server, handling updates, and ensuring the category cards refresh correctly.

Build the home sub products component using the template starter kit, manage a token in local storage, set headers, fetch and render response data, and handle loading and errors.

Develop and manage cart functionality in a MEVN stack pwa, fetch and update cart items from the backend, adjust quantities, and remove items in the user interface.

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.

Build a search component in the mevn stack app, use a local storage token as a header for search endpoints, and debug an identical results bug.

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.

Develop a dynamic user profile component in the MEVN stack PWA, retrieving authenticated user data from the server and mapping fields like name, email, gender, birth date, and profile image.

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.

Implement and test a delete user flow in the profile component, handling token setup, content-type headers, and backend response to reflect a successful deletion and updated login state.

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.

Add new product functionality for the mevn stack admin panel, including selecting category, entering name, price, description, image handling, and posting data to the API while updating the product list.

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.

Debug and fix bugs in the MEVN stack app, test the application, and adjust responses to resolve errors before moving to the next section.

Learn how the MEVN stack powers a PWA admin to add products, upload images, and validate names, while a machine learning bug blocks requests until it finishes.

Create a separate machine learning backend server in the MEVN stack, isolate ml code, share the same database and frontend, and adjust routes and config.

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.

Build a dedicated object module for a product with id, description, and price, and write unit tests to verify the object's properties and values, such as price 300.

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.

Build integration tests for the app backend by adding a support test package, exporting helpers, and running token-driven category tests from the integration folder with before/after hooks.

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.

Develop and run app-backend integration tests for the categories route in a mevn stack e-commerce app, covering get all and get by id.

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.

Master front-end unit testing of the login method in a mevn stack app, including simulating email and password input, triggering login, spying on the function, and validating token data.

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.