MEAN Stack E-Commerce App: Angular, NX, PrimeNG [2023]

Learn to link products to orders, enable cart checkout with address and payment options, auto-fill user data, and manage order states from the back end using Postman.

Implement order and order item schemas in mongoose, linking orders to multiple items and items to products, with shipping details, total price calculation, default pending status, and a user reference.

Explore how the front end sends an order as an array of order items, each with a product ID and quantity, linked to the order and user ID.

Learn to post orders by first creating order items, collecting their IDs, and attaching them to the new order, with async handling and Postman testing.

Retrieve orders with an authenticated get request, populate user details by name, add new orders, and show products in order items with category via nested populate.

Learn to update an order status with a put request using an order id, updating only the status from pending to processed to shipped to delivered, verified via Postman.

Back-end computes the total price by resolving order items from the database using Mongoose, populating product price, multiplying by quantity, and reducing to a single total with Promise.all.

Create a get total sales endpoint using Mongoose aggregate to sum the total_price across orders, and display the total in the admin dashboard.

Explore fetching a specific user's order history via a get user orders API, with user id, populating order items with products, ordered newest to oldest.

Master image uploads for products with multer in a mean stack app, configuring destination and file names, validating png/jpeg files, testing via postman, and handling single and gallery image URLs.

Configure your backend file uploads using Multer, set disk storage, rename files, store in public/uploads, and construct full image URLs for frontend display.

Test image upload with Postman using multipart form data and an authorization token and a file field. Update the backend to name files with date.now while preserving the extension.

Define a file type map of allowed image mime types (png, jpeg, jpg) and validate uploads by deriving extensions from mime types, rejecting non-image files such as pdf.

Validate that the product post request includes an image by checking for a file on the front end; return an error when no image is provided.

Update a product image via a put request by optionally uploading a new image; if none, keep the existing image and update the image path in the database.

Learn to implement a product gallery update API that accepts an array of images, builds image paths with a base URL, and updates only the gallery.

Add the uploads folder to the publicly accessible paths in the JWT configuration and define a static public/uploads directory in Express, enabling image URLs to load without authentication.

Examine the e-shop page structure in an Angular, NX project, detailing the front-end and admin panel layouts with home, product lists, details, cart, login, and shared components.

Install angular CLI globally with npm, resolve mac permission issues with sudo, verify via ng help, and create a desktop workspace for angular applications and libraries.

Build a practical Angular app by using modules that contain components and services. Components fetch data through services from the backend to display product lists and product details.

Discover NX, a TypeScript based monorepo tool built on Angular dev kit that provides a workspace CLI, cloud caching, shared libraries, and fast, change-focused testing for Angular, React, and NodeJS.

Install nx globally using npm to set up the nx command line interface, verify the installation, and prepare to generate applications, run web servers, and view the dependency graphs.

Install vscode extensions for coding in the mean stack app. Use angular language service for autocompletion, prettier for formatting, bracket pair colorizer, css navigation, and extensions.json to preload recommendations.

Explore a real-world NX monorepo with eShop, blog, and admin apps, using shared libraries, services, and a state store for login, cart, and orders.

Create a company workspace with nx, choosing an Angular preset and naming the first app ng shop inside a shared repo; configure ESLint, Prettier, and the apps libs structure.

Create the admin panel app in the NX monorepo alongside the eshop, using angular with sass styling and optional routing, then serve both apps on separate ports.

Create application-level components in an nx angular project, building a home page with header and footer, and organize components with pages for product lists using nx g component.

define application-level routes for a home page and a product list, using router module and a routes array, and render components via the router outlet.

Create a master page by adding shared header and footer components in the app component, so product list and home page render within this layout via an outlet.

Rename components to shop-specific selectors (header, footer) and update the app-specific eslint to the ng shop prefix. Enforce kebab-case or camelCase and run eslint to fix linting before build.

Enable live linting in vscode with eslint to validate code as you type. Learn to enable rules, adjust for empty constructors and ng shop prefixes, and manage errors.

Learn how the nx vscode extension speeds angular development by generating components via a GUI with dry-run previews, options for path, module, style (scss), and selector.

Create shared libraries with nx generate, exposing UI components and services, configure library tsconfig, eslint, and angular.json, and prepare exports for reuse across applications.

Use the NX extension in Visual Studio Code to generate and configure shared libraries, including products, users, and orders, with scss styling, Ivy, Jest tests, and lazy loading.

Learn to create and export Angular components inside a library, generate them with NX schematics, and consume them in an app by importing the library module and using the selector.

Export library components and services via a central index and import them using tsconfig paths. Unify workspace paths so UI modules in products reuse shared libraries without path issues.

Learn how to move from component-scoped styles to a shared styles approach by creating a public styles folder, importing external CSS, and using shared variables across the app and libraries.